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 3 of 3
  1. #1
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts

    CSS Alignment issues for IE6

    I'm having some alignment issues in IE6. For some odd reason, I'm having weird <1px gaps and overdone margins.

    www.espinc1.com/esptest/index.asp
    www.espinc1.com/esptest/services.asp
    www.espinc1.com/esptest/simulation.asp

    On the first page, you'll notice that there are really small gaps that are smaller than 1px on each side of my images for ESP & Related News, Licensed Awards, and Applicable Links. I had to add in some CSS hacks to up the margin and width of the sidecolumn for IE6 (using the > selector) to get the images more "normal" looking than it was, but it's still not flush on either side. The ESP image is also overlapping because the margin-right: 5px on the maincolumn is farther than it should. If I hack to 3px, it still overlaps on the left, but if i go down to 2px, it's now too far to the right. How???

    If you look at the other two pages, you'll see the same problem with my breadcrumb bar and other images all being pushed to the left due to IE6 screwing up the margin-right on maincolumn.

    What is the exact cause of this problem? Is there a way to fix this? Is it bad CSS on my part? I've never seen something like this before until now. FF2 and IE7 display perfectly.

    -Shane

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by TheShaner View Post
    What is the exact cause of this problem? Is there a way to fix this? Is it bad CSS on my part? I've never seen something like this before until now. FF2 and IE7 display perfectly.
    Are you aware of the IE6 doubled float margin bug?

    Example:
    Code:
    #sidecolumn {
          float: left;
          padding: 0;
          margin: 0 0 0 3px;
          display: inline; /* IE6 magical fix for doubled float margin */
          width: 195px;
          background-color: #eee;
          color: #000;
          font-family: verdana, arial;
          font-size: 0.8em;
          text-align: left;
    }
    IE6 will double the left-margin for a left float. Same doubling occurs for right-margin on right floats. This bug has been fixed in IE7.

    You can, but don't need to feed IE6 separately with the shown fix above. You can just put it in your normal style sheet as show. The fix is neutral in the sense that the CSS specification requires the display value to compute to display: block for floated elements even when display: inline is specified.

  • #3
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts
    Wow o wow! Thanks a bunch Koyama. Actually, I hadn't heard of it. I'm still teaching myself new things in CSS and that is one problem I never came across before. It's hard to keep up with all the CSS issues, esp. with IE6-.

    Thanks again! It's all fixed and looking perfect now!

    -Shane


  •  

    Posting Permissions

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