PDA

View Full Version : Proplem with CSS list navigation


mojovonious
04-04-2005, 03:46 PM
So I want a Horizontal navigation system on my site, coded into lists. Everything is fine, but the UL seems to add extra space on the bottom (ie) and the bottom and top (FF)

I can't figure it out.

unfotunatley, my server is down at the moment, so I'll post my code

/* Andrew @ 8bitstudios 2005 */
/* Original Style*/

/*************BODY ELEMNTS*************/
body {

background-color:#FFFFFF;
margin: 0 0 0 0;
font: 10pt/17pt "Lucida Grande", "Lucida Sans Unicode", Verdana, Tahoma, Arial, sans-serif;
}

a:link {text-decoration:none; color:white;}
a:hover {text-decoration:underline;}
a:visited{text-decoration:none; color:white;}
#navigation ul{margin-left:-40px; list-style:none;}
/*******ADD 1px after taking off border*********/
#navigation li{list-style:none; float:left; margin:0; padding:0; width:192px; height:30px; border:0px solid black; margin-top:0px;}
#quick_links a:link{text-decoration:none; color:black;}
#quick_links a:hover{text-decoration:underline; color:black;}
#quick_links a:visited{text-decoration:none; color:black;}
.read a:link{text-decoration:none; color:#0066CC}
.read a:hover{text-decoration:underline; color:#0066CC;}
.read a:visited{text-decoration:none; color:#0066CC;}


/**********NAVIGATION*********/



#navigation {
height:32px;
margin:0;
padding:0;
width:768px;
border:0px solid black;

}

#home {
display:block;
background:url(images/home.gif) no-repeat;
}

#portfolio {
display:block;
background:url(images/port.gif) no-repeat;
}

#thoughts {
display:block;
background:url(images/thoughts.gif) no-repeat;
}

#tutorials {
display:block;
background:url(images/tutorials.gif) no-repeat;
}

/**********DIVS**************/

#container {
position:relative;
width:768px;
height:500px;
margin:0px auto;
border:0px solid orange;
padding:0px;
}

#top_nav {

margin:0 0 0 0;
width:758px;
height:30px;
border:0px solid black;
padding:0 0 0 10px;
background:url(images/topnavbg.gif) repeat-x;
color:white;
font-size:x-small;
}

.top_navLinks {
margin-left:10px;
}

#masthead {

margin:0 0 0 0;
width:768px;
height:150px;
background:url(images/masthead.jpg) no-repeat;
border:0px solid black;
}



#recent {

margin:-10px -25px -15px -25px;
width:571px;
height:25px;
padding:10px 0 10px 10px;
background:url(images/topnavbg.gif) repeat-x;
color:white;
font-size:small;
font-weight:800;
border:0px solid black;

}

#quick_links_head {
z-index:151;
position:absolute;
margin:17px 0 0 581px;
width:87px;
height:35px;
background:url(images/topnavbg2.gif) repeat-x;
padding:10px 10px 0px 90px;
color:white;
font-size:small;
font-weight:800;
}

#quick_links {
width:180px;
height:150px;
border:0px solid black;
float:right;
margin:-25px 10px 0 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:x-small;
font-weight:500;
}

#content {

margin:0 0 0 0;
width:748px;
padding:15px 25px 0px 25px;
background:url(images/contbg.gif) repeat-y;
}

/**********************CONTENT********************/

.entry {
width:500px;

}

.heading {
width:500px;
margin:10px 0 5px 0;
font:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:400;
border-bottom:1px solid #dddddd;
}

.date {
text-align:right;
width:500px;
float:left;;
margin:0 0 0 0;
font-size:x-small;
border-bottom:1px solid #dddddd;
}

.entry_text {
width:500px;
margin:0 0 0 0;
border:0px solid black;
font-size:small;
}

.read {
width:90px;
margin:0 0 0 400px;
color:#0099FF;
}

.image {
margin:10px 0 0px 90px;
padding:0 0 5px 0;
}

.caption {
margin:0 0 0 220px;
font-size:x-small;
}

#footer {

width:756px;
height:25px;
background:url(images/topnavbg.gif) repeat-x;
border:1px solid black;
padding:5px 0 0 10px;
font-size:xx-small;
color:#ffffff;
}

evilregis
04-04-2005, 05:40 PM
#navigation ul{margin-left:-40px; list-style:none;}

Add margin: 0; to that and see if that works.