Menu a.active border not appearing

Hi Chaps,

Just got a little problem here: http://c3media.co.uk/v4/index.html - you’ll notice the white border underneath the menu item ‘Home’. Now if you click ‘About Us’ it no longer appears and I’m not sure why? I’m looking in FireFox 3.5 by the way.

Another problem exists in Safari. The border appears to be a lot thinner.

I’m wondering if this a z-index issue or if I need to go to bed! :sleeping:

Cheers

I’m wondering if this a z-index issue or if I need to go to bed!

Hi,
Yes, It looks like you can fix your issue by creating a new stacking context for your ul. The white bottom border is there but it is hidden below the following div. If you will increase the bottom padding you can see it.

However that will alter your design so you can just stack it above the following div by setting the ul as position:relative;

Add this new selector below -

#menu { text-align:right; padding:0px 0[COLOR=Blue] 4px[/COLOR] 0;}/[COLOR=Red]*8px would show the border*/[/COLOR]
[B]#menu ul[/B] [COLOR=Blue]{position:relative;}[/COLOR]
#menu ul li { display:inline; padding-right:35px;}
#menu ul li.last{ display:inline; padding-right:0px;}

Looking back through your page again I see the reason for the problem was the float that you had set on the #menu div.

There is really no reason to float it since you want the width to be 100%. Your list items are set as display:inline; so it does not need to contain any child floats. Removing the float from the #menu will also fix the problem as opposed to what I posted above.

Not sure why you have that z-index and Relative Position on your body element either, you should be able to loose them too.
You should also set overflow:hidden; on your wrapper to contain your floats. :slight_smile:


*{ margin:0; padding:0; border:0; outline:0;}

ol,ul{[COLOR=DarkGreen] [COLOR=Black]list-style:none[/COLOR];[/COLOR] }

[B]body[/B]{
background: #003C58;
color:#595959; 
[COLOR=Red]/*position:relative;*/
/*z-index:999;*/[/COLOR]
font:12px Helvetica Neue, Arial, Helvetica, sans-serif;
line-height:15px;
}

[B].wrapper[/B]{ 
width:970px;
 margin:0 auto; 
[COLOR=Blue]overflow:hidden;/*contain floats*/[/COLOR]
}

#header, 
[COLOR=Red][B]#menu, [/B][/COLOR]
#contentBox, 
#footer{width:100%; [COLOR=Red]float:left;[/COLOR] clear:both;}

[COLOR=Blue]/*-- reset #menu float to none --*/[/COLOR]
[B]#menu[/B]{ [COLOR=Blue]float:none;[/COLOR] text-align:right; padding:0px 0 4px 0; }
[B]#menu ul li[/B]{ [COLOR=DarkGreen]display:inline;[/COLOR] padding-right:35px;}
#menu ul li.last{ display:inline; padding-right:0px;}

Ah thanks a lot :slight_smile: I’ll make those changes shortly and see what happens.