SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: CSS Issue

  1. #1
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS Issue

    Hiya,
    I'll post the image first then explain after:



    And here is the CSS:

    Code CSS:
    #navigation
    {
    float: left;
    width: 140px;
    margin-left: 5px;
    height: 100%;
    }
     
    #navigation
    {
    color: #00ccff;
    }
     
    #navigation div
    {
    margin: 0px;
    padding: 0px;
    }
     
    #navigation a:link, a:visited, a:active
    {
    color: #00ccff;
    text-decoration: none;
    font-weight: bold;
    }
     
    #navigation a:hover
    {
    text-decoration: underline;
    }
     
    #navigation .menudivider
    {
    margin-left: -5px;
    padding-top: 3px;
    padding-bottom: 3px;
    }
     
    #navigation ul .menudivider
    {
    display: none;
    margin: 0px;
    margin-left: -5px;
    padding: 0px;
    }
     
    #navigation ul
    {
    list-style: none;
    }
     
    #navigation ul li
    {
    color: #00ccff;
    padding-top: 3px;
    }
     
    #navigation #status img
    {
    margin-left: 5px;
    }
     
    .heading
    {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    For some reason the entire content of the #navigation division moves left 5px when viewed in IE6 but in IE7, IE8 beta 1 and FF it's fine?

    Any ideas?

    Thanks

    Regards,
    Neil

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you apply a margin to a floated element and that margin is on the same side as the float then IE6 will double it. This could be the issue with #navigation.

    I would get rid of the margin-left and apply a padding-left instead.

    Hope this helps.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    fantastic, That solved it. Any chance of an explanation of why IE6 does this? and do any other browsers do this?

    Thanks Again

    Regards,
    Neil

  4. #4
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem.

    As far as I know it all only occurs in IE6... It's just one of those IE bugs - no real reason for it being there.

    More info: http://www.positioniseverything.net/...oatIndent.html
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just one other suggestion here Neil; don't worry about IE 8 just yet when developing your own sites. It's a beta, and currently in development. Save the "check against IE 8" for when it enters Release Candidate status (the same goes for any other browser).

  6. #6
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I'll take that into account


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
  •