First time posting in the forums, let me know if I can make my post better.
I can’t for the life of me figure out why IE7 and IE10+Compatibility Mode cuts off a banner image on a site I’m working on.
I’m fairly certain the image is fine in every other browser in existence.
Here’s the thing: after hours of trial and error I finally found out that if I took off the height property of the #header below it, the image shows up. I have no idea why though. I was going to post this question for help figuring out how to fix this, but now I want to understand why that is. I figure I’ve been skimming by my whole web design career on trial and error and it’s time I should start really understanding cause and effects. So does anyone know what bugs of IE are causing this image clipping? The fix also solved a crucial bug where a popup for newsletter signup(clicking “here”) was getting cut off as well.
#header {
height: 120px; /* if removed it works */
background: #c34500;
text-align: left;
padding:5px;
padding-left: 0px;
border-left: 220px solid #ffffff;
position: static;
z-index: -999;
}
As you can see above I’ve tried targeting IE specifically with other fixes like z-index values but to no avail – I have no idea why either.
I would guess that the image was larger than the header. When you removed the height the div opened up. You have float left on the image. The div should collapse and not contain its float. That is if its the only thing in he header. The fact that it works points towards its not the only thing.
Hi Gnuey,
In general, a z-index without an explicit position doesn’t work, as the [U]css specification[/U] says: applies only for positioned elements.
If you add #osu-bar .osulogo {position: relative;} you can use the #header {height: 120px;} as well.
This is working in IE7 (not hurting Firefox, Chrome, Opera & Safari); IE10 I can not test (as WinXP-user ).
I guess the difference between the browsers (/-versions) is because of a different opinion about the stacking order (which is [U]rather complicated[/U]).
As mentioned above z-index "only" works on elements that have a position defined (e.g position:relative absolute or fixed but not position:static (the default). So most of your z-indexes are of no use and are not needed in most cases anyway (especially the negative z-indexes as you will rarely need to use negative z-index).
When elements overlap and their stacking context is not explicitly defined (z-index + position:relative/absolute/fixed) then generally the page will be laid out with elements later in the html having priority (overlapping) elements earlier in the html but the exact behaviour is not explicitly defined in the specs so historically there have been variances. It also becomes more complicated when you ads a float into the mix as it sticks out of its container and newer browsers allow the float to stay on top but IE7 assumes the following div has priority and lays the following div on top of the float except when the following element doesn’t have haslayout or if the float is explicitly controlled with position:relative.
The problem in IE7 (and compatibility mode) is mainly one of “haslayout”. Haslayout is the “holy grail” of IE7 and under and was the cause of much consternation back in the early days of CSS. Without “haslasyout” an element is not responsible for its boundaries and will forget where its edges are and where its children are. This is why there are many listed bugs for IE7 and under but they are in fact all the same cause in that the element did not have haslayout.
In your example removing the height from #header removes “haslayout” and instigates a different layout behaviour as mentioned above. IE7 really needs elements that hold more than simple content to be in haslayout mode and this can be triggered with a dimension (amongst other things) or more safely using zoom:1.0 for no side effects (zoom is proprietary IE code so won’t validate).
The moral to the story is that for IE7 and under when elements stick out of their container (like floats or elements with negative margins) then you need to control their z-index and add position:relative (if not positioned).
Here are a few examples of all those behaviours to check in IE7.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.header {
height:50px;
background:red
}
.mid {
height:50px;
background:blue;
}
.mid2 {
line-height:50px;
height:auto
}
.pr {
position:relative;
z-index:2
}
.float {
float:left;
width:100px;
height:70px;
margin:10px;
background:yellow;
border:1px solid #000;
}
</style>
</head>
<body>
<p>Demo 1 - yellow float is cut off as the blue div has haslayout</p>
<div class="header">
<div class="float">Float</div>
</div>
<div class="mid"></div>
<p>Demo 2 - yellow float overlaps blue div because haslayout has been removed</p>
<div class="header">
<div class="float">Float</div>
</div>
<div class="mid mid2"> </div>
<p>Demo 3 - control stacking context with position:relative and yellow float will go on top with (or without haslayout)</p>
<div class="header">
<div class="float pr">Float</div>
</div>
<div class="mid"> </div>
<p>Demo 3 - control stacking context with position:relative and yellow float will go on top without haslayout (or with it)</p>
<div class="header">
<div class="float pr">Float</div>
</div>
<div class="mid mid2"> </div>
</body>
</html>
So to re-cap:
IN IE7
99% of bugs in ie7 and under are because the element does not have haslayout (however don’t add it to all elements as that is overkill and can have adverse side effects. Just add it to main containers that hold more than simple content).
Elements that stick out of their containers need position:relative added (and a higher z-index than those around it).
).