By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,689 Members | 1,915 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,689 IT Pros & Developers. It's quick & easy.

DIV jumping intermittently in Firefox

AutumnsDecay
100+
P: 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') ?> &nbsp;
</div>
<div class="latest">
&nbsp;
</div>
</div>
<div class="rightbar">
<div class="promos">
&nbsp;
</div>
<div class="advertise">
&nbsp;
</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">
&nbsp;
</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!
Apr 12 '08 #1
Share this Question
Share on Google+
2 Replies


AutumnsDecay
100+
P: 170
Well, I played around with it, changing a few elements here and there.

Seems the problem was using the display:table; attribute. For some reason, it didn't like that one too much.
Apr 13 '08 #2

drhowarddrfine
Expert 5K+
P: 7,435
display:table does not work in IE. It does work in Firefox. So IE is confusing you.

In addition, you show a doctype in your posted markup, but there is no doctype on the web. Without one, you will never get IE to attempt to perform like modern browsers like Firefox.
Apr 13 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.