PDA

Click to See Complete Forum and Search --> : gap between list items in css nav bar

Daniel T
01-08-2004, 08:14 PM
hey, im workin on a new site design and im having some problems. i have attatched a screen-shot of what my site looks like now(scaled down to 50% because of large file size). as you can see in the screen shot, there are gaps between the list items that make up the nav bar. because of this, wen i enter "width:20%;" in the "#nav ul li" css area, it takes up 2 lines instead. here is my code:

the css:

h1{
color:#ddf;
font-family:arial;
font-size:35px;
}

body {
font-family:arial;
color:#666;
margin:0;
padding:0;
background-color:efefff;
}
a,a:link,a:visited {
color:#369;
text-decoration:underline;
}
a:hover {
color:09F;
text-decoration:none;
}

#page {
width:750;
font-size:17px;
font-family:arial;
text-align:left;
border: 1px solid #999999;
border-top-width:0px;
background-color:#ffffff;
margin:0;
padding:0;
}

#logo {
height:100px;
width:100%;
font-size:17px;
font-family:arial;
text-align:center;
background:url("images/logo.jpg") #dddddd;
padding:0;
margin:0;
}

#pgContent {
width:100%;
height:100%;
font-size:17px;
font-family:arial;
text-align:left;
background-color:#fff;
margin:0;
padding:10px;
}

#copyRight {
border: 1px solid #999999;
width:100%;
color:#000;
font-size:13px;
font-family:arial;
text-align:right;
background-color:#ddf;
margin:15px;
padding:5px;
}

#copyRight a {
color:#369;
text-decoration:none;
}

#copyRight a:hover {
color:#09f;
}

#copyRight a:active {
color:#369;
}

#nav {
font-size:17px;
font-family:arial;
width:100%;
text-align:center;
background:url(images/file.jpg) #fff repeat;
margin:0;
padding:0;
}

#nav ul {
list-style-type:none;
margin:0;
padding:0;
}

#nav ul li {
display:inline;
padding:0;
margin:0;
}

#nav ul li a {
background:url(images/file.jpg) #eef repeat;
color:#000;
text-decoration:none;
width:20%;
}

#nav ul li a:hover {
color:#039;
background-color:#FFF;
}

and the html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Welcome!</title>
<style type="text/css">
@import url("styles.css");
</style>

</head>

<body leftmargin=0 topmargin=0>
<center>
<div id="page">
<div id="logo"></div>
<div id="nav">
<ul>
<li><a href="index.html" target="">Menu Item 1</a></li>
<li><a href="html.html" target="">Menu Item 2</a></li>
<li><a href="javascript.html" target="">Menu Item 3</a></li>
<li><a href="css.html" target="">Menu Item 4</a></li>
<li><a href="tutorials.html" target="">Menu Item 5</a></li>
</ul>
</div>
<div id="pgContent">
<p>
PAGE CONTENT GOES HERE

</p>
</div>
</div>
<div id="copyRight">COPYRIGHT INFORMATION GOES HERE</div>

</body>
</html>


i would like a reply asap on this. thanx!
-Dan
pyro
01-08-2004, 09:33 PM
You've got a bit of fixing to do there. :)

First of all, some general rules.

1: You must always specify which unit of measurement you are using, unless the number is 0. So, if you want 50 pixels, you must use 50px, rather than just 50. IE will assume pixels, other browsers will not.

2: When specifying colors, a # must proceed the hex number.

3: Use full DOCTYPES. With incomplete ones (such as on your document) browsers are thrown into quirks mode, where anything goes.

4: width: 100% is not usually needed. It is often inherent.

5: Use Mozilla when testing. ;)

Ok, done with those few general rules, let's get on to some specifics.

Set float:left; on your #nav ul li. Now, since you are using a fixed width, instead of using 20% for the width's of your links, use 150px (750/5 = 150). If you use and border or padding, take that into consideration (http://www.ryanbrill.com/archives/00009.php). Also, since the a element (#nav ul li a) is inline by default, you need to set it to display: block; or the width will not take effect. Once you get that stuff fixed up, things will be better. :)
Daniel T
01-08-2004, 10:19 PM
thanx pyro. now i need a new <doctype>. i dont really no much about them, so i just always use that one(its the default 1 on my editor).
-Dan
pyro
01-08-2004, 10:24 PM
http://www.alistapart.com/articles/doctype/
http://www.w3.org/QA/2002/04/valid-dtd-list.html
Daniel T
01-08-2004, 10:58 PM
thanx again pyro. now, another question. i just finished downloading mozilla firebird 0.7 and it came in zip format. i want to know where to extract all the included files to.
thanx,
-Dan
Daniel T
01-08-2004, 11:08 PM
nvm bout that last question, i just had to read farther down the page! my bad,
-Dan
toicontien
01-09-2004, 12:05 AM
There is also a funny bug in Internet Explorer when a list item contains a block-level anchor tag. It creates a 1 em margin underneath the list item that cannot be controlled using CSS. I have found a fix for it in the file attached.
Daniel T
01-09-2004, 03:52 PM
Originally posted by toicontien
There is also a funny bug in Internet Explorer when a list item contains a block-level anchor tag. It creates a 1 em margin underneath the list item that cannot be controlled using CSS. I have found a fix for it in the file attached.

i am not familiar wit the term block-level. could sum1 explain?
pyro
01-09-2004, 05:10 PM
Read http://www.w3.org/TR/REC-CSS2/visuren.html#q5 and if you need a further explination, let us know. :)