SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict WillisTi's Avatar
    Join Date
    Sep 2005
    Location
    Bristol, ENG
    Posts
    338
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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!

    Cheers

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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 -

    Code:
    #menu { text-align:right; padding:0px 0 4px 0;}/*8px would show the border*/
    #menu ul {position:relative;}
    #menu ul li { display:inline; padding-right:35px;}
    #menu ul li.last{ display:inline; padding-right:0px;}

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    *{ margin:0; padding:0; border:0; outline:0;}
    
    ol,ul{ list-style:none; }
    
    body{
    background: #003C58;
    color:#595959; 
    /*position:relative;*/
    /*z-index:999;*/
    font:12px Helvetica Neue, Arial, Helvetica, sans-serif;
    line-height:15px;
    }
    
    .wrapper{ 
    width:970px;
     margin:0 auto; 
    overflow:hidden;/*contain floats*/
    }
    
    #header, 
    #menu, 
    #contentBox, 
    #footer{width:100%; float:left; clear:both;}
    
    /*-- reset #menu float to none --*/
    #menu{ float:none; text-align:right; padding:0px 0 4px 0; }
    #menu ul li{ display:inline; padding-right:35px;}
    #menu ul li.last{ display:inline; padding-right:0px;}

  4. #4
    SitePoint Addict WillisTi's Avatar
    Join Date
    Sep 2005
    Location
    Bristol, ENG
    Posts
    338
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah thanks a lot I'll make those changes shortly and see what happens.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •