/    Sign up×
Community /Pin to ProfileBookmark

Button background color problem

The following is just a test of the color setting of buttons.
The question is: What am I doing wrong with the classes of ‘.sub’ and ‘.mul’?
`<!DOCTYPE html><html lang=”en”><head><title> Test Class Settings </title>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width-device-width,initial-scale=1.0, user-scalable=yes”/>

<style>
button { width: 8em; font-size: 1.2em; }
button.add { background-color: lime; }
button.sub ( background-color: pink; )
button.mul { background-color: cyan; }
button.div { background-color: orange; }
#demo { background-color: yellow; height: 10em; }
</style>

</head><body>

<fieldset id=”btnTable”><legend>Button Array Calculator</legend>
<button class=”add” data-array=”1,2,3,4″>Add: 1,2,3,4</button>
<button class=”add” data-array=”4,3,2,1″>Add: 4,3,2,1</button>
<button class=”add” data-array=”1,1,1,1″>Add: 1,1,1,1</button>
<button class=”add” data-array=”2,2,2,2″>Add: 2,2,2,2</button><br>

<button class=”sub” data-array=”1,1,1,1″>Sub: 1,1,1,1</button>
<button class=”sub” data-array=”2,2,2,2″>Sub: 2,2,2,2</button><br>

<button class=”mul” data-array=”2,2,2,2″>Mul: 2,2,2,2</button>
<button class=”mul” data-array=”3,3,3,3″>Mul: 3,3,3,3</button><br>

<button class=”div” data-array=”2,2,2,2″>Div: 2,2,2,2</button>
<button class=”div” data-array=”3,3,3,3″>Div: 3,3,3,3</button>
</fieldset>

<button>Results</button>
<button>Clear results</button>
<pre id=’demo’><b>NOTE:</b> Does nothing at this time</pre>

</body></html>
`
The background color do not change for the ‘sub’ or ‘mul’ classes.
Should be a simple fix, but I just don’t see it (???)

to post a comment
CSS

4 Comments(s)

Copy linkTweet thisAlerts:
@cootheadMay 09.2020 — Hi there JMRKER,

you have a two typing error here...

``<i>
</i>button.sub ( background-color: pink; )<i>
</i>
``

The opening and closing brackets

need to be a wee bit more [b]curly[b]. :D



_coothead_
Copy linkTweet thisAlerts:
@JMRKERauthorMay 09.2020 — Thank you 'coothead'. You may be older, but your eyesight is still good.

I was doing the testing past midnight here and should have know better

to come back to the problem later when the brain-fark had cleared.

😅
Copy linkTweet thisAlerts:
@wefbeeMay 09.2020 — a.button,

button,

html input[type="button"],

input[type="reset"],

input[type="submit"] {

background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #dfdfdf), color-stop(1, #ffffff));

background: -ms-linear-gradient(bottom, #dfdfdf, #ffffff);

background: -moz-linear-gradient(center bottom, #dfdfdf 0%, #ffffff 100%);

background: -o-linear-gradient(#ffffff, #dfdfdf);

}

There is a background gradient which is overwriting your styles I suppose. As @Turnip suggests change it to background instead of background-colour and it will work as

[b]Links removed by Site Staff so it doesn't look like you're spamming us. Please don't post them again.[/b]
Copy linkTweet thisAlerts:
@JMRKERauthorMay 10.2020 — @wefbee#1618246

I think you have replied to the wrong thread in this forum. You suggestion has nothing to do with anything I did.

Also note that 'background-colour' will NOT work with anything this side of the Atlantic as we spell it 'color'

Thanks anyway. :)
×

Success!

Help @JMRKER spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...