chrici Posted August 13, 2010 Share Posted August 13, 2010 I want to make a horizontal navigation menu directly under the banner on my website.. But for some reason - that I can't explain - the menu doesn't use the entire width in all browsers.You can see what I mean on the pictures below:IE and Firefox seems to be working fine while Chrome, Safari and Opera don't.The CSS code is: body { width:100em;}body,p,h1,h2,h3,h4,table,td,th,ul,ol,textarea,input,a { font-family:verdana,helvetica,arial,sans-serif; font-size:10px; color:#000000; margin:0 auto; padding:0; background:#FFFFFF;}article, aside, figure, footer, header, hgroup,menu, nav, section { display: block;}img.banner { position:relative; width:100em;}nav ul { list-style-type:none; margin:0; padding:0; overflow:hidden;}nav li { float:left; width:14.28em;}nav a:link,nav a:visited { display:block; font:bold 1.7em verdana,sans-serif; background-color:#B1B0AB; text-align:center; text-decoration:none;}nav a:hover,nav a:active { background-color:#92918D;} And the HTML code is: <header> <img class="banner" src="ressourcer/PT-banner.jpg" alt="PT banner"> <nav> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> <li><a href="#">Link 7</a></li> </ul> </nav></header> I hope you can help me Link to comment Share on other sites More sharing options...
thescientist Posted August 13, 2010 Share Posted August 13, 2010 are you writing for the HTML5 specification? to me all those images look the same except for the opera one.why don't you just create a width for the <ul> and then assign a width to each of the <li>'s of w/x (where w is the width of the <ul> and x is however many list items you have, in this case 7). Link to comment Share on other sites More sharing options...
chrici Posted August 13, 2010 Author Share Posted August 13, 2010 are you writing for the HTML5 specification? to me all those images look the same except for the opera one.I am not excatly sure what you mean by "the HTML5 specification". But I do use HTML5 elements for better structure (and SEO if I have understood it right). The Chrome and Safari pictures are "missing" some width just to the right of "Link 7" - leaving a blank white space. You can see that Firefox and IE uses the entire width of the banner above the links and therefore has no blank white space.why don't you just create a width for the <ul> and then assign a width to each of the <li>'s of w/x (where w is the width of the <ul> and x is however many list items you have, in this case 7).That is what I have done. I have set the width of the <li>'s to 100/7=14.28(em). I have done that since I need the navigation bar to use the full width of the banner above - and the banner has the width 100em. Link to comment Share on other sites More sharing options...
thescientist Posted August 13, 2010 Share Posted August 13, 2010 it could be the relative nature of em's. I'm not sure if it would differ from browser to browser, but perhaps try an absolute unit like pixels.are you also using the HTML5 DTD? Link to comment Share on other sites More sharing options...
chrici Posted August 13, 2010 Author Share Posted August 13, 2010 No, this is the DTD I use:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">But changing it to the HTML5 DTD doesn't fix the problem.I have tried using pixels instead, but ended up with the same result. Link to comment Share on other sites More sharing options...
ShadowMage Posted August 13, 2010 Share Posted August 13, 2010 Try switching to a strict DTD and validating your code. Link to comment Share on other sites More sharing options...
chrici Posted August 13, 2010 Author Share Posted August 13, 2010 No - that doesn't fix it either Link to comment Share on other sites More sharing options...
ShadowMage Posted August 13, 2010 Share Posted August 13, 2010 I didn't really notice before, but you're using HTML 5 tags (<header> and <nav>). Those might not be supported tags in all browsers. This could potentially be the issue.I've got one more suggestion though. Try using a CSS reset. Put this at the top of your CSS:* {margin: 0px;padding: 0px;}That'll reset the margin and padding for all elements. It's possible you're seeing differences in default values across browsers for some elements. Link to comment Share on other sites More sharing options...
chrici Posted August 13, 2010 Author Share Posted August 13, 2010 I am using the HTML5 shiv. So the HTML5 tags are not the problem. Besides I tried with divs before HTML5 structure tags - and they gave me exactly the same problem.Resetting the margin/padding does nok work either. But thanks for the suggestion. Link to comment Share on other sites More sharing options...
chrici Posted August 21, 2010 Author Share Posted August 21, 2010 I just found the problem. The problem is that the browsers deals with "dot-values" in different ways.E.g width:10.48em becomes width:10em in Chrome/Safari, width:10.4 em in Firefox, width:10.48em in IE and width:11em in Opera.However I don't know how to solve this problem. Please let me know if you do. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.