CSS too messy to fix?

[breegeek]

Hi all,

I have NO idea what I have done to screw this up, but every time I make a new page, css manages to make me feel like a blithering idiot.

I have a wrapper div (green for visual aid) that doesn’t extend all the way to the footer.
Also, I can’t get my nav list to display correctly (I had an image of a box for bullets) and can’t figure out why.

I believe there might be something in the floats and clears, but no idea where the crux is… *sigh*

Please help if ya can: Site here.

and the css is long and here:

Code:

@charset “utf-8”;

/*
Theme Name:NERD
Theme URI:
Description: Our NERD site
Author: Bree
Author URI: http://nerdcomics.com
Version: 1.0
.
General comments/License Statement if any.
.
*/

body {
margin:0px;
padding:0px;
background: #FFF;
}
p{
margin:0}

#wrapper{
width:1000px;
margin:auto;
border:3pt solid #0FC;
}

#header{
background: transparent url(header.png);
height:147px;

}

#nav {
background:#c97272;

height:30px;
width:100%;

}

#nav ul {
display: inline;
}

#nav li {
display:inline;
font-size:1em;
text-decoration:none;
font:Georgia, “Times New Roman”, Times, serif;
color:#fff;
margin:0;
}

#nav li a{
text-decoration:none;
font:bold;
font-variant:small-caps;
font:Georgia, “Times New Roman”, Times, serif;
color:#fff;
list-style-image:url(nav_box.png);
padding:3px;
}

#nav li>ul{
/*Make the sub list items invisible*/
display: none;
}

#middle{
background: #FFF;
width:1000px;

}

#content{
float:left;
width:750px;

}

#content p{
font-family:Georgia, “Times New Roman”, Times, serif;
font-size:1em;
}
#content a{
color:#903;
text-decoration:none;
}

#content h2{
background-color:#CCC;

}

#sidebar{
background-color: #a6a6a6;
width:250px;
float:right;
clear:right;
height:100%;

}

#sidebar p{
font-family:Georgia, “Times New Roman”, Times, serif;
font-size:1em;
}
#sidebar a{
color:#903;
text-decoration:none;
}

#sidebar h2{
color:#FFF;
}

#sidebar h2, p, a {
margin:10px;
}

#nav ul, li {
font-size:1em;
text-decoration:none;
font:Georgia, “Times New Roman”, Times, serif;
color:#fff;
margin:0;
}

#footer{
width:1000px;
height:100px;
background:#151414;
float:left;
clear:both;

}
#footer p a{
color:#CCC;
padding:5px;
}

Thanks! Cheers! :oops:

[cybershot]

can you post a picture of what it is suppose to look like? I don’t see any of the problems you are talking about. So if I had something to go off of that would help.

[breegeek]

Thanks for the reply!

I fixed the wrapper problem, but I still can’t figure out how to get my bullets (a square image I’ve linked to) to work.

This is basically what I want it to look like (the nav li etc) [img]http://breerubin.com/site.png[/img]

[cybershot]

http://www.alistapart.com/articles/taminglists/

[cybershot]

your other option is to not use an image. You can use a border instead like this

Code:

#nav ul li {
border-left: 10px solid white;
}

then put a little padding on the link

#nav ul li a {
padding-left: 10px;
}

this will make your site faster because you won’t have to download the list image

[breegeek]

Will give it a go. Thanks guys! 8-)

[Author]

Posts