Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Firefox and chrome css differences : element height is different

Firefox and chrome css differences : element height is different

Problem

I have a problem when I design my new website. The height of my elements is different between Chrome and Firefox.

This is the difference

this is html code

this is my css code

.bottombar {
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,1)), color-stop(1, rgba(245,245,245,1)));
    background: -moz-linear-gradient(center top, rgba(255,255,255,1), rgba(245,245,245,1));
    margin: 2px -5px 0px -5px;
    border-top: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    position: relative;
    height: auto;
    display: block; 
    height: 26px;
}
.bottombar ul {}
.bottombar ul li {
    list-style-type: none;
    float: left;
    border-right: solid 1px #ccc;
}
.bottombar ul li button {
    border: 0px;
    display: block;
    background: rgba(255,255,255,0.0);
    padding: 5px;
    cursor: pointer;
}
.bottombar ul li button:hover {
    background: #fff;
}

and when i add

.clear { clear: both;}

i have this problem

any help :)

Problem courtesy of: user2839993

Solution

Most of the browser rendering differences - especially height - can be handled if you use a reset or preferably a normalize CSS file.

Include this CSS file in your HTML and see how this goes.

http://necolas.github.io/normalize.css/

Solution courtesy of: George Katsanos

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Firefox and chrome css differences : element height is different

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×