Css menu overlapping problem

[kinger251285]

Hi

I am absolutely stumped with this problem.

i have created a tabbed style menu navigation bar. I have this working fine with a set number of elements. However when i increase the number of navigation items the menus automatically drops to a new row, as if you were typing in a word document, which is exactly what i want.

However when it does this the top and bottom rows overlap each other. I would like a line (white space) in between the elements as they overflow onto a new row.

Any help appreciated!

Css:

.navBar{
width : 980px; 
} 

.halfmoon { 
margin-bottom : 1em;
} 
.halfmoon ul { 
padding : 0px 0px 0px 0px; 
font : 14px Arial; 
margin : 0; 
margin-left : 0; 
margin-right : 0; 
list-style-type : none;
} 

.halfmoon li { 
display : inline; 
} 
.halfmoon li a { 
text-decoration : none; 
padding : 3px 9px 2px 5px; 
margin : 0; 
margin-right : 0; 
color : white; 
font-size : 14px; 
background : #492d67; 
} 
.halfmoon li a:visited { 
color : white; 
} 
.halfmoon li a:hover { 
background-color : #0099ff; 
color : white; 
}

HTML:

<div class="navBar">
<div class="halfmoon">
<ul>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES_External-Lighting_W0QQ_fsubZ2599401018QQ_sidZ1024992838QQ_trksidZp4634Q2ec0Q2em322" target="_blank">External Lighting</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Fire-Alarms-/_i.html?_fsub=2599396018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Fire Alarms</a></li>
<li class="selected"><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Fixtures-Fittings-/_i.html?_fsub=2599395018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Fixtures & Fittings</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Heating-/_i.html?_fsub=2599397018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Heating</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Internal-Lighting-/_i.html?_fsub=2599398018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Internal Lighting</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Intruder-Alarms-/_i.html?_fsub=2599394018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Intruder Alarms</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Switches-Sockets-/_i.html?_fsub=2599402018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Switches & Sockets</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/TV-Satellite-/_i.html?_fsub=2599403018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">TV & Satellite</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Ventilation-/_i.html?_fsub=2599404018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Ventilation</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES_External-Lighting_W0QQ_fsubZ2599401018QQ_sidZ1024992838QQ_trksidZp4634Q2ec0Q2em322" target="_blank">External Lighting</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Fire-Alarms-/_i.html?_fsub=2599396018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Fire Alarms</a></li>
<li class="selected"><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Fixtures-Fittings-/_i.html?_fsub=2599395018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Fixtures & Fittings</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Heating-/_i.html?_fsub=2599397018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Heating</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Switches-Sockets-/_i.html?_fsub=2599402018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Switches & Sockets</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/TV-Satellite-/_i.html?_fsub=2599403018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">TV & Satellite</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Ventilation-/_i.html?_fsub=2599404018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Ventilation</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES_External-Lighting_W0QQ_fsubZ2599401018QQ_sidZ1024992838QQ_trksidZp4634Q2ec0Q2em322" target="_blank">External Lighting</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Fire-Alarms-/_i.html?_fsub=2599396018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Fire Alarms</a></li>
<li class="selected"><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Fixtures-Fittings-/_i.html?_fsub=2599395018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Fixtures & Fittings</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Heating-/_i.html?_fsub=2599397018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Heating</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Internal-Lighting-/_i.html?_fsub=2599398018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Interna</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES_External-Lighting_W0QQ_fsubZ2599401018QQ_sidZ1024992838QQ_trksidZp4634Q2ec0Q2em322" target="_blank">External Lighting</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Fire-Alarms-/_i.html?_fsub=2599396018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Fire Alarms</a></li>
<li class="selected"><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Fixtures-Fittings-/_i.html?_fsub=2599395018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Fixtures & Fittings</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Heating-/_i.html?_fsub=2599397018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Heating</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Internal-Lighting-/_i.html?_fsub=2599398018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Internal Lighting</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Intruder-Alarms-/_i.html?_fsub=2599394018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Intruder Alarms</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Switches-Sockets-/_i.html?_fsub=2599402018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Switches & Sockets</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/TV-Satellite-/_i.html?_fsub=2599403018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">TV & Satellite</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Ventilation-/_i.html?_fsub=2599404018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Ventilation</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES_External-Lighting_W0QQ_fsubZ2599401018QQ_sidZ1024992838QQ_trksidZp4634Q2ec0Q2em322" target="_blank">External Lighting</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Fire-Alarms-/_i.html?_fsub=2599396018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Fire Alarms</a></li>
<li class="selected"><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Fixtures-Fittings-/_i.html?_fsub=2599395018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Fixtures & Fittings</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Heating-/_i.html?_fsub=2599397018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Heating</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Internal-Lighting-/_i.html?_fsub=2599398018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Internal Lighting</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Intruder-Alarms-/_i.html?_fsub=2599394018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Intruder Alarms</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Switches-Sockets-/_i.html?_fsub=2599402018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Switches & Sockets</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/TV-Satellite-/_i.html?_fsub=2599403018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">TV & Satellite</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Ventilation-/_i.html?_fsub=2599404018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Ventilation</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES_External-Lighting_W0QQ_fsubZ2599401018QQ_sidZ1024992838QQ_trksidZp4634Q2ec0Q2em322" target="_blank">External Lighting</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Fire-Alarms-/_i.html?_fsub=2599396018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Fire Alarms</a></li>
<li class="selected"><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Fixtures-Fittings-/_i.html?_fsub=2599395018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Fixtures & Fittings</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Heating-/_i.html?_fsub=2599397018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Heating</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Internal-Lighting-/_i.html?_fsub=2599398018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Internal Lighting</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Intruder-Alarms-/_i.html?_fsub=2599394018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Intruder Alarms</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Switches-Sockets-/_i.html?_fsub=2599402018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Switches & Sockets</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/TV-Satellite-/_i.html?_fsub=2599403018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">TV & Satellite</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Ventilation-/_i.html?_fsub=2599404018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Ventilation</a></li>
</ul>
</div>
</div>

[SB65]

Have a try making your css:

.halfmoon li {
    /*display: inline;*/
    float: left;
    margin: 0 4px 9px 0;
}

[kinger251285]

Originally Posted by SB65

Have a try making your css:

.halfmoon li {
    /*display: inline;*/
    float: left;
    margin: 0 4px 9px 0;
}

Hi

I thought it would be a case of margins or padding but couldnt figure it out.

Thanks for that, almost what i wanted. The spaces are there however i dont like the look of the float left. Ive tried float center however that sent the menu vertically down the middle of the page.

Is there a way to have it centrally aligned (aligning does not work either)?

[SB65]

You can centre the whole menu with:

.navBar {
    margin: 0 auto;
    width: 980px;
}

(make you sure you have a valid doctype for this to work with IE).

Is that what you mean?

[kinger251285]

Originally Posted by SB65

You can centre the whole menu with:

.navBar {
    margin: 0 auto;
    width: 980px;
}

(make you sure you have a valid doctype for this to work with IE).

Is that what you mean?

Ok so this is working as i want within html. Why would it not work with a php document??

Thank you for your help so far.

[SB65]

Can you link to your page?

[kinger251285]

Unfortunately im using a local host at the mo. Ive added a screen shot if that helps.

[SB65]

Not much help, unfortunately.

I see you are testing in IE - looks like it might be IE7. Just to rule out IE being awkward, can you view your page in Chrome - do you get the same problem?

EDIT: Actually, are you sure that menu isn't centred on the page - it looks like it might be.

[kinger251285]

Ive already tried that, firefox, chrome and safari. I regularly try different browsers when developing a site.

Unfortunately all are the same, minor layout differences, all aligned to the left.

Seems like the code is missing out the navbar div for some reason.

[SB65]

Wonder if we are at cross purposes here - the menu is centred but it's component lis are aligned left - is that not what you want? I assumed it was because you said it worked for you in html.

If you want the items centred within the list have a try with:

.halfmoon li {
    display: inline-block;
   /* float: left;*/
    margin: 0 4px 9px 0;
}

[kinger251285]

Top Man absolutely spot on, thanks very much for your help.