Div's "sometimes" not in correct place when page opens up in Firefox

[riz-man]

Hi,

I have made a CSS based websites that look great in both IE and Firefox.

To give you an idea of my layout, it goes like this.

Two divs going across the page (contained within a allHolder div).

DivOne contains the header.

DivTwo (beneath DivOne) contains 5 Div's, side by side called DivColumn1, DivColumn2, DivColumn3, DivColumn4, DivColumn5.

The exact CSS coding looks like this...

.allHolder { left: 0px; top: 0px; width: 900px; margin: auto; background-color: #FFFFFF; }

.DivOne { }

.DivTwo { display: table; width: 900px; margin-top: 0px; border: 0px solid red; float: left; padding-left: 0px; }

.DivColumn5 { float: right; left: 900px; top: 0px; width: 179px; background-color: #FFFFFF; border: 0px solid black; }

.DivColumn4 { float: right; top: 0px; width: 5px; border: 0px solid black; }

.DivColumn3 { float: right; top: 0px; width: 529px; margin: auto; border: 0px solid black; }

.DivColumn2 { float: right; width: 5px; border: 0px solid black; }

.DivColumn1 { left: 0px; top: 0px; width: 179px; margin-left: 0px; background-color: #FFFFFF; border: 0px solid black; }

As I said this causes no problems in IE and most of the time in Firefox its fine too (which makes it so frustrating). In Firefox, I have noticed that when the page fully opens up sometimes one, two or three of the column divs (DivColumn1-3) fall beneath DivColumn4-5 when they should always be side by side. By pressing "reload", the page refreshes and everything is back in its correct position. However, I can't tell the person I have designed the site for, "just press reload". Is there a reason why this happens? If it always happened, at least I’d know that something is seriously wrong but it only happens sometimes and once you press reload (at least when viewing locally on my PC) it won't happen for that particular page again (if I’m online, however, if I keep hitting the reload button...sometimes it falls out of position, only to return to the correct position when I press reload again).

Please help!

[aj_nsc]

Just a note first, the left, top, right, and bottom properties are only used when the element has a position set (either relative or absolute). So you can remove all your references to left and top in the above stylesheet and it won't make a difference in your layout.

Add this to the top of your stylesheet:


* { margin: 0; padding: 0; }


Then remove all references where you set a padding or a margin on an element to 0 but make sure to keep all references where the margin or padding on an element is not 0 (i.e. auto in .allHolder).

What this will do will strip away all margins and paddings on every element except for the ones which you have explicitly defined to have a margin or padding. This might account for a column width that is larger than you have specified.

[riz-man]

Hi, you're right, I "really don't have that strong of an idea of how to use CSS" being as I'm still learning this. I've always been a table based kind of guy :D. Just trying to create sites using CSS now.

However with regard to the "900px on a div that doesn't have it's
position defined", that's actually an error resulting from my tendency of stripping CSS coding from previous stylesheets I made and not deleting what isn't needed :o

I also use and am using "* { margin: 0; padding: 0; }" in this website.

If it is a margin or padding issue causing this problem, why is it that the pages reload correctly when I reload/press F5? Any other reasons?

Thanks for all the info.

[aj_nsc]

I really don't know why it works when it reloads, but I've seen this sometimes before too, on sites that I've designed. I don't know what causes it, but I know how to fix it by making 100% sure that there's ALWAYS enough room for the content to fit.

It didn't look like you were using * { margin:0; padding:0; } because you didn't post all your CSS, just what you thought was relevant. That happens a lot on these forums and is quite often the cause of a lot of problems. The best way to solve the problem is to provide everything - in the form of a link to the website is best, but if you don't have that, then attach your HTML file and your CSS in full.

[riz-man]

Yes, I see what you're saying. Thanks.

What is strange is that my outer div is set to 900px wide. All the column div's inside add up to 897px so god knows why it is happening (there are no margins or paddings set to greater than “0” that I can see).

Nevertheless, perhaps I am missing something. I will check again.

Incidentally, I just checked the top of my stylesheet and I am using...

* {margin: 0px; padding: 0;}

Is that valid?

You specified...

* { margin: 0; padding: 0; }

Thank you.

[aj_nsc]

0 does not require units. 0 pixels is the exact same, in length, as 0 centimetres, 0 inches, 0 miles, 0 feet, etc. You get the picture.

If you have big and multiple stylesheets and get a lot of traffic, it can save significant bandwidth to drop the units from all measurements that are 0.

Any chance we can see the full code in all it's glory? I'm sure someone will be able to say what's going on if you post everything so they can work through it on their own. Odd though, I really thought the * { margin:0; padding:0; } would've did the trick.

Anyway, I suggest post the code and I'll have a go at it for you.

[riz-man]

Thanks for the help.

I'm going through my stylesheet from top to bottom.

There are several errors that I've just noticed that might be the cause (e.g. the same CSS repeated but with different instructions :o ). I will finish doing this and see how it goes.

If I still get the problem, I will upload the entire stylesheet.

Thanks again.

[riz-man]

Hi aj_nsc,

If you're still around, it would appear I still have the problem.

If you have time to look through my coding, then I would more than welcome your help and ridicule! :D

Before, looking at the links and attached file, please note the following...

I'm still learning CSS (always designed sites in tables) so go easy on the ridiculing :o

I have run my style sheet through the CSS Validation Service and it got a "This document validates as CSS level 2.1 !". There are 18 warnings that I will fix in due course but they are not the problem.

Throughout my style sheet, you'll see many references of a coloured border set to "0px". This is for myself, when I am working on the site and wish to view a div in say IE or FF I turn the border on (i.e. set it to "1px").

*********************

So here's the problem. SOMETIMES, when I am viewing this site in FF, I get the problem shown in the jpg file called "problem_ff-alignment.jpg". I've had to reduce the image's size so I could upload it but I hope you get the idea.

A simple "reload" of the page and all is normal again, as shown in the jpg file called "problem_ff-alignment2.jpg".

This is such a random problem. It happens sometimes (even when I clear the cache). It never happens in IE6.

I am guessing it has something to do with my tendency of using div's within div's but because it's so random, I cannot workout what the problem is. Perhaps an inner div is wider then it's parent div but then why does it work most of the time?

Here's a link to a working demo of the site:

http://www.raizwan.dsl.pipex.com (you might have to reload the pages a few time to recreate the effect)

Here is a link to the style sheet:

http://www.asnd75.dsl.pipex.com/css/styles.css

I'm hoping that a fresh pair of eyes will notice something I have not...assuming it is to do with something I can't see rather than just don't know enough about.

Thank you for your time.

[unigogo]

Here's my advise.

left or right must be used with position side by side (normally relative).
If you have used left or right, don't use margin again. Layouts based on margins have limited browser compatibility. I changed the width of the DivColumn5 to 182px. See

900 - 179 - 5 - 529 - 5 = 182

Below code is based on my 5 column layout generator (http://www.pagecolumn.com/5_column_div_generator.htm). I prefer starting from float:left.


<!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>5 Column CSS Layout - parellel design</title>
<style type='text/css'>
.DivOne{
position: relative;
float: left;
left: 50px;
width: 900px;
background-color: #6699cc
}
.DivTwo{
position: relative;
float: left;
left: 50px;
width: 900px;
background-color: #cccccc
}
.DivColumn1{
position: relative;
float: left;
left: 0px;
width: 179px;
background-color: #ccccff
}
.DivColumn2{
position: relative;
float: left;
left: 0px;
width: 5px;
background-color: #fff
}
.DivColumn3{
position: relative;
float: left;
left: 0px;
width: 529px;
background-color: #ccccff
}
.DivColumn4{
position: relative;
float: left;
left: 0px;
width: 5px;
background-color: #fff
}
.DivColumn5{
position: relative;
float: right;
right: 0px;
width: 182px;
background-color: #ccccff
}
.footer{
position: relative;
float: left;
left: 50px;
width: 900px;
background-color: #cfcfcf
}
body {
border-width: 0px;
padding: 0px;
margin: 0px;
font-size: 90%;
background-color: #e7e7de
}
</style>
</head>
<body>
<div class="DivOne">
header
</div>
<div class="DivTwo">
<div class="DivColumn1">
1
</div>
<div class="DivColumn2">

</div>
<div class="DivColumn3">
3
</div>
<div class="DivColumn4">

</div>
<div class="DivColumn5">
5
</div>
</div>
<div class="footer">
footer
</div>
</body>
</html>

[riz-man]

unigogo,

Thanks for your advice.

I have actually gone back to using tables for part of the layout of the site I was working on. I know, I know...not good...but I had a pressing deadline to meet!

With regard to what you said, can you please confirm if you're saying that...

.DivColumn3 { float: right; top: 0px; width: 529px; margin: auto; border: 0px solid black; }

...is the problem?

Are you saying that "float: right;" and "margin: auto;" being used at the same time are the source of my problems?

Riz

[unigogo]

hi, Riz,

Sorry for the late reply because of my long trip.

I did not test the cause of your problem. But as I observed there are 2 ways to seperate columns using css syntax.

One is using {left:xx}. The other is {margin:xx}. If you have used either of the techniques. You don't need duplicate the syntax by using the other way. You just need proper calculation to find their values.

It's easy to use margin coz you almost don't need any calcualtion. But you have to use some extra syntax to deal with the bugs in IE.

The way of using {left:xx} is easy and most cross browser compatible. There's no syntax written for bug or hack. Just think about it. If I develop the function of the syntax, width, left, top must be in lowest level. Float, margin, should be built above the syntax left, width.

I have built a link to see the limitation of layouts (http://www.pagecolumn.com/3_column_div_generator_m.htm)built with margin syntax. (There may be some rounding issues and I'm going to fix it, but I'm not to going to promote this way of making layouts).

In terms of the cause of the problem, why did you use display: table in the wrapper div?

unigogo