170
Hey there.
I'm redesigning my website, and before I get too far, I want the layout to work correctly.
In IE and Opera, the issue is non existant, however in Firefox, it's annoying.
www.autumnsolutions.org
As you can see, in Firefox, the middle 'Content' div will jump around on the page everytime the page is refreshed. Sometimes it appears correctly, and then once refreshed, it appears broken.
Here is my current code:
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theImages[0] = 'images/headerplus.jpg'
theImages[1] = 'images/headerplus1.jpg'
theImages[2] = 'images/headerplus2.jpg'
theImages[3] = 'images/headerplus3.jpg'
theImages[4] = 'images/headerplus4.jpg'
// do not edit anything below this line
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}
// End -->
</script>
<style>
.main
{
background: #FFFFFF;
width: 965px;
padding:5px;
}
.header
{
width:961px;
background:#FFFFFF;
border: 1px solid #eaeaea;
margin-bottom:5px;
}
.navigation
{
background: url('images/menuback.jpg');
width: 196px;
border: 1px solid #eaeaea;
float: left;
}
.leftbar
{
background:#FFFFFF;
width:196px;
float: left;
}
.rightbar
{
width:196px;
background: #FFFFFF;
float: right;
}
.latest
{
background: #FFFFFF;
width: 196px;
border: 1px solid #eaeaea;
float: left;
}
.bottom
{
width:961px;
background: #FFFFFF;
height: 25px;
clear: both;
}
.contentholder
{
width:540px;
background:#FFFFFF;
display:table;
float: left;
display:table;
padding-left:5px;
}
.content
{
background: #FFFFFF;
width: 535px;
border: 1px solid #eaeaea;
margin-left: 4px;
margin-right: 4px;
text-align:left;
padding-left:5px;
padding-right:5px;
padding-top:3px;
float: left;}
.advertise
{
background: url('images/menuback.jpg');
width: 196px;
border: 1px solid #eaeaea;
float: left;
}
.promos
{
background: #FFFFFF;
width: 196px;
border: 1px solid #eaeaea;
float: left;
}
.style5 {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
}
.style6 {font-family: Arial, Helvetica, sans-serif}
.style11 {font-size: 14px}
.style13 {font-family: Arial, Helvetica, sans-serif; font-size: xx-small; }
.style15 {font-size: x-small}
.style16 {font-family: Arial, Helvetica, sans-serif; font-size: x-small; }
.style17 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
a {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}
a:visited {
color: #000000;
}
a:hover {
color: #000000;
}
a:active {
color: #000000;
}
.style18 {font-size: 12px}
-->
</style>
</head>
<body top-margin='0' bottom-margin='0' bgcolor="#eeefef">
<center>
<div class="main">
<div class="header">
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
showImage();
// End -->
</script>
</div>
<div class="contentholder">
<div class="leftbar">
<div class="navigation">
<?php include ('menu.html') ?>
</div>
<div class="latest">
</div>
</div>
<div class="rightbar">
<div class="promos">
</div>
<div class="advertise">
</div>
</div>
<div class="content">
<span class="style17">
Welcome!
Thanks for visiting the new Autumn Designs. We've completely redone the look of the site, aswell as added an entire new section of premade, quality, layouts.
<br /><Br />
Always make sure you check out our current promotions. We value you as a customer and love to give back to you. This months promotion is for our Gold and Premium packages. With the purchase of either a gold or premium package, you will receive an iPod shuffle as a complimentory thank-you from us.
<br /><Br />
But even with all the new features of Autumn Designs, let's not forget the philosophy that we were founded on:
<br /><br />
"We believe that every business, no matter what size or budget, should have a website that's fresh and is able to get the attention of it's customers, while delivering information about the products and services the company has to offer.
<br /><br />
This is also true for individuals who just want their own website to capture the attention of friends and family. Most commonly, websites created for individuals are to announce an upcoming wedding, birthday, celebration, etc...
<br /><br />
All of our work is completely custom done. You give us the ideas and we'll turn your dream into a virtual reality!"
<br /><br />
As always, thank you for chosing Autumn Designs.
</span>
</div>
<div class="bottom">
</div>
</div>
</div>
</body>
</html>
[/html]
I'm not sure why this is happening. I've never had a problem with it before.
Any help is greatly appreciated.
Thanks!
