CODEWITHSUNDEEP
htmlcssstylesheet
EML
EML

Reputation: 10280

Can't move an inline style out to a style sheet?

I'm sure this is a dumb question, but I can't move this inner (button) inline style to a style sheet:

<label style='white-space:nowrap; line-height:14px; height:14px; vertical-align:bottom; '>
<input type  = 'button'
       id    = 'sButton2'
       style = 'cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px' >
The quick brown fox
</label>

I've tried this:

<style type="text/css">
#sButton2 { cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px; }
</style>
...
<label style='white-space:nowrap; line-height:14px; height:14px; vertical-align:bottom; '>
<input type  = 'button'
       id    = 'sButton2' >
The quick brown fox
</label>

and this:

<style type="text/css">
.sButton { cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px; }
</style>
...
<input type  = 'button'
       id    = 'sButton1'
       class = 'sButton' >

but neither of these works; no style is applied. Any idea what I'm doing wrong?

Thanks.

EDIT

Sorry folks, it's midnight, I (was!) just off to bed, and I screwed up the cut-and-paste. The syntax of the style sheet is actually correct - I've fixed it above. Other info:

1- the style sheet is in the head section of a single html file. There are already a couple of jQueryUI ones above it, and I copied the syntax from them;

2 - I think that there is another style applied to the buttons, but I was hoping that #sButton2 would override this;

3 - I can't get even the most trivial style from a style sheet to apply to the buttons. If I just set the button width, for example, nothing happens, although an inline width works;

4 - it's not browser-specific - seen in F/F, Opera, Chrome;

Thanks again.

EDIT2

Just tried appending a !important to the end of the style sheet, with no change in F/F & Chrome:

...margin-right:12px; !important }

Upvotes: 0

Views: 245

Answers (7)

codeling
codeling

Reputation: 11438

# is the correct prefix for IDs (as you actually use in your second code example), but you shouldn't wrap quotes around the css code. Try it like this:

<style type="text/css">
    #sButton2 { cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px; }
</style>

Executing a validator on the code (which is always a good idea) would have told you all this as well!

Upvotes: 0

EML
EML

Reputation: 10280

Fixed, with a lot of help from Firebug (what a great bit of software). The input tag is in a jQueryUI dialog, and was inheriting a 'width:95%' from '#dialog input'. The 'width:30px' in my style sheet was being ignored, until I changed it to 'width:30px !important', in all of F/F, Chromium, and Opera. It was ignored in both the div (#sButton2) and class (.sButton) styles.

I don't understand this. What's the point of inheritance if you can't over-ride it without adding arbitrary !important's? Is css inheritance broken? Isn't !important just admitting that it's broken?

I had originally thought that the entire style sheet was being ignored, because the input button expanded to 95%, and made it look like everything else was being ignored as well. However, I eventually realised that part of the style was actually working - 'cursor:pointer' did show a cursor.

Thanks everybody.

Upvotes: 0

Charlie
Charlie

Reputation: 11787

<style type="text/css">
    .sButton {
    cursor:pointer; 
    width:30px; 
    height:13px; 
    float:left; 
    margin-bottom:2px; 
    margin-right:12px
</style>

<input type="button" id="sButton1" class="sButton">

http://jsfiddle.net/charlescarver/aQHyK/

Upvotes: 1

checkenginelight
checkenginelight

Reputation: 1156

your inner style ends with > instead of }

furthermore it should be in your head tag

lastly why are you wrapping your style with single quotes?

Upvotes: 2

Logan Serman
Logan Serman

Reputation: 29880

<style type="text/css">
#sButton2 { 'cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px' >
</style>

should be 

<style type="text/css">
#sButton2 { cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px }
</style>

You need to end the first { with a }, not a >. And the styles are not in quotes, they are simply enclosed in curly braces. You should also look into what is standard for your HTML code. Usually elements are laid out like this:

<input type="button" id="sButton2" />

It is a good idea to follow standards like this.

Upvotes: 4

ptriek
ptriek

Reputation: 9286

Change

#sButton { 'cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px' >

to 

#sButton { cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px }

That should do it.

(remove the ' at the start and the end, and replace the > by a } )

Upvotes: 2

Erik Funkenbusch
Erik Funkenbusch

Reputation: 93464

Stupid question, but are you sure the style sheet is being loaded? I've seen where people have multiple stylesheets and they're loading the wrong one, or they edited the wrong one.

You might also have an overriding style later in your stylesheet. Do you have any input styles? ID should override less specific styles, but there are bugs in some browsers that you might have to work around.

Try using !important

DOH! Yes, as others have said, your problem is the single quotes around your css attributes.

Upvotes: 1

Related Questions