cha0sriderx Posted September 19, 2007 Share Posted September 19, 2007 for some reason when i try to make a menu with lists it always comes out messed up in IE or Firefox. the one in IE is shorter than the one in firefox and there isnt any space between the the links in the IE either. link: http://w0rdx.net/nitto/test/index.html HTML <link rel="stylesheet" type="text/css" href="style.css" /> <div id="left"> <ul class="menu"> <li><a class="" href="/index.php">Home</a></li> <li><a class="" href="/link.php">Link Here</a></li> <li><a class="" href="/link.php">Link Here</a></li> <li><a class="" href="/link.php">Link Here</a></li> <li><a class="" href="/link.php">Link Here</a></li> <li><a class="" href="/link.php">Link Here</a></li> <li><a class="" href="/link.php">Link Here</a></li> </ul> </div> CSS #left { clear:left; float:left; width:150px; margin:0px; margin-bottom:5px; padding:0; } ul.menu { width:150px; margin:0px; padding:0; list-style:none; } ul.menu li { width:150px; padding:0; line-height:15px; display:inline; } ul.menu li a { background-color:#f4f4f4; color:#505050; font-weight:bold; width:140px; float:left; margin-bottom:3px; padding:5px; paddng-right:1px; border-left:4px solid #cccccc; text-decoration:none; } ul.menu li a:hover { background-color:#eaeaea; border-left:4px solid #286ea0; color:#505050; } Quote Link to comment Share on other sites More sharing options...
moberemk Posted September 20, 2007 Share Posted September 20, 2007 Because you didn't give it a height, and font sizes change between browsers. Also, apply the margin to the li element, not the a element. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted September 20, 2007 Share Posted September 20, 2007 Whoa! That's NOT even close to a web page! I'm amazed it worked at all in any browser (well except IE). You can't just toss a markup level code out there without even the most minimal of basics and quirks mode html coding structure! An html page (valid or not) contains, at a minimum, an open and closed html tag, head tag and body tag. Without those, it isn't an actual html document and any browser will have to auto-assume that you meant it to be html. And when you ask a browser to assume, forget any possibility that the css will display "as expected", let alone "as coded". When debugging, ALWAYS check for errors in your markup code first! It is WAY easier to fix simple tag errors than unnecessarily messing willy-nilly with a potentially already well planned and coded css, only to discover an hour or two later that the bug was an unclosed li tag - and you now have to put the css back to the way it was originally! So, if your markup is correct, and the css is not displaying "as expected", it is either displaying "as coded", which means you are actually telling it to display that way (though unintentionally), or there is an error in your css "specification structure" (in other words, you broke the rules). That said. Forget what moberemk said. He was assuming that there actually was a css issue (and suggested a sound first stage debug check) Your css will work in FF and IE 6 ... IF YOU USE A VALID XHTML DOCTYPE. But getting back to your structure. At the least, if you use basic, quirks mode (non valid) IE only friendly html structure, there is still no guarantee that your css will display "as expected" across browsers (but in IE it WILL display as "coded"): <html> <head> <title>List item menu test</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="left"> <ul class="menu"> <li><a class="" href="/index.php">Home</a></li> <li><a class="" href="/link.php">Link Here</a></li> <li><a class="" href="/link.php">Link Here</a></li> <li><a class="" href="/link.php">Link Here</a></li> <li><a class="" href="/link.php">Link Here</a></li> <li><a class="" href="/link.php">Link Here</a></li> <li><a class="" href="/link.php">Link Here</a></li> </ul> </div> </body> </html> However, if you use standards valid doctype code (in your case, since you ended the stylesheet link as XHTML, we will use that doctype (which IE 6.0 at least tries harder to display as "expected" and "coded"): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>List item menu test</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="left"> <ul class="menu"> <li><a class="" href="/index.php">Home</a></li> <li><a class="" href="/link.php">Link Here</a></li> <li><a class="" href="/link.php">Link Here</a></li> <li><a class="" href="/link.php">Link Here</a></li> <li><a class="" href="/link.php">Link Here</a></li> <li><a class="" href="/link.php">Link Here</a></li> <li><a class="" href="/link.php">Link Here</a></li> </ul> </div> </body> </html> CSS can be easy or it can be hard. If you know the rules ... it can be easy; if you don't know the rules ... it can be very hard. Here is a link to the most important site you will ever visit for everything you ever want to know about lists (listomatic tutorials), floats (floatutorial) and, more importantly, everything you MUST know about css rules (selectutorial): http://css.maxdesign.com.au/index.htm Book mark this site and refer to it whenever you have a question about lists, floats or rules. Dave Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted September 20, 2007 Share Posted September 20, 2007 Oh, yeah, I forgot to mention, AFTER checking your markup for any errors or typos, do the same for your css! You DO have a typo in your css that is hard to see at first. You could have spent hours messing with your css only to discover you miss-spelled padding wrong! ul.menu li a has "paddng-right:1px;" ... should be "padding-right:1px;" Quote Link to comment Share on other sites More sharing options...
cha0sriderx Posted September 20, 2007 Author Share Posted September 20, 2007 im not new to css/html, ive been doing it for a long time but i took and break and just got back into it. i was just sticking the menu in a seperate html for now until it looked how i wanted it so i didnt mess up my layout, i didnt think excluding the Doctype and stuff would make a difference. thanks alot for your help. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.