PDA

View Full Version : Weird gap



AlCapwn
May 3rd, 2010, 06:34 AM
For some reason there is a gap between the main div and footer div. It shows up fine in IE(not sure which version) but not in any other browsers.

http://mobstersblackmkt.co.cc/index.html


body {
background:white;
margin:auto;
width: 800px;
}
#nav {
background:black;
margin:auto;
height:40px;
}
#main {
background:gray;
height:400px;
margin-bottom: 0px;
}
#footer {
background:black;
height:25px;
margin-top: 0px;
}
ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li {
float:left;
}
.white {color:white;text-align:center;}
.navi {
display:block;
width:auto;
text-align:center;
text-decoration:none;
color:white;
padding:10px 15px;
}
.navi:hover {
color:red;
}
.b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block;}
.b1f {height:1px; background:black; margin:0 5px;}
.b2f {height:1px; background:black; margin:0 3px;}
.b3f {height:1px; background:black; margin:0 2px;}
.b4f {height:2px; background:black; margin:0 1px;}


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Website layout</title>
</head>
<body>
<img src="/images/logo.png" alt="Mobster's BlackMarket">
<b class="b1f"></b><b class="b2f"></b><b class="b3f"></b><b class="b4f"></b>
<div id="nav"><ul><li><a class="navi" href="index.html">Home</a></li><li><a class="navi" href="index.html">Page 1</a></li><li><a class="navi" href="index.html">Page 2</a></li><li><a class="navi" href="index.html">Live Support</a></li><li><a class="navi" href="index.html">Contact Me</a></li><li></ul></div>
<div id="main"></div>
<div id="footer"><p class="white">Testing this broken footer</p></div>
<b class="b4f"></b><b class="b3f"></b><b class="b2f"></b><b class="b1f"></b>
</body>
</html>

frankle
May 3rd, 2010, 06:50 AM
Try replacing your code the one below:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Website layout</title>
</head>
<body>
<img src="/images/logo.png" alt="Mobster's BlackMarket">
<b class="b1f"></b><b class="b2f"></b><b class="b3f"></b><b class="b4f"></b>
<div id="nav"><ul><li><a class="navi" href="index.html">Home</a></li><li><a class="navi" href="index.html">Page 1</a></li><li><a class="navi" href="index.html">Page 2</a></li><li><a class="navi" href="index.html">Live Support</a></li><li><a class="navi" href="index.html">Contact Me</a></li><li></ul></div>

<div id="main"></div>
<div id="footer" class="white">Testing this broken footer</div>
<b class="b4f"></b><b class="b3f"></b><b class="b2f"></b><b class="b1f"></b>
</body>
</html>



Hope it works.
Regards

AlCapwn
May 3rd, 2010, 07:07 AM
EDIT: Nvm I see, thanks.