IE7 again - div, text and background-image

HTML & CSS
1

I’m stumped again. I have this CSS:

#FullScreenMessageDiv
{
	float: right;
	margin-right: 50px;
	text-align: center;
	padding-top: 0px;
	border: 1px solid red;
}

#FullScreenMessageDiv .FullScreenMessageDivText
{
	background-image: url(/images/MessageFlag.png);
	color: #FFFFFF;
	font-size: 10px; /* Not em, to make sure the size corresponds with the box */
	padding-left: 10px;
	padding-bottom: 2px;
	border: 1px solid green;
}

The borders are just for debugging. Then, I have this HTML:

      <div id="FullScreenMessageDiv">
        <span class="FullScreenMessageDivText">25 New Messages</span>
      </div>

In IE8 and Firefox, the red and green borders sit exactly on top of each other. In other words, the top of the text is at the top of the div.

In IE7, the div is a few pixels taller and there is a gap between the top of the div and the top of the text (the red border is a few pixels above the green border).

I’ve fiddled with padding-top and margin-top, but to no avail.

Clues would be welocme. Thanks, Nick.

2

Your problems are twofold. First, spans are inline-level elements, which means they default to display:inline; by the specification display:inline elements cannot have top/bottom padding. as such, standards compliant browsers should be ignoring that 2px padding-bottom. IE will obey it anyways since it treats all it’s inline elements as if they were inline-block. (though it really has no inline-block). As such to get all browsers behaving the same way on that element, I’d set that inner span to display:inline-block;

Your second problem is the height of a inline-level element is usually the line-height, which has a different default cross-browser; This is why I ALWAYS declare my line-height, which together with the fonts-size usually ends up as many characters as saying the full condensed property over… which is why I end up saying the full thing every time I want to change font-size.

font:normal 100%/140% arial,helvetica,sans-serif;

Even then, rounding errors across browsers means you cannot rely on them ever being pixel perfect (thanks mozilla!) unless you are declaring everything in pixels (usually an accessibility /FAIL/ just like using images for text - best restricted to a handful of static elements and not anything content related)

The line-height of the parent could also be causing issues, you aren’t setting the font-size until the child, which could result in odd behavior from that parent div. As such I’d set the font-size

In addition, if that’s going to be the ONLY span inside your div, take some advice from George Carlin – Just as “Not every ejaculation deserves a name”, not every tag needs a class on it.

IF I understand what you are trying to do (not certain I am) I would probably approach it like this:


<div id="fullScreenMessage">
	<span>25 New Messages</span>
</div>



#fullScreenMessage {
	float:right;
	display:inline; /* prevent IE margin doubling */
	margin-right:50px;
	padding-top:0;
	text-align:center;
	font:normal 10px/14px arial,helvetica,sans-serif;
	color: #FFFFFF;
	border:1px solid red;
}

#fullScreenMessage span {
	display:inline-block;
	padding:0 0 10px 2px;
	background:url(/images/MessageFlag.png);
	border:1px solid green;
}

That should behave consistently across all browsers; well, excepting perhaps word-wrapping behavior.

3

Absolutely spot on - thank you!