SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict Phidev's Avatar
    Join Date
    Oct 2008
    Location
    Texas
    Posts
    204
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6/IE7 padding / display error

    Hi there.

    I am working on this website that looks great on all browsers but IE6.

    I have a div with float:right which contains a picture with a transparency and right after there is another div with a background image and a big right padding, the intention of this is to make the picture look on top of the the background image but a little bit off.

    The HTML validates. The CSS file validates. (If that matters)

    It looks great on FF, Chrome, and Safari, however in IE the second div gets pushed down. So it shows me the image to the right, and then, under it, it shows the other div with the background image.

    I have no clue about what to look for, or how to solve it. So thats why I am posting this.

    you can take a look at the site at

    http://ranchersgrill.com/newversion/steaks.html

    CSS file is at

    http://ranchersgrill.com/style/ranchers.css

    Any help about how to solve this will be highly appreciate it.

    Thanks

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    It looks like you have triggered the "Double Float Margin Bug" in IE6.
    The fix for this is display:inline;
    Good browsers will ignore this since a float is a block level element by default and the float property has more weight than the display:inline; fix.

    Code:
    #pics { 
        float:right; 
        margin-top:115px; 
        margin-right:30px;
        display:inline; /*IE6 dbl margin bug fix*/
     }

  3. #3
    SitePoint Addict Belfast75's Avatar
    Join Date
    Oct 2005
    Location
    London, England
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something else to think about, if you're only having trouble with IE6 is you can assign styles to IE6 only using * html

    So if the padding on a <div> is causing it to wrap in IE6 but not more modern browsers you can set your general style as usual:

    Code CSS:
    .myElement {padding:5px;}

    but adjust it for IE6 using:

    Code CSS:
    * html .myElement {padding:4px;}

    Hope this helps, like the design of the site as well, good job.
    D

    eg

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Actually after looking at this closer the fix I gave above does not prevent the column drop in IE6. It did get the right margin back to 30px but it did not address the main problem.

    Since the #pic div on the right is just for the collage image you would be just as well off by positioning it absolutely. Then it will be removed from the flow and will not cause any problems.

    Your #paper div has a right padding of 446px on it and that is causing it to fall below the floated pic div in IE6. I see that the padding is for the BG image and to make room for the pic div.

    Try this instead - (It works, I tested it on my local machine)
    Code:
    #canvas { 
        height:1085px; 
        width:1024px;
        background:url(canvas.jpg) center top no-repeat; 
        margin:0 auto; 
        position:relative;/*establish stacking context for AP #pic div*/
    }
    #pics { 
        position:absolute;
        width:447px;
        height:778px; 
        top:200px; 
        right:30px; 
    }

  5. #5
    SitePoint Addict Phidev's Avatar
    Join Date
    Oct 2008
    Location
    Texas
    Posts
    204
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Belfast75 no, the padding didnt do it.

    @Rayzur. Yes, changing the canvas and pics positioning did the trick, and now that I think about it I had a misconception about relative positioning.

    Thanks a lot to you both for your help.


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
  •