Chrome browser rendering differently when compared to safari

Question

This is my code[Very simple code but not able to crack it].Am very much new to these things.As I always used fixed width and I didn't get any issue.But my real question is why there is huge difference in width occupied by different browser.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flip Transition</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/style1.css">
</head>
<body>
<ul>

    <li>
    <div class="front">1</div>
    <div class="back">
    <img src="../images/100.jpg" alt="Image">
    </div>
    </li>

    <li>
    <div class="front">2</div>
    <div class="back">
    <img src="../images/100.jpg" alt="Image">
    </div>
    </li>

    <li>
    <div class="front">3</div>
    <div class="back">
    <img src="../images/100.jpg" alt="Image">
    </div>
    </li>

    <li>
    <div class="front">4</div>
    <div class="back">
    <img src="../images/100.jpg" alt="Image">
    </div>
    </li>

    <li>
    <div class="front">5</div>
    <div class="back">
    <img src="../images/100.jpg" alt="Image">
    </div>
    </li>

    <li>
    <div class="front">6</div>
    <div class="back">
    <img src="../images/100.jpg" alt="Image">
    </div>
    </li>

    <li>
    <div class="front">7</div>
    <div class="back">
    <img src="../images/100.jpg" alt="Image">
    </div>
    </li>

    <li>
    <div class="front">8</div>
    <div class="back">
    <img src="../images/100.jpg" alt="Image">
    </div>
    </li>

</ul>

</body>
</html>

In safari it uses resolution of 1280*0 but in chrome it uses only 1163.636*0.Why chrome is not using full width.And also am using reset css stylesheet.But there is no problem with firefox.

Here is style sheet[nothing much].

li{
    list-style-type: none;
    float: left;
    width: 200px;
    height: 200px;
    background: red;
}

From Chrome Browser

From safari Browser

I don't know what wrong am I doing is it something to do with reset css stylesheet I commented out and tried but same result.But uses only 1147.642 width and margin of 8px in chrome and 1264 width and 8px in safari.

score 0 · Answer 1 · answered Feb 20 '14 at 12:59

Safari and Chrome will have some default settings for width/heights/margins/paddings etc on all elements. A CSS reset is a file that sets all these to a standard, so they are the same across all browsers. In your example I think its the paddings on the ul or li tags, or something like that.

You could either put the CSS Reset back in, or use something like http://necolas.github.io/normalize.css/, which is generally accepted as the best modern alternitive to CSS resets.

Chrome browser rendering differently when compared to safari

1 Answers1