SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jan 2013
    Location
    UK, Wirral
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Navigation bar collapsing in IE 7

    I designed a simple horizontal bar in CSS for my site and its fine in all browsers, except IE6 and IE7. I read somewhere that IE doesn't like "block" and "float" properties, but this is the only way you can force your navigation in vertical line. Could anyone help please. This is my CSS code for my navigation.

    #navigation {
    height: 50px;
    width: 800px;
    float: left;
    border: 1px solid #006;
    background-image: url(Images/navigation_transparent.png);
    margin-top: 20px;
    }
    #navigation ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    }
    #navigation ul li a {
    text-align: center;
    display: block;
    padding: 10px;
    float: left;
    height: 20px;
    width: 120px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: normal;
    overflow: hidden;
    zoom: 1; /* for IE 6 */
    }

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi Jenny, welcome to Sitepoint

    Please post the HTML code as well.
    You may need to float the ul and li elements left as well.

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Float the li too

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Yes you must float the list element in IE otherwise it takes up space and you get each item dropping down a line (or set the list item to display:inline if you are not using it at all - but float is generally safer).

  5. #5
    SitePoint Member
    Join Date
    Jan 2013
    Location
    UK, Wirral
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    It's working now!!!!!!!!!

    Quote Originally Posted by markbrown4 View Post
    Hi Jenny, welcome to Sitepoint

    Please post the HTML code as well.
    You may need to float the ul and li elements left as well.
    Thanks Mark!
    Its working now even in IE6!!!!!!!!

  6. #6
    SitePoint Member
    Join Date
    Jan 2013
    Location
    UK, Wirral
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Float the li too
    Thanks Eric!
    It's working now even in IE6!!!!!!!!!!

  7. #7
    SitePoint Member
    Join Date
    Jan 2013
    Location
    UK, Wirral
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Yes you must float the list element in IE otherwise it takes up space and you get each item dropping down a line (or set the list item to display:inline if you are not using it at all - but float is generally safer).
    Thanks Paul!
    It's exactly what happens with my navigation bar. Now after I added just one line of code for li it works perfectly even in IE6!!!!!!!!!!!!


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
  •