Forum Moderators: not2easy
I am attempting to set the background color of a span element that is the only content of a div. I am explicitly setting all margins and padding to 0. My expectation is that the span background color would fill the entire height of the div, and this is what happens in IE7. But in FF2, I get a 1px area above and below the span in which the background color of the div shows through. As a result, I get a noticeable separation between the div and the content below that div, rather than having the div abut the content as I would like. I've tried all sorts of variations of setting text alignment, adding padding, margin, border, floating versus not floating, and so forth. All to no avail - no matter what changes I make, there is still a 1px difference in how these browsers render it. Is this simply one of those things one has to hack? And if so, is IE7 in fact the correct behavior in this case?
HTML:
<body>
<div id="menu">
<span>text</span>
</div>
<div id="main">
</div>
</body>
CSS:
body {
margin: 0;
padding: 0;
background-color: yellow;
}
#menu {
margin: 0;
padding 0;
float: left;
width: 100%;
background-color: gray;
}
#menu span {
margin: 0;
padding: 0;
vertical-align: text-bottom;
background-color: white;
}
#main {
clear: both;
height: 50px;
margin: 0;
padding 0;
background-color: white;
}
I guess my first question would be is why you do not set the background-color in the <div>? That being said, try adding
height: 100%;
display: block;
to the span.
Marshall
Anyhow, the answer to your question is also why I didn't initially think what you suggested next would work for me. Like I said, this was a pretty drastic reduction of what I am actually doing, just to demonstrate the problem as simply as possible. In real life, I don't have just the one span in the div. The "menu" div is meant to represent a horizontal tab-style menu bar, and the spans are the individual tabs. I want to control the background color and other properties of the tabs individually, so that's why I can't set this in the "menu" div. And since I want this to be a set of horizontal tabs, setting display: block defeats this.
On the other hand, I have been playing around some more, and have actually managed to work around this problem by setting display:block on the spans and then floating them to still let them lay out horizontally. This is essentially what Bowman recommends in his "Sliding Doors" article (using lists instead of spans). He mentions issues with the inline box model as being the reason he does not inline his list items - maybe that's what I have been running into? I wasn't actually using the whole sliding doors technique, so I wasn't necessarily planning on doing things the way he does, but I now have managed to get floated spans with display:block to behave for me.
But that doesn't mean I don't want to understand what is going in the example as I posted it. Is there a defined rendering for my example, and if so, what is it?
