SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 won't allow inline image between two floating divs

    Hi guys!

    Normally I try not to pester you experts about problems like this but I've been at this for hours and hours and I'm getting nowhere.

    Could I ask you to have a look at my page, which is here:

    http://www.rollogleeson.com/

    Looks fine in IE7 and Firefox (and I guess therefore Safari). But in IE5/6, the inline image (currently a map) won't "fit" between the floating divs (the left and right bars). It gets pushed right down the page, leaving a gaping white void in the centre column.

    The culprit seems to be one of IE6's positioning/float/dimension bugs, but which one? I've tried lots of solutions and hacks (adding dimensions relative positioning to the floats, adding the "display:inline" property to the image; wrapping in divs etc). Nothing works.

    Any pointers would be really appreciated. Thanks.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hi, and welcome to Sitepoint

    Normally I try not to pester you experts about problems like this but I've been at this for hours and hours and I'm getting nowhere.
    Anyone who responds to threads here is willing to offer help - So of course you're question is bothering anyone.

    The culprit seems to be one of IE6's positioning/float/dimension bugs, but which one? I've tried lots of solutions and hacks (adding dimensions relative positioning to the floats, adding the "display:inline" property to the image; wrapping in divs etc). Nothing works.
    I'm not 100% sure but I believe the bug you are wanting to look into is the 3px jog.
    It only happens in IE6 < - it's caused by floats next to non-floated elements, there's always a gap of about 3px.
    So you could reduce the size of the middle column by 6 columns as a cheap fix(I think it would work) or you can try and work through the FAQ on floats which explains the fix:
    http://www.sitepoint.com/forums/show...5&postcount=15

    I'd give you the code - but i'm not too familiar with that particular bug.

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mark, don't you mean "isn't bothering anyone" ?

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Indeed

  5. #5
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    It's the 3 pixel jog of IE 5 5.5 6
    Use overflow auto for modern browsers
    For IE < 7 float the center box and give a Tag in that float haslayout

    PS But you better start with validating your HTML and CSS it has lots of errors and IE < 7 needs debugging

    your topbox without the 3 pixel jog
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- saved from url=(0022)http://www.domain.com/ -->
    <style type="text/css">
    #topbox
    {
    width:780px;/* top box needs no width , check for haslayout */
    }
    
    #headleft,#headright,#headcentre{height:50px;}
    
    #headleft{
    float:left;
    width:200px;
    background: #ececec url(files/barleftheadback3.gif) repeat;
    }
    
    #headright{
    float:right;
    width: 100px;
    background: #ececec url(files/barrightheadback4.gif) repeat;
    }
    
    #headcentre{
    overflow:auto;
    background:#eaeaea url(files/clouds.jpg) no-repeat;
    }
    * html #headcentre{float:left;}
    * html #headcentre p{height:1&#37;;}
    </style>
    <script type="text/javascript">
    
    </script>
    </head>
    <body>
    
    <div id="topbox">
    <div id="headleft"></div>
    <div id="headright"></div>
    <div id="headcentre"><p>&nbsp;</p></div>
    </div>
    
    </body>
    </html>

  6. #6
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Getting there

    Hey! Thanks both of you for the help.

    I'm fast losing the motivation to bother with IE<7 but I suppose you have to (and you're right, mea culpa, I still have to validate my CSS: I will).

    So I've floated the centre column with the overflow property you suggest, all4nerds. plus the p{height:1%} ruse.

    It creates a new problem, as now Firefox doesn't like the negative left-right margins I use for the main headings (really useful). I get a scroll bar at bottom. IE, meanwhile, seems to handle margins and padding totally differently and so drops the right float div completely.

    Such fun I'm having! I'm just about past caring whether my site works in IE6. But do you have any ideas about ways to hide the horizontal scroll bar (or work around negative margins)? (Padding the paragraphs and images, the alternative, seems to cause lots of jumping around at load time.)

    Thanks once again, I appreciate it.

    Rollo

    www.rollogleeson.com


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
  •