www.webdeveloper.com
Results 1 to 9 of 9

Thread: Horizontal nav ul displaying vertically in IE8 and below

  1. #1
    Join Date
    Feb 2009
    Location
    London, UK
    Posts
    37

    Horizontal nav ul displaying vertically in IE8 and below

    I'm sure this issue has been addressed before, but I couldn't find an answer to help me, and I'm in a bit of a time crunch on this one. I thought the the problem is that IE8 and below don't recognise html5, but even when I took out the html5 tag <nav> and used an id in the <ul>, it still didn't work. Works fine in the other browsers.
    The site is currently on a subdomain here:
    www.drafts.dreamhosters.com/sams/index.html

    The HTML:
    Code:
    <nav>
      <div class="menu-left"><img src="images/menu-left.gif" alt="" /></div>
        <ul>
    
    <li class="first"><a href="index.html" class="current">Home</a></li> <li><img src="images/menu-separ.gif" alt="" /></li> <li><a href="boilers-heating-systems.html">Boilers &amp; Heating</a></li> <li><img src="images/menu-separ.gif" alt="" /></li> <li><a href="powerflushing.html">Power Flushing</a></li> <li><img src="images/menu-separ.gif" alt="" /></li> <li><a href="london-qualified-plumber.html">Service Areas</a></li> <li><img src="images/menu-separ.gif" alt="" /></li> <li><a href="plumbing-heating-tips.html">Tips &amp; Hints</a></li> <li><img src="images/menu-separ.gif" alt="" /></li> <li class="last"><a href="contact-london-plumber.html">Contact</a></li>
    </ul> <div class="menu-right"><img src="images/menu-right.gif" alt="" /></div> </nav> <div class="clear"></div>
    This is the CSS:
    Code:
    nav {
    	margin:0;
    }
    nav ul {
    	width:710px;
    	display:block;
    	list-style:none;
    	margin:0 0 0 1.3em;
    }
    
    nav ul li {
    	float:left;
    	height:43px;
    	display:block;
    	background:url(../images/menu-bg.gif);
    }
    nav ul li.first {
    	-webkit-border-top-left-radius: 10px;
    	-moz-border-radius-topleft: 10px;
    	border-top-left-radius: 10px;
    }
    nav ul li.last {
    	-webkit-border-top-right-radius: 10px;
    	-moz-border-radius-topright: 10px;
    	border-top-right-radius: 10px;
    	margin-right:0;
    }
    .menu-left {
    	float:left;
    }
    .menu-right {
    	float:right;
    	margin-right:0;
    }
    nav ul li a {
    	display:block;
    	font-family:Arial, Helvetica, sans-serif;
    	color:#339;
    	padding:.5em .95em;
    }
    nav ul li a:link,
    nav ul li a:visited {
    	text-decoration:none;
    }
    nav ul li:hover,
    nav ul li:active {
    	display:block;
    	background:url(../images/menu-act.gif);
    }
    nav ul li a:hover, .current {
    	color:#fff;
    }
    I really can't figure out the problem. I've used float:left, and even added display: inline-block for good measure, with no luck. I suspect it's the issue of IE calculating the margins and padding differently? But wouldn't that just push the overflow down to the next line, while still remaining horizontal?

    I know it's a bit strange, adding an img in between the li's instead of doing a right border. I'm just amending and improving the site while keeping the same basic design of the original. The original is a total trainwreck, visually and code-wise, but at least on that one the nav display properly in IE8! lol

    I would sincerely appreciate any help or pointers.

    Thanks everyone!
    Life is short. Be Max.


    http://www.webitseo.com

  2. #2
    Join Date
    Feb 2009
    Location
    London, UK
    Posts
    37
    If someone could point me in the direction of a previous post addressing this issue, that would be helpful. I have searched, but didn't find it. I'll try again.
    Life is short. Be Max.


    http://www.webitseo.com

  3. #3
    Join Date
    Aug 2012
    Posts
    1
    looks ok in IE8 what's missing?

  4. #4
    Join Date
    Feb 2009
    Location
    London, UK
    Posts
    37
    Quote Originally Posted by bchurch View Post
    looks ok in IE8 what's missing?
    Hmm, that's very strange, because the owner of the site has IE8 and he said the nav is displaying vertically, so I checked it here
    http://netrenderer.com/index.php
    and here
    http://www.my-debugbar.com/wiki/IETester/HomePage

    and it does indeed render vertically. Are you sure you're using IE8?
    Life is short. Be Max.


    http://www.webitseo.com

  5. #5
    Join Date
    Aug 2012
    Posts
    11
    This happens usually when there is a bug or an error in your html code.
    Sometimes an unclosed tag (inside of your navigation codes or even outside of it),
    or a redundant closing tag that is not matched with a opener.

    So I highly recomend you check your code for a HTML or CSS validation.

  6. #6
    Join Date
    Feb 2009
    Location
    London, UK
    Posts
    37
    Quote Originally Posted by saranuts View Post
    This happens usually when there is a bug or an error in your html code.
    Sometimes an unclosed tag (inside of your navigation codes or even outside of it),
    or a redundant closing tag that is not matched with a opener.

    So I highly recomend you check your code for a HTML or CSS validation.
    Yeah, I did that. No problems.
    Life is short. Be Max.


    http://www.webitseo.com

  7. #7
    Join Date
    Aug 2006
    Posts
    1,909
    At a minimum I would put in the JS shim to allow IE7-8 to deal with those html5 tags (google for html5shiv)

    Dave

  8. #8
    Join Date
    Feb 2009
    Location
    London, UK
    Posts
    37
    Quote Originally Posted by tracknut View Post
    At a minimum I would put in the JS shim to allow IE7-8 to deal with those html5 tags (google for html5shiv)

    Dave
    Ok, great. Thanks for the tip! I'll check it out.
    Life is short. Be Max.


    http://www.webitseo.com

  9. #9
    Join Date
    Feb 2009
    Location
    London, UK
    Posts
    37
    Quote Originally Posted by tracknut View Post
    At a minimum I would put in the JS shim to allow IE7-8 to deal with those html5 tags (google for html5shiv)

    Dave
    Ha ha! The html5 shim/v worked! Woo hoo! Thank you tracknut EVER so much. Geez that made my life easier! Thank you, thank you!
    Life is short. Be Max.


    http://www.webitseo.com

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles