Whitespace between li tags in vertical navigation menu HELP! CSS HELP?

[benjaminmorgan]

http://img440.imageshack.us/img440/234/whites.png is what is happening. It is only INTERNET EXPLORER. I can't fix it. Here is my code sections. I need a CSS fix.

-------HTML CODE--------

<ul id="sidenav">
<li><a href="eband.php">Elementary Band</a></li>
<li><a href="jhband.php">Junior High Band</a></li>
<li><a href="hsband.php">High School Band</a></li>
<li><a href="news.php">Band News</a></li>
</ul>

 

 

 

CSS CODE

 

/*SIDE NAVIGATION*/
ul#sidenav {
clear:both;
margin:0px;
padding:0px;
list-style-type:none;
line-height:100%;

width:200px;
}
ul#sidenav li {
line-height:100%;

display:block;
height:100%;
clear:both;
width:200px;
}
ul#sidenav li a:link, ul#sidenav li a:active, ul#sidenav li a:visited {
display:block;
line-height:100%;
padding:4px;
border-bottom:1px solid yellow;
background-color:blue;
color:yellow;
text-align:center;
font-weight:bold;
text-decoration:none;
font-size:16px;

}
ul#sidenav li a:hover {

background:url("../images/golhover.jp…
color:#472400;
text-decoration:none;
}
/*END SIDE NAVIGATION */

 

 

 

 

 

 

IF I put the code all in one line it works but i don't want to do that. i just can't remember the css fix.

[Andrea]

Do you have a link to the page?

[benjaminmorgan]

no. sorry. I am not hosting yet. I am building a webpage for my schools band

[Andrea]

I uploaded the code you provided, and it looks just fine in IE and FX - http://aandbwebdesign.com/KSforum/list.html - so your problem is somewhere other than in just this bit.

 

Also important, when it comes to IE, is knowing what version you're talking about.

[benjaminmorgan]

Nevermind the compatability view for older browsers was turned on. when i turned it to show just for the browser 10 it worked right. even on your site it is spaced if it is on.

[benjaminmorgan]

it is still spaced in ie 6 and 7

[Andrea]

Try adding a:

 

* {margin: 0, padding: 0;}

 

to the top of your CSS. That is a good way to avoid browser inconsistencies, of course you then have to add margin and padding back in where you need it, but it'll be the same on all browsers.

 

But in order to see what is really going on, we need to see ALL the CSS and HTML and ideally, also all the images.

[Dinthi]

Edit: Sort of a topic hijack, sorry..

 

Since ID's are unique, you don't have to put anything in front of them, right?

 

ul#sidenav {
clear:both;
margin:0px;
padding:0px;
list-style-type:none;
line-height:100%;
}

 

Is fine, but doesn't this do the same thing?

 

#sidenav {
clear:both;
margin:0px;
padding:0px;
list-style-type:none;
line-height:100%;
}

[benjaminmorgan]

i guess lol . I didn't pay attention. it didn't make a difference but i changed it. little cleaner code now

[Dinthi]

I was just wondering myself. I installed pagespeed(nice little firebug extension, made by Google) and it shows all this kind of stuff. I was just reading through the documentation, so i thought i'd ask

[newseed]

Edit: Sort of a topic hijack, sorry..

 

Since ID's are unique, you don't have to put anything in front of them, right?

 

ul#sidenav {
clear:both;
margin:0px;
padding:0px;
list-style-type:none;
line-height:100%;
}

 

Is fine, but doesn't this do the same thing?

 

#sidenav {
clear:both;
margin:0px;
padding:0px;
list-style-type:none;
line-height:100%;
}

 

Yes and no. If you use ul#sidebar then it will only work for unordered list and no where else. It's possible you may want to use #sidebar more than once but not on the same page. For instance, let's say that the ul#sidebar is for a menu that is being used on the home page. However, for one interior page it does not require that menu but something different altogether. It could be ol#sidebar or whatever.

 

Of course we all know that you should only use ID's once but it's possible to have logic and scripting to define a set of codes such as whether a user is logged in or not. The id ul#sidebar could be used for when you are not logged in while the other (when logged in) could use ol#sidebar. The css for ul#sidebar will not work for <ol id="sidebar"> and vice versa.

 

With that being said, it's probably more common and better to use classes for such cases as these.

 

And for those that do not know, you can have as many classes as you want within the same line but only one ID.

 

Example:

 

You can set the css like this:

 

.menu {css styles here}

.leftbox {float left style here}

.blue-bg {background style here}

 

You html would look like this:

 

<div class="menu"></div>

 

<div class="leftbox"></div>

 

<div class="blue-bg"></div>

 

Now you may want all three styles to be in one div. Instead of writing another set of css styles you would do something like this:

 

<div class="menu leftbox blue-bg">

 

Each can work as a standalone anywhere that uses such classes but also work together.

 

If you want to expand more on those above css styles that are not listed then you would do something like this:

 

.menu.leftbox.blue.bg {additional styles}

 

As for ID, you can only use it once but you can use it together with classes.

 

<div id="sidebar" class="menu">

<div id="sidebar" class="menu leftbox blue-bg">

 

 

#sidebar.menu {styles}

or

#sidebar.menu.leftbox.blue.bg {styles}

[benjaminmorgan]

Thanks, but some how this got off topic. I was trying to fix the whitespace and still haven't succeeded.

[newseed]

To help you better, get it uploaded to a host so we can see the problem and then troubleshoot it for you.