pikminman
Oct 21st, 2009, 10:15 PM
Hello all!
This is my first time posting here. I'm developing a site for some window company and I've run into a spot of trouble. I'm wondering if anyone here could help me. In Firefox and Chrome, my webpage shows up really really long. i.e. there is lots of whitespace after the webpage. Oddly, this doesn't happen in IE.
Here's the code. I tested it and you can see the problem with just 2 files; index.html and style.css
index.html:
<!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" xml:lang="en" lang="en">
<head>
<title>Royal Windows</title>
<LINK href = "style.css" rel = "stylesheet" type = "text/css"/>
<LINK REL="SHORTCUT ICON" HREF="images/favicon.ico"/>
</head>
<body>
<div class = "container">
<div class = logo><img src = "images/logo.PNG" alt = "Royal Windows" width = "70" height = "70"/><h1>Royal Windows</h1><br/><img src = "images/line.jpg" class = "line"/></div>
<div class = "padding2">
</div>
<div class = "linkbox">
<div class = "rollover">
<table border = "0" height = "65%" width = "100%">
<tr><td> <a href = "index.html">Home</a></td></tr>
<tr><td> <a href = "about.html">About</a></td></tr>
<tr><td> <a href = "info.html">Information</a></td></tr>
<tr><td> <a href = "products.html">Products</a></td></tr>
<tr><td> <a href = "gallery.html">Gallery</a></td></tr>
<tr><td> <a href = "legal.html">Legal</a></td></tr>
<tr><td> <a href = "contact.html">Contact</a></td></tr>
</table>
</div>
</div>
<div class = "padding1">
</div>
<div class = "infobox">
<br/>
<b>Royal Windows</b> has been supplying the Trade with Quality Windows and doors since 1989.<br/><br/>Royal Windows currently employ 23 staff in total in a production and sales capacity. This dedicated team pride themselves on manufacturing windows and doors to the Highest Standards backed up by Exceptional Customer Service. <br/><br/><b>Tel:</b> 1890 907 445<br/><b>Mobile:</b> 086 8513849
</div>
<div class = "slideshow">
<object>
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="slideshow_as2.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#222222" />
<embed src="slideshow_as2.swf" quality="high" bgcolor="#222222" width = "100%" height = "100%" name="slideshow_as2" allowScriptAccess="sameDomain" type = "application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
<div class = "bottom">
<table width = "760px">
<tr>
<td align = "left">
Copyright© 2009 Royal Windows, all rights reserved.
</td>
<td align = "right">
Website design: <a href = "mailto:[email protected]" class = "mailink"><img src = "images/names.bmp" border = "0"/></a><br/>
</td>
</tr>
</table>
</div>
<table class = "profbox1">
<tr>
<td align = "center">
<img src = "images/logo1.png">
</td>
<td align = "center">
<img src = "images/logo2.bmp">
</td>
<td align = "center">
<img src = "images/logo3.bmp">
</td>
<td align = "center">
<img src = "images/logo4.bmp">
</td>
<td align = "center">
<img src = "images/logo5.bmp">
</td>
<td align = "center">
<img src = "images/logo6.bmp">
</td>
</tr>
</table>
</div>
<br/><br/>
</body>
</html>
style.css
body{
font-family: sans-serif;
text-align: center;
background-image: url("images/path-to-stripe.png");
}
.logo{
position: relative;
top: -5px;
height: 75px;
}
.line{
position: absolute;
height: 1px;
width: 600px;
top: 70px;
}
.bottom{
position: absolute;
top: 505px;
width: 100%;
font-size: 10px;
background-color: #0a0a0a;
}
.bottom2{
position: absolute;
top: 1505px;
width: 100%;
font-size: 10px;
background-color: #0a0a0a;
}
h1{
position: relative;
top: -89px;
left: 100px;
font-size: 45px;
font-weight: 100;
color: ivory;
}
.linkbox{
position: relative;
top: -430px;
width: 130px;
height: 430px;
background-image: url('images/grad.PNG');
font-size: 13px;
}
.profbox1{
position: relative;
top: -1700px;
width: 100%;
border: 0;
}
.profbox2{
position: relative;
top: -1430px;
width: 100%;
border: 0;
}
.linkbox2{
position: relative;
top: -1440px;
width: 130px;
height: 1440px;
background-image: url('images/grad.PNG');
font-size: 13px;
}
.infobox{
position: relative;
top: -1290px;
left: 580px;
background-image: url('images/grad1.PNG');
width: 160px;
height: 420px;
font-size: 11px;
color: #777777;
padding-left: 10px;
padding-bottom: 5px;
padding-top: 5px;
padding-right: 10px;
}
.padding1{
position: relative;
top: -860px;
left: 300px;
width: 50%;
height: 430px;
}
.container{
position: relative;
text-align: left;
margin:0 auto;
width: 760px;
height: 524px;
}
.padding2{
position: relative;
top: 0px;
left:14%;
width: 40%;
height: 430px;
}
.about{
position: relative;
top: 1px;
left: 130px;
padding-left: 7px;
padding-right: 7px;
padding-top: 1px;
background-color: #151515;
color: #aaaaaa;
width: 616px;
height: 1440px;
}
.slideshow{
position: relative;
top: -1720px;
left: 130px;
background-color: #f7f7f7;
width: 450px;
height: 430px;
}
a:link{
font-family: sans-serif;
font-size: 16;
color: #999999;
text-decoration: none;
}
a:visited{
font-family: sans-serif;
color: #999999;
text-decoration: none;
font-size: 16;
}
a:hover{
color: #d0d0d0;
text-decoration: none;
}
.mailink:link{
font-family: sans-serif;
font-size: 10;
color: black;
text-decoration: none;
}
td{
color: #777777;
font-size: 10;
font-family: sans-serif;
}
.rollover td {
width: 173px;
height: 25px;
background: transparent url(images/grad2.PNG) no-repeat;
color: e0e0e0;
}
.rollover td:hover {
background-position: -175px 0;
color: e0e0e0;
}
This is my first time posting here. I'm developing a site for some window company and I've run into a spot of trouble. I'm wondering if anyone here could help me. In Firefox and Chrome, my webpage shows up really really long. i.e. there is lots of whitespace after the webpage. Oddly, this doesn't happen in IE.
Here's the code. I tested it and you can see the problem with just 2 files; index.html and style.css
index.html:
<!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" xml:lang="en" lang="en">
<head>
<title>Royal Windows</title>
<LINK href = "style.css" rel = "stylesheet" type = "text/css"/>
<LINK REL="SHORTCUT ICON" HREF="images/favicon.ico"/>
</head>
<body>
<div class = "container">
<div class = logo><img src = "images/logo.PNG" alt = "Royal Windows" width = "70" height = "70"/><h1>Royal Windows</h1><br/><img src = "images/line.jpg" class = "line"/></div>
<div class = "padding2">
</div>
<div class = "linkbox">
<div class = "rollover">
<table border = "0" height = "65%" width = "100%">
<tr><td> <a href = "index.html">Home</a></td></tr>
<tr><td> <a href = "about.html">About</a></td></tr>
<tr><td> <a href = "info.html">Information</a></td></tr>
<tr><td> <a href = "products.html">Products</a></td></tr>
<tr><td> <a href = "gallery.html">Gallery</a></td></tr>
<tr><td> <a href = "legal.html">Legal</a></td></tr>
<tr><td> <a href = "contact.html">Contact</a></td></tr>
</table>
</div>
</div>
<div class = "padding1">
</div>
<div class = "infobox">
<br/>
<b>Royal Windows</b> has been supplying the Trade with Quality Windows and doors since 1989.<br/><br/>Royal Windows currently employ 23 staff in total in a production and sales capacity. This dedicated team pride themselves on manufacturing windows and doors to the Highest Standards backed up by Exceptional Customer Service. <br/><br/><b>Tel:</b> 1890 907 445<br/><b>Mobile:</b> 086 8513849
</div>
<div class = "slideshow">
<object>
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="slideshow_as2.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#222222" />
<embed src="slideshow_as2.swf" quality="high" bgcolor="#222222" width = "100%" height = "100%" name="slideshow_as2" allowScriptAccess="sameDomain" type = "application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
<div class = "bottom">
<table width = "760px">
<tr>
<td align = "left">
Copyright© 2009 Royal Windows, all rights reserved.
</td>
<td align = "right">
Website design: <a href = "mailto:[email protected]" class = "mailink"><img src = "images/names.bmp" border = "0"/></a><br/>
</td>
</tr>
</table>
</div>
<table class = "profbox1">
<tr>
<td align = "center">
<img src = "images/logo1.png">
</td>
<td align = "center">
<img src = "images/logo2.bmp">
</td>
<td align = "center">
<img src = "images/logo3.bmp">
</td>
<td align = "center">
<img src = "images/logo4.bmp">
</td>
<td align = "center">
<img src = "images/logo5.bmp">
</td>
<td align = "center">
<img src = "images/logo6.bmp">
</td>
</tr>
</table>
</div>
<br/><br/>
</body>
</html>
style.css
body{
font-family: sans-serif;
text-align: center;
background-image: url("images/path-to-stripe.png");
}
.logo{
position: relative;
top: -5px;
height: 75px;
}
.line{
position: absolute;
height: 1px;
width: 600px;
top: 70px;
}
.bottom{
position: absolute;
top: 505px;
width: 100%;
font-size: 10px;
background-color: #0a0a0a;
}
.bottom2{
position: absolute;
top: 1505px;
width: 100%;
font-size: 10px;
background-color: #0a0a0a;
}
h1{
position: relative;
top: -89px;
left: 100px;
font-size: 45px;
font-weight: 100;
color: ivory;
}
.linkbox{
position: relative;
top: -430px;
width: 130px;
height: 430px;
background-image: url('images/grad.PNG');
font-size: 13px;
}
.profbox1{
position: relative;
top: -1700px;
width: 100%;
border: 0;
}
.profbox2{
position: relative;
top: -1430px;
width: 100%;
border: 0;
}
.linkbox2{
position: relative;
top: -1440px;
width: 130px;
height: 1440px;
background-image: url('images/grad.PNG');
font-size: 13px;
}
.infobox{
position: relative;
top: -1290px;
left: 580px;
background-image: url('images/grad1.PNG');
width: 160px;
height: 420px;
font-size: 11px;
color: #777777;
padding-left: 10px;
padding-bottom: 5px;
padding-top: 5px;
padding-right: 10px;
}
.padding1{
position: relative;
top: -860px;
left: 300px;
width: 50%;
height: 430px;
}
.container{
position: relative;
text-align: left;
margin:0 auto;
width: 760px;
height: 524px;
}
.padding2{
position: relative;
top: 0px;
left:14%;
width: 40%;
height: 430px;
}
.about{
position: relative;
top: 1px;
left: 130px;
padding-left: 7px;
padding-right: 7px;
padding-top: 1px;
background-color: #151515;
color: #aaaaaa;
width: 616px;
height: 1440px;
}
.slideshow{
position: relative;
top: -1720px;
left: 130px;
background-color: #f7f7f7;
width: 450px;
height: 430px;
}
a:link{
font-family: sans-serif;
font-size: 16;
color: #999999;
text-decoration: none;
}
a:visited{
font-family: sans-serif;
color: #999999;
text-decoration: none;
font-size: 16;
}
a:hover{
color: #d0d0d0;
text-decoration: none;
}
.mailink:link{
font-family: sans-serif;
font-size: 10;
color: black;
text-decoration: none;
}
td{
color: #777777;
font-size: 10;
font-family: sans-serif;
}
.rollover td {
width: 173px;
height: 25px;
background: transparent url(images/grad2.PNG) no-repeat;
color: e0e0e0;
}
.rollover td:hover {
background-position: -175px 0;
color: e0e0e0;
}