Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS Navbar not displaying properly in other browsers

    Hi guys,

    Bit of an annoying problem here, Ive got this navbar up and running using image rollovers, and it works fine in IE, however if firefox and safari it displays wrong, heres my code and what happens,

    Thanks in advance,

    Scott.


    HTML:

    PHP Code:
    <div class="navbar">
    <
    ul id="navlist">
    <
    li><a href="./shop">SHOP NOW</a></li>
    <
    li><a href="index.php">HOME</a></li>
    <
    li><a href="contact.php">CONTACT</a></li>
    <
    li><a href="faq.php">F.A.Q.</a></li>
    </
    ul>
    </
    div
    CSS:

    PHP Code:
    .navbar {
        
    font-family:Impact;
        
    font-size23px;
        
    text-align:center;
        
    height:54px;
    }
    .
    navbar li {
        list-
    style:none;
        
    display:inline;
    }
    .
    navbar a {
        
    width:198px;
        
    color:#FFFFFF;
        
    background:url("rollover.gif"no-repeat;
        
    padding:12px 10px 13px;
        
    margin:0 0px;
    }
    .
    navbar a:hover 
        
    background-position:-59px;
        
    color:#000000;
    }
    .
    navbar a:active {
        
    background-position:-118px;
        
    color:#FFFFFF;

    Displayed in IE:



    Displayed in FF/Safari:


  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,954
    Thanks
    9
    Thanked 725 Times in 719 Posts
    It's because you're applying a width to an inline element. Inevitably, FF and Safari are doing the right thing and IE isn't, even though it's doing what you want. Try:

    Code:
    .navbar { 
        font-family:Impact; 
        font-size: 23px; 
        text-align:center; 
        height:54px; 
    } 
    .navbar li { 
        list-style:none; 
        float:left; 
    } 
    .navbar a { 
        display:block;
        width:198px; 
        color:#FFFFFF; 
        background:url("rollover.gif") no-repeat; 
        padding:12px 10px 13px; 
        margin:0 0px; 
    } 
    .navbar a:hover {  
        background-position:0 -59px; 
        color:#000000; 
    } 
    .navbar a:active { 
        background-position:0 -118px; 
        color:#FFFFFF; 
    }
    By setting your a element to display:block the width will be applied, but this then means your menu items don't sit next to each other, so float:left is added to the li element to compensate for this.

  • Users who have thanked SB65 for this post:

    scottyearl (05-19-2010)

  • #3
    New to the CF scene
    Join Date
    May 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Excellent, thank you so much, that worked perfect

  • #4
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Quote Originally Posted by SB65 View Post
    FF and Safari are doing the right thing and IE typically isn't.
    Fixed.


  •  

    Posting Permissions

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