Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jul 2007
    Location
    Portland, OR
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Column Problem with IE6

    I've been working on my site, www.portlandwinegroup.com and it looks fine in Firefox and Safari but not IE6.

    My right hand column with links is down at the bottom of the page.

    How do I adjust the style sheet to get all columns to show up?

    I'm in Linux most of the time so I forget about IE6 & 7. Do they both have problems with this?

    Thanks

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    From looking at your stylesheet it appears you are suffering from the IE double margin bug where the margin that is in the direction of the float doubles in IE6. The solution is to simply add display:inline to the CSS for that selector. IE7 when not in quirks mode does not have this problem.
    Code:
    #linkarea {
        float: left;
        width: 127px; /* 3px shy to allow for IE's float margin bug */
        margin: 0 10px;
        display:inline;
        }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Jul 2007
    Location
    Portland, OR
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the tip. I also realized that two images that I added to that column area were wider than the 127px width of the column. I resized the images and that fixed the problem.

    Would the display:inline keep it together even if the images were too wide? Firefox allows it to overflow, but not IE6.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    This is because IE6 has an expanding box model problem. If the content within it can't be wrapped to another line like an image then the containing element will expand to accommodate the added width.

    And no display:inline wouldn't keep it where it should be if you used float:left. I said to add display:inline because of the double margin bug which you did have by the way.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Jul 2007
    Location
    Portland, OR
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't know what the double margin bug is, but I added the display:inline;
    as you mentioned.

    Thanks.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by vinoman View Post
    I don't know what the double margin bug is, but I added the display:inline;
    as you mentioned.

    Thanks.
    I've already told you what it was
    Quote Originally Posted by Me
    From looking at your stylesheet it appears you are suffering from the IE double margin bug where the margin that is in the direction of the float doubles in IE6.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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