CODEWITHSUNDEEP
htmlcssgoogle-chromefirefox
Noor Ali Butt
Noor Ali Butt

Reputation: 817

css behave different in mozila and chrome

When i open my page, its navigation behaves different on chrome and Firefox, when I hover over it!

As stack-overflow do not allow me to post images(due to reputation<10) I have added images in link below please review it and answer!

enter image description here

"CSS" of the navigation is:

#topnav{
    height: 25px;
    background-color: #33cc66;
    border: 2px solid #545453;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    text-transform: uppercase;
    margin-top: 10px;
    color: white;
}
#topnav a{
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-right: 2px solid #545453;
    /*border-bottom: 1px solid #545453;*/
    color:#fff;
    float: left;
}
#topnav a:hover { background-color: #99e677;/*#b73b3b; */
    padding-bottom: 3px;
    border-bottom: 2px solid #545453;
}

Upvotes: 1

Views: 553

Answers (1)

Danield
Danield

Reputation: 125463

From what I can see - what you want is to change the background color on hover... so in your hover class remove:

padding-bottom: 3px;
border-bottom: 2px solid #545453;

Update your code to the following and I think you'll find it to work in all browsers.

FIDDLE

#topnav{

    background-color: #33cc66;
    border: 2px solid #545453;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    text-transform: uppercase;
    margin-top: 10px;
    color: white;
    height: 25px;
    line-height: 25px;   
}
#topnav a{
    padding: 0 12px;
    border-right: 2px solid #545453;
    color:#fff;
    float: left; 
}
#topnav a:hover { 
    background-color: #99e677;/*#b73b3b; */
}

PS: Very often, when your code renders differently in different in different browsers - that's a red light for you to stop and think: 'have I coded this correctly?'

Upvotes: 1

Related Questions