Hello,
I have a <span id="some"></span> and the css is
#some{
background-color:#000; width:150px; height:50px;
}
The width and height does not show unless something is entered. All assistance appreciated.
Thanks Jean
views:
35answers:
5
A:
Try to add important property
#some{
background-color:#000; width:150px!important; height:50px!important;
}
antyrat
2010-07-19 10:29:21
That won't have any effect on inline elements.
Felix Kling
2010-07-19 10:33:02
+5
A:
span is an inline element, so without telling browser that its display property as block what you do won't work out.
So in brief:
#some{
background-color:#000;
width:150px;
height:50px;
display: block;
}
Hope it helps, Sinan
Sinan Y.
2010-07-19 10:30:56
Could you explain why it appears with a block and why a div takes the style without a block?
Jean
2010-07-19 10:34:52
+5
A:
You can't give a height/width to an inline element, it's sized by it's content, but you can give it display: inline-block; like this:
#some{
background-color:#000; width:150px; height:50px; display: inline-block;
}
See an example here, note that IE7 in particular won't handle this in some situations, so display: block; would work there (but honestly, why not just use a <div> then?)...but keep in mind inline-block is in the flow, whereas block kicks everything down a line.
Nick Craver
2010-07-19 10:31:39
@Sinan - Because something isn't supported by ancient browsers doesn't make it a bad habit, it just means you need to be aware of your audience.
Nick Craver
2010-07-19 10:34:25
@Sinan it's not supported only by Firefox 2.x so it's a good habbit! Even IE6 supports it :)
bisko
2010-07-19 10:36:55
@Nick i use it also from time to time but it has more cons than pros. That was just a warning w/o explanation, sorry my bad. But it also behaves differently on even IE7. If you also call it ancient i'm with you :) see: http://drp.ly/1oaf22
Sinan Y.
2010-07-19 10:41:22
@Sinan - `<span>` is naturally `inline` :) Also here's the original page if all you've seen is a screen shot: http://www.quirksmode.org/css/display.html quirks mode is a great tool for things like this.
Nick Craver
2010-07-19 10:51:11
i took the screenshot myself, to only show the related part of the article:)
Sinan Y.
2010-07-19 11:17:06
A:
As everyone else mentioned span is inline element, you either need to make it block element (using display:block) or to use block element (div) in its place. In order to better understand inline and block elements, as well the whole html/css rendering model, I suggest you read http://www.w3.org/TR/CSS2/visuren.html.
Ivan
2010-07-19 10:35:00