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
    Regular Coder
    Join Date
    Jun 2008
    Posts
    113
    Thanks
    27
    Thanked 0 Times in 0 Posts

    IE 6 margin/float problem

    I've read about bugs in IE 6 a little, but am a bit overwhelmed by all of them and still confused about how to handle them. I'm working on a site that generally looks good but has a couple problems in IE 6.

    Here's the site:
    http://nsightworks.com/nicknack/index.html

    And the CSS file:
    http://nsightworks.com/nicknack/support/styles.css

    The three boxes below the main animation should be centered on the page, but in IE 6 they are shifted to the right. The phone number and e-mail address in the footer are also pushed to the right--they should be directly next to their respective icons. All these items are floated, so I imagine that has something to do with the problem. Does anyone know what's going on there/how to fix it? Is there a simple adjustment that can be made to fix it in IE 6 without messing it up in other browsers, or should I just create a separate stylesheet for IE 6 and use a conditional statement in the HTML? Thanks.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    What you've got there is a bad case of doubled-float margin - IE6 doubles the margin on the side an element is floated. If you apply display:inline to the divs in question that should sort it out - and it shouldn't affect anything else either, so you should just be able to add it to your normal css.

  • Users who have thanked SB65 for this post:

    mightypants (09-29-2010)

  • #3
    Regular Coder
    Join Date
    Jun 2008
    Posts
    113
    Thanks
    27
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    What you've got there is a bad case of doubled-float margin - IE6 doubles the margin on the side an element is floated. If you apply display:inline to the divs in question that should sort it out - and it shouldn't affect anything else either, so you should just be able to add it to your normal css.
    Sweet. That did 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
    •