Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Loooooooooong web page

    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:
    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" 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>&nbsp;&nbsp;&nbsp;<a href = "index.html">Home</a></td></tr>
    						<tr><td>&nbsp;&nbsp;&nbsp;<a href = "about.html">About</a></td></tr>
    						<tr><td>&nbsp;&nbsp;&nbsp;<a href = "info.html">Information</a></td></tr>
    						<tr><td>&nbsp;&nbsp;&nbsp;<a href = "products.html">Products</a></td></tr>
    						<tr><td>&nbsp;&nbsp;&nbsp;<a href = "gallery.html">Gallery</a></td></tr>
    						<tr><td>&nbsp;&nbsp;&nbsp;<a href = "legal.html">Legal</a></td></tr>
    						<tr><td>&nbsp;&nbsp;&nbsp;<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:darajavaherian@gmail.com" 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
    Code:
    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;
    }

  • #2
    New Coder
    Join Date
    Aug 2009
    Posts
    94
    Thanks
    0
    Thanked 16 Times in 16 Posts
    I removed the div tag with class padding1 and padding2

    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" 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 = "linkbox">
    				<div class = "rollover">
    					<table border = "0" height = "65%" width = "100%">
    						<tr><td>&nbsp;&nbsp;&nbsp;<a href = "index.html">Home</a></td></tr>
    						<tr><td>&nbsp;&nbsp;&nbsp;<a href = "about.html">About</a></td></tr>
    						<tr><td>&nbsp;&nbsp;&nbsp;<a href = "info.html">Information</a></td></tr>
    						<tr><td>&nbsp;&nbsp;&nbsp;<a href = "products.html">Products</a></td></tr>
    						<tr><td>&nbsp;&nbsp;&nbsp;<a href = "gallery.html">Gallery</a></td></tr>
    						<tr><td>&nbsp;&nbsp;&nbsp;<a href = "legal.html">Legal</a></td></tr>
    						<tr><td>&nbsp;&nbsp;&nbsp;<a href = "contact.html">Contact</a></td></tr>
    					</table>
    				</div>
    			</div>
    			
    			<div class = "infobox">
    				
    				<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:darajavaherian@gmail.com" 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>
    
    	</body>
    
    </html>
    Changed the value of attribute top accordingly

    Code:
    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; 
    	width: 130px;
    	
    	background-image: url('images/grad.PNG');
    	font-size: 13px;
    }
    
    .profbox1{
    	position: relative; 
    	top: -300px;
    	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: -130px;
    	left: 580px;
    	background-image: url('images/grad1.PNG');
    	width: 160px;
    
    	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: -340px;
    	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;
    	background: transparent url(images/grad2.PNG) no-repeat;
    	color: e0e0e0;
    }
    
    .rollover td:hover {
    	background-position: -175px 0;
    	color: e0e0e0;
    }
    Hope this helps

  • #3
    Rockstar Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    9,074
    Thanks
    1
    Thanked 328 Times in 324 Posts
    Make sure to run your page through the W3C validator, I see some problems in your code that could cause issues later if they aren't already.

    You also shouldn't be using tables for layout. Like your menu should be done using an unordered list instead of a table.
    OracleGuy


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •