White space at end of webpage, IE and Chrome show it in a different place?
Hey all I posted a question earlier here : Why am I getti开发者_如何学Pythonng white space between my HTML element? which was solved.
I have continued working on this page and have ended up with the following:
IE Screenshot:
http://postimage.org/image/2aqd5k99g/
Chrome Screenshot:
http://postimage.org/image/1xdm95138/
What I really want is basically the chrome screenshot but without the white space below my red footer. What can I do to get this desired effect for both IE and Chrome?
My HTML file is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="swaggersstyle.css">
<title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title>
</head>
<body>
<img src="final.jpg" id="banner"></img>
<ul id="nav">
<li class="links"><a href="index.html">Home</a></li>
<li class="links"><a href="planning.html">Planning</a></li>
<li class="links"><a href="construction.html">Construction</a></li>
<li class="links"><a href="evaluation.html">Evaluation</a></li>
</ul>
<div id="mainc">
<p>Make Yourself at Home</p>
<p>Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p>
</div>
<div id="rightcolumn">
<p>hghadgadgadg</p>
<p>easfasf</p>
<p>safSFS</p>
<p>afafafadf</p>
<p>safasf</p>
<p>saasfasf</p>
<p>fasfsaf</p>
</div>
<div id ="footer">
<p> fsafasfasf </p>
</div>
</body>
</html>
and my CSS file is:
html{
font-family: sans-serif;
background-color:#464E54;
}
body{
width: 960px;
margin: auto;
background-color: white;
border: 5px solid black;
}
#banner{
padding: 0px;
margin: 0;
display: block;
}
#nav {
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden;
}
#mainc {
float: left;
width: 760px;
background-color: white;
margin: 0;
}
#rightcolumn {
padding-left: 3px;
float: left;
background-color: #dad8bf;
width: 197px;
}
#footer {
clear: both;
background-color: red;
}
.links {
float: left;
margin: 0px;
}
a:link {
display: block;
width: 232px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:visited {
display: block;
width: 232px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:hover {
background-color: #999999;
}
a:active{
background-color: #999999;
}
Once again cheers for everyones help - hopefully after this I will be a bit more familiar to these mysterious white lines showing up.
add the following rule
div#footer p {
margin:0;
}
Use inspect element on chrome by right clicking. you will find the area which is blue by moving mouse over the respected area and then you can solve the problem
Have you checked it on different chrome browsers (From different PCs chrome browsers) or do you have any download manager extension installed on your browser, if yes; then disable that first and then reload your page.
Hope this works for you.
Many of these problems are solved, only by importing and using a CSS Reset. Why don't you use them?
Theory: Browsers apply some default style on HTML elements, and they are not the same in that. For example, IE might add 15px margin to p elements, while Chrome might add 13px. This means that incosistencies can exist between default styles of HTML elements across browsers. CSS Reset is technically a set of CSS rules which zero-outs these default values. For example, you can see that in CSS reset, a p is directed to have 0 margin.
p
{
margin: 0;
}
加载中,请稍侯......
精彩评论