Website renders differently in different browsers

Question

Why does my website look different in Google Chrome than Mozilla Firefox?

Examples:

The menu is higher up/smaller in Chrome

Here's my code:

Header.php

       <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/style.css" />

        <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic' rel='stylesheet' type='text/css' />

    </head>
    <body>
        <div id="wrapper">
            <div id="nav">
                <nav>
                    <ul class="menu-hover">
                        <li> <a href="index.php"> Home </a> </li>
                        <li>
                            <a href="downloads.php" id="dd"> Downloads </a>
                            <ul>
                                <li><a href="paddis-skypetools.php">Paddis SkypeTools</a></li>
                                <li><a href="greatzip.php">GreatZip</a></a></li>
                                <li><a href="pczip-cleaner.php">Pc Zip Cleaner</a></a></li>
                            </ul>
                        </li>
                        <li> <a href="forums.php"> Forums </a></li>
                        <li> <a href="youtube.php"> YouTube </a> </li>
                        <li>
                            <a href="contact.php"> Contact </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </body>
    </html>

style.css

body {
    font-family: 'Source Sans Pro';
}

#wrapper {
    width:100%;
    background-color:white;
    margin:auto;
}

#top {
    width:100%;
    height:60px;
    border-style: solid;
    border-width: 1px;
}

#logo {
    clear:left;
    border-style: solid;
    border-width: 1px;
    width:30%;
    float:left;
    height:60px;
}

#nav {
    clear:right;
    width: 100%;
    border-width: 0px;
    float:right;
    height:60px;
}

#content
{
    width:97.9%;
    min-height:400px;
    border-style: solid;
    border-width: 1px;
    padding:20px;
}

#footer {
    height:100px;

}

.divider1 {
   display: block;
   float: left;
   padding: 0;
   margin: 8px auto;
   height: 0;
   width: 90%;
   max-height: 0;
   font-size: 1px;
   line-height: 0;
   clear: both;
   border: none;
   border-top: 1px solid #aaaaaa;
   border-bottom: 1px solid #ffffff;
}

.bp {
    width: 60%;
}

/* Navigation Menu
---------------------------------*/


    ul ul {
        display: none;
        background: #00B6ED;
    }

    ul li:hover > ul {
        display: block;
    }

    ul {
        background: #00B6ED;
        border-radius: 2px;
        list-style: none;
        position: relative;
        margin-top: -25px;
        margin-left: -8px;
    }

        ul:after {
            content: "";
            clear: both;
            display: block;
        }

        ul li {
            float: left;
        }

            ul li:hover {
                background: #404040;
            }

                ul li:hover a {
                    color: #fff;
                }

            ul li a {
                display: block;
                padding: 8px 5px;
                color: #FFF;
                text-decoration: none;
                height: 25px;
                font-size: 20px;
                margin: 10px;
                margin-top: 5px;
            }

        ul ul { /* Hover menu */
            background: #6B6B6B;
            border-radius: 0px;
            padding: 0;
            position: absolute;
            top: 100%;
            margin-top: 0px;
            margin-left: 0px;
        }

            ul ul li {
                float: none;
                border-top: 1px solid #6B6B6B;
                position: relative;
            }

                ul ul li a {
                    color: #fff;
                    height: 30px;
                    margin-bottom: 0px;
                }

                    ul ul li a:hover {
                        background: #404040;
                        height: 30px;
                        margin-bottom: 0px;
                    }

            ul ul ul {
                position: absolute;
                left: 100%;
                height: 35px;
                top: 0;
            }

    .js-enabled ul li:hover > ul {
        display: none;
    }

    .menu-hover {
        margin-left: -8px;
        width: 100%;
        margin-top: -36px;
    }

Possible duplicate of http://stackoverflow.com/questions/25760396/chrome-automatic-shift-of-web-elements — Nikunj Madhogaria, Sep 18 '14 at 17:20

score 6 · Accepted Answer · answered Sep 02 '14 at 15:10

This is because, you haven't used a reset.css. A CSS Reset resets all the browser styles and the best one is Eric Meyer's CSS Reset. The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.

The content of the above reset is:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Or, if you want a simple reset, you can do this:

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    list-style: none;
}

Or [**normalize.css**](http://necolas.github.io/normalize.css/) is a good option too. — Paulie_D, Sep 02 '14 at 15:14
@Paulie_D True! :) Even that's good and YUI CSS Reset too! :) — Praveen Kumar Purushothaman, Sep 02 '14 at 15:15
it's not much more, only index.php with some Lorum Ipsum text and the footer with end tags — Tutorial Nom, Sep 02 '14 at 15:27
[Relevant question about Normalize vs. reset](http://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css/8357635#8357635) — Blazemonger, Sep 02 '14 at 15:41

score 2 · Answer 2 · answered Sep 02 '14 at 15:19

2

It look different because each browser has his own CSS style defined. This styles apply to the HTML markup when no other CSS is defined inline or comes from an external CSS file. That's the reason why a lot of websites using a "Reset.css".

answered Sep 02 '14 at 15:19

Steven Web

1,966
13
23

Website renders differently in different browsers

2 Answers2

Linked