Jump to content

[SOLVED] menu`s


cha0sriderx

Recommended Posts

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;
}

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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;"

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.