Where is that Margin coming from? Really frustrating!! (menu issue) - please help..?

Hi.

Today, just a few hours ago, i started working on a new style for my website. I have set it up so that i have one main stylesheet file (for the most important things...) and then i have four other ones (i only load one of them at a time) that contains the colors etc... I also have a stylesheet switcher on the site so that the visitors can change style.

Now to the problem:
As i said above i started working on a new stylesheet file for my site. But i'm kind of stuck on the menu part...

Here's the HTML code for the menu:

<div class="menubar">
<li class="current_page_item">
<a href="http://PlanetTechSupport.com/b">Home</a>
</li>

<li class="page_item page-item-271">
<a href="http://PlanetTechSupport.com/b/?page_id=271" title="Polls">Polls</a>
</li>

<li class="page_item page-item-2">
<a href="http://PlanetTechSupport.com/b/?page_id=2" title="About &amp; Contact">About & Contact</a>
</li>

</div>



As you can see i didn't wrap the <li> tags inside an <ul> or <ol> tag since i don't see the point with it. It will be listed as an Unordered List anyways. I don't think thats the problem.

Here's the CSS.

.menubar {
width: 960px;
margin: 10px auto 0px auto !important;
background: transparent url(http://planettechsupport.com/b/wp-content/themes/premium/images/menubg-4.gif) repeat-x !important;
height: 35px !important;
overflow: hidden;
clear: both;
padding: 0px !important;
}

.menubar li, .menubar li a, .page_item a, .menubar li a:visited {
list-style-type: none !important;
height: 35px;

line-height: 33px !important;
font-size: 14px !important;
font-weight: bold !important;

padding: 0px 5px 0px 5px !important;
margin: 0px !important;

background: transparent url(http://planettechsupport.com/b/wp-content/themes/premium/images/menubg-4.gif) repeat-x !important;
}

.menubar li a:hover, .page_item a:hover, current_page_item a {
background: transparent url(http://planettechsupport.com/b/wp-content/themes/premium/images/menubg-hover-4.gif) repeat-x !important;
color: #FFECE0;
}


As you can see there is no margin involved in the CSS at all (exept for the .menubar, but i need that to center the menu on the page). I used paddings, but that only gives extra space in the inside of the <li> tag right? But if you go to the site and hover over one of the menu items you will see that there is a few pixels of space between the li tags. I have no idea what it comes from. I've been trying to figure it out for about two hours now, its just frustrating!

I've used a firefox addon called Firebug to figure out where the <li> tags loads the CSS from, and i can't find any margins in there either.

Am i doing something wrong? I did try to add a <ul> tag before but that didn't solve anything (i also set the margin and padding for the ul tag to 0px).

It looks the same in IE (IE 8).

If you'd like to check it out yourself here is the link to my site:
http://planettechsupport.com/b/?switchstyle=4
That link will bring you to the site, and also set the style to the one i'm working on.

And BTW, i'm using Wordpress. (thats the reason why i have those wicked classes for the <li> items in the menu)

If you have any idea on what i'm doing wrong, then please, help me?
-Nike

Hello najkiie,
Why would you not wrap your unordered lis in ul tags? I don't understand.

First you say As you can see i didn't wrap the <li> tags inside an <ul> or <ol> tag since i don't see the point with it. It will be listed as an Unordered List anyways. I don't think thats the problem anyways.

And further down your post you explain exactyl why you do need it wrapped in ul tags.(exept for the .menubar, but i need that to center the menu on the page). I used paddings, but that only gives extra space in the inside of the <li> tag right?

Have a look at a centered ul menu demo here - http://nopeople.com/CSS/menu-h_centered-ul/index.html View the source to see how it's done.

I didn't wrap it in an <ul> or <ol> tag because there is no point with it? Or is it?

Further down i said i didn't use any margins at all exept for centering the whole menu div, i only used paddings. And the padding i used was for giving the <li> tags a little bit more extra space between the text in the <li> tag and the end of the <li> tag..

like this:
Without padding:
<li>_Some text_</li>

With padding:
<li>____Some text____</li>

I only want to get rid of the space between the <li> tags... like this:

<li> item one </li>______-space-_____<li> item two </li>


I tried adding wrapping it in an <ul> tag, but it still isn't working. Check it out (http://planettechsupport.com/b/?switchstyle=4), it looks the same.

I added this CSS for the ul tag:

.menubar ul {
margin: 0px;
padding: 0px;
list-style-type: none;
width: auto;
}



EDIT: I couldn't add normal spaces above so i used "_"'s instead...

Did you look at that demo I linked you to?

Yes i did. Two times now. I don't see what i'm doing wrong, what should i look at? I've looked at the code to.

Yours can work with minimal changes.
CSS}
.edit-comment-admin-links {
border-top: 1px solid #A6A6A6;
padding-top: 5px;
}

.edit-comment-admin-links a {
color: #619812 !important;
font-weight: bold;
}

.edit-comment-admin-links a:hover {
color: #0D619C !important;
text-decoration: none;
}

.menubar {
width: 960px;
height: 35px;
}
ul#topnav {width: 400px;
margin: 0 auto;
}
#topnav li {
display: inline;
text-align: center;
}
#topnav li a {
width: 100px;
float: left;
display: block;
line-height: 35px;
color: #fff;
text-decoration: none;
}
#topnav li a:hover {
color: d8cbbd;
}

.ch-color {
background: transparent none;
margin: 0px;
padding: 0px;
border: none;
outline: 0px;

padding-top: 6px;

float: right;
width: 130px;
height: auto;
}
markup

<!--****** START CUSTOM MENU ******-->
<div class="menubar">
<ul id="topnav">
<li class="current_page_item">
<a href="http://PlanetTechSupport.com/b">Home</a>
</li>

<li class="page_item page-item-271"><a href="http://PlanetTechSupport.com/b/?page_id=271" title="Polls">Polls</a></li>
<li class="page_item page-item-2"><a href="http://PlanetTechSupport.com/b/?page_id=2" title="About &amp; Contact">About &amp; Contact</a></li>

</ul>
</div>
<!--****** END CUSTOM MENU ******-->



Do you see the need now for the ul tags? Properly formed code performs the way it's supposed to. If you start leaving things off then who knows how it's going to get rendered in different browsers?

Thanks dude.

I understand why i should wrap it up in an <ul> tag now, i had no idea what it was for before...

It's working great now. :)

A few other things to look at. Lots of these could be fixed.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fplanettechsupport.com%2Fb%2F

Thanks =D

I'll take a look at that.