Hi guys,
I’ve been having this issue for quite sometime. This only happens in Firefox. When ever i create many div tags at the same time, they’ll obviously line up vertically. But if those tags go past the footer, it will create extra empty space in the footer, creating a longer scroll bar. There doesn’t seem to be a way to fix this other than undo all the changes.
Any idea why this is happening?
Post up your html and css so we can take a look.
Here’s the html code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to my site</title>
<link rel="stylesheet" href="css/index.css" type="text/css" media="screen" >
<script type="text/javascript" src="imagerollover.js">
</script>
</head>
<body>
<div id="site_container">
<div id="header_wrap">
<div id="logo">
</div>
<div id="topmenu">
</div>
<div id="facebook">
</div>
<div id="twitter">
</div>
<div id="navbar">
</div>
</div>
<div id="body_wrap">
<div id="cities">
</div>
<div id="wrap_rows">
<div id="row_1_master">
</div>
<div id="row_2_master">
<div id="box_1">
<div class="title">This is the title of the deal</div>
<div id="pic_1">
</div>
</div>
<div id="box_2">
<div class="title">This is the title of the deal</div>
<div id="pic_2">
</div>
</div>
< div id="box_3">
<div class="title">This is the title of the deal</div>
<div id="pic_3">
</div>
</div>
<div id="box_4">
<div class="title">This is the title of the deal</div>
<div id="pic_4">
</div>
</div>
<div id="box_5">
<div class="title">This is the title of the deal</div>
<div id="pic_5">
</div>
</div>
</div>
<div id="row_3_master">
<div id="box_6">
<div class="title">This is the title of the deal</div>
<div id="pic_1">
</div>
</div>
<div id="box_7">
<div class="title">This is the title of the deal</div>
<div id="pic_2">
</div>
</div>
<div id="box_8">
<div class="title">This is the title of the deal</div>
<div id="pic_3">
</div>
</div>
<div id="box_9">
<div class="title">This is the title of the deal</div>
<div id="pic_4">
</div>
</div>
<div id="box_10">
<div class="title">This is the title of the deal</div>
<div id="pic_5">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer_wrap">
<script type="text/javascript"> imagerollover() </script>
</div>
</div>
</body>
</html>
We need the css too like I said before.
Here’s the CSS.
html, body{
margin: 0 auto;
padding: 0 auto;
background-color: #0a4756;
}
a:link {color:#0080fe;} /* unvisited link */
a:visited {color:#0a4756;} /* visited link */
a:hover {color:#003c79;} /* mouse over link */
div#site_container{
padding: 0 auto;
width: 100%;
height: 1000px;
}
div#header_wrap{
width: 100%;
height: 84px;
background-color: #ffffff;
}
div#facebook{
margin: 0 auto;
width: 29px;
height: 29px;
position: relative;
bottom: 49px;
left: 571px;
}
div#twitter{
margin: 0 auto;
width: 29px;
height: 29px;
position: relative;
bottom: 78px;
left: 605px;
}
div#navbar{
width: 100%;
height: 30px;
position: relative;
bottom:73px;
background-color: #0a4756;
}
div#logo{
width: 250px;
position: relative;
left: 310px;
top: 10px;
}
div#topmenu{
width: 530px;
position: relative;
bottom: 15px;
left: 920px;
background:
}
.nav{
list-style:none;
margin:0;
padding:0;
text-align:center;
}
.nav li{
display:inline;
}
.nav a{
display:inline-block;
}
div#body_wrap{
margin: 0 auto;
width: 100%;
height: 850px;
background-color: black;
}
div#cities{
margin: 0 auto;
width: 400px;
height: 75px;
position: relative;
top: 6px;
}
div#ottawa{
margin: 0 auto;
width: 122px;
height: 49px;
position: relative;
right: 165px;
top: 10px;
}
div#toronto{
margin: 0 auto;
width: 122px;
height: 49px;
position: relative;
left: 75px;
bottom: 39px;
}
div#wrap_rows{
margin: 0 auto;
width: 1250px;
height: 734px;
position: relative;
top: 10px;
}
/*
* ROW 1
*/
div#row_1_master{
margin: 0 auto;
width: 1250px;
height: 234px;
position: relative;
bottom: 0px;
background-color: grey;
}
.title {
position: relative;
top: 7px;
font-family: helvetica;
font-size: 15px;
font-weight: bold;
text-align: center;
color: #d6d6d6;
}
/*
* ROW 2
*/
div#row_2_master{
margin: 0 auto;
width: 1250px;
height: 200px;
position: relative;
top: 25px;
background-color: grey;
}
/*
* BOX 1
*/
div#box_1{
width: 244px;
height: 200px;
position: relative;
left: 0px;
}
div#pic_1{
margin-top: 16px;
width: 244px;
height: 164px;
background: #ffffff;
}
/*
* BOX 2
*/
div#box_2{
width: 244px;
height: 200px;
position: relative;
left: 251px;
bottom: 200px;
}
div#pic_2{
margin-top: 16px;
width: 244px;
height: 164px;
background: #ffffff;
}
/*
* BOX 3
*/
div#box_3{
width: 244px;
height: 200px;
position: relative;
left: 503px;
bottom: 400px;
}
div#pic_3{
margin-top: 16px;
width: 244px;
height: 164px;
background: #ffffff;
}
/*
* BOX 4
*/
div#box_4{
width: 244px;
height: 200px;
position: relative;
left: 755px;
bottom: 600px;
}
div#pic_4{
margin-top: 16px;
width: 244px;
height: 164px;
background: #ffffff;
}
/*
* BOX 5
*/
div#box_5{
width: 244px;
height: 200px;
position: relative;
left: 1006px;
bottom: 800px;
}
div#pic_5{
margin-top: 16px;
width: 244px;
height: 164px;
background: #ffffff;
}
/*
* ROW 3
*/
div#row_3_master{
margin: 0 auto;
width: 1250px;
height: 200px;
position: relative;
top: 25px;
background-color: grey;
}
/*
* BOX 6
*/
div#box_6{
width: 244px;
height: 200px;
position: relative;
left: 0px;
}
div#pic_6{
margin-top: 16px;
width: 244px;
height: 164px;
background: #ffffff;
}
/*
* BOX 7
*/
div#box_7{
width: 244px;
height: 200px;
position: relative;
left: 251px;
bottom: 200px;
}
div#pic_7{
margin-top: 16px;
width: 244px;
height: 164px;
background: #ffffff;
}
/*
* BOX 8
*/
div#box_8{
width: 244px;
height: 200px;
position: relative;
left: 503px;
bottom: 400px;
}
div#pic_8{
margin-top: 16px;
width: 244px;
height: 164px;
background: #ffffff;
}
/*
* BOX 9
*/
div#box_9{
width: 244px;
height: 200px;
position: relative;
left: 755px;
bottom: 600px;
}
div#pic_9{
margin-top: 16px;
width: 244px;
height: 164px;
background: #ffffff;
}
/*
* BOX 10
*/
div#box_10{
width: 244px;
height: 200px;
position: relative;
left: 1006px;
bottom: 800px;
}
div#pic_10{
margin-top: 16px;
width: 244px;
height: 164px;
background: #ffffff;
}
div#footer_wrap{
width: 100%;
height: 50px;
background-color: #0a4756;
}
I don’t get any space at the bottom when I try that, though I didn’t have those JS files of course - try commenting them out and see if that sorts it.
FYI broken code:
< div id="box_3">