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;
}
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.
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
ulorlitags, 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.