SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2006
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    (yet another) IE layout problem

    Hi,

    Once again i turn to the creative minds of this forum to get me out of yet another mess caused by the ever so crap IE browser.

    In this example i have 3 divs each 150px high. I'd like a 200x200px image to float over an area that overlaps the 2 top divs. as you can see in the example FF understands the little im asking for and gives me just what i want. But IE decides to add an extra 50 pixels to the first div.
    I can't split the image to 2 and position the parts separately. Can anyone think of a solution?

    Thanks.

    Code:

    Code:
    <div>
    	<div style="height:140px;background:#FFF000;">
    	Div 1
    		<div style="position:relative; top:20px; left:40px; z-index:2;">
    		<img src="face.jpg">
    		</div>
    	</div>
    
    	<div style="height:140px;background:#F00000;">
    	Div 2
    	</div>
    
    	<div style="height:140px;background:#F0AA00;">
    	Div 3
    	</div>
    
    </div>
    IE:

    FF.gif

    FF:

    IE.gif

    until images are approved here imageshack copies:

    IE

    http://img108.imageshack.us/my.php?image=iehh7.gif

    FF

    http://img108.imageshack.us/my.php?image=ffzl6.gif

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try using absolute positioning.

    I suggest you read about Internet Explorer and the Expanding Box Problem.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

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

    As Kravvitz already said you could use absolute positioning to get that effect. Just set position:relative on the parent div and change the inner to absolute.

    e.g.

    Code:
        <div style="height:140px;background:#FFF000;position:relative"> Div 1
            <div style="position:absolute;etc.........
    Of course you will have to make allowances if you have other content in there as the absolute element is removed from the flow.


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
  •