Jump to content


Photo

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


  • Please log in to reply
12 replies to this topic

#1 benjaminmorgan

benjaminmorgan

    Advanced Member

  • Member
  • PipPipPipPip
  • 237 posts

Posted 29 October 2011 - 01:03 PM

http://img440.images.../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.
  • 0
Things should be made as simple as possible, but not any simpler. -Albert Einstein

#2 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,671 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 29 October 2011 - 02:08 PM

Do you have a link to the page?
  • 0

#3 benjaminmorgan

benjaminmorgan

    Advanced Member

  • Member
  • PipPipPipPip
  • 237 posts

Posted 29 October 2011 - 02:12 PM

no. sorry. I am not hosting yet. I am building a webpage for my schools band
  • 0
Things should be made as simple as possible, but not any simpler. -Albert Einstein

#4 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,671 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 29 October 2011 - 03:36 PM

I uploaded the code you provided, and it looks just fine in IE and FX - http://aandbwebdesig...forum/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.
  • 0

#5 benjaminmorgan

benjaminmorgan

    Advanced Member

  • Member
  • PipPipPipPip
  • 237 posts

Posted 29 October 2011 - 08:30 PM

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.
  • 0
Things should be made as simple as possible, but not any simpler. -Albert Einstein

#6 benjaminmorgan

benjaminmorgan

    Advanced Member

  • Member
  • PipPipPipPip
  • 237 posts

Posted 29 October 2011 - 08:33 PM

it is still spaced in ie 6 and 7
  • 0
Things should be made as simple as possible, but not any simpler. -Albert Einstein

#7 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,671 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 30 October 2011 - 08:20 AM

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.
  • 0

#8 Dinthi

Dinthi

    New member

  • New Members
  • 7 posts

Posted 31 October 2011 - 03:57 AM

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

  • 0

#9 benjaminmorgan

benjaminmorgan

    Advanced Member

  • Member
  • PipPipPipPip
  • 237 posts

Posted 31 October 2011 - 07:03 AM

i guess lol . I didn't pay attention. it didn't make a difference but i changed it. little cleaner code now :)
  • 0
Things should be made as simple as possible, but not any simpler. -Albert Einstein

#10 Dinthi

Dinthi

    New member

  • New Members
  • 7 posts

Posted 31 October 2011 - 07:37 AM

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
  • 0

#11 Eddie

Eddie

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,585 posts
  • LocationTexas

Posted 31 October 2011 - 10:19 AM

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}
  • 0

#12 benjaminmorgan

benjaminmorgan

    Advanced Member

  • Member
  • PipPipPipPip
  • 237 posts

Posted 31 October 2011 - 03:40 PM

Thanks, but some how this got off topic. I was trying to fix the whitespace and still haven't succeeded.
  • 0
Things should be made as simple as possible, but not any simpler. -Albert Einstein

#13 Eddie

Eddie

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,585 posts
  • LocationTexas

Posted 31 October 2011 - 10:33 PM

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




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users