SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image being clipped in IE7 and IE10 Compatibility Mode only

    Hello,

    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.

    This is the link to the site: http://lpi.oregonstate.edu/healthyyo...letters.shtml#

    The image is at the very top left of the page.

    If you go to Internet Explorer and access the developer tools (F12), you can switch between IE7/8/9/10/10+Compatibility and take a look.

    Basically, the image is styled with:

    Code:
    #osu-bar .osulogo {
    	float: left;
    	margin-left: 60px;
    	z-index: 999\9;
    	}
    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.
    Code:
    #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.

    Any ideas as to what is going on?

  2. #2
    Non-Member
    Join Date
    Jul 2013
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Hi Gnuey,
    In general, a z-index without an explicit position doesn't work, as the css specification 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 rather complicated).

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    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.

    Code:
    <!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">&nbsp;</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">&nbsp;</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">&nbsp;</div>
    </body>
    </html>
    So to re-cap:

    IN IE7

    1) 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).

    2) Elements that stick out of their containers need position:relative added (and a higher z-index than those around it).


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •