Jump to content
Stef's Coding Community
Sign in to follow this  
benjaminmorgan

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

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 :P

Share this post


Link to post
Share on other sites

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}

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  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.

Loading...
Sign in to follow this  

×
×
  • Create New...