Background gets clipped on IE7

HTML & CSS
1

Hi,

Consider both the attached images please, one is from Firefox and the other is on IE - same with IE6 & IE7.


<div id="header">
	<div>
		<p class="title">Sample Page</p>
		<p class="subtitle">Sample sub-heading</p>
	</div>
</div>



#header
{
	margin: 0em auto;
	border: 1px solid #eec7b2;
	width: 45em;
	background: url("images/boxbg.png") repeat;
}

#header div
{
	padding: 3.5em 1em;
	background: url("images/headerbg.png") no-repeat right center;
}

Please note that this is a em based. Anyway, when I put position: relative on #header div { } then it’s fixed in IE7, but when I resize text (whole purpose of em based layout, yes?) - the background gets clipped again. However this time, when I highlight the “Sample Page” text on the left with cursor, it becomes visible again.

Anyway to make the background display properly?

And there is not much problem with IE6, for some reason the transparent png fix script solves the background clipping (even when text is resized).

Thanks in advance. :slight_smile:

2

Thanks a lot!

I feel really silly about this oversight, I completely forgot about the div inside #header not having layout. (learned about the whole concept of hasLayout just few weeks ago).

I’m using view > Text Size and I really feel that Microsoft should have implemented the zoom feature in another shortcut (i.e. not CTRL + Scroll) - I’m almost sure I’m not the only one who feel that way :P.

3

Wouldn’t surprise me if the transparency javascript-bloat is adding Layout to the whatevers holding the images.

As a test, does adding “zoom: 1;” to header div fix it? (#header has Layout, it has a width)

If it does, then find a legal way to trigger Haslayout.

When you say resize text, is this really text-enlarge, or is it IE7’s buggy zoom feature?

4

when I gave the div “hasLayout” through height: 100%;

Huh, interesting. I’ve never thought to do that: you cannot actually set height on a child whose parent doesn’t have an explicit height, so in practice there is no height set on #header div… but stating it anyway gives it Layout?

That’s kinda cool to know. : )

5

yes, it worked as intended when I gave the div “hasLayout” through height: 100%; :slight_smile:

6

I thought CTRL++ zoomed as it does in FF?

Though I have my browsers set to text-enlarge-only, except of course Opera who simply doesn’t know any better : (

Haslayout: Did it work?