[suzy_Q]

Hi,
Thanks for your help.

I have a site that I'm working on that once I make any changes and upload the updated page, if viewed in Firefox, the middle div overlaps the left.

Please see the below snapshots:
This is what it should look like:


This is what happens after I make any updates or changes to the page and upload it to the server.


It looks fine if I do a refresh, but I sure hope that there is something that can be done to make this not occur.

I really appreciate all the help you can offer. I will send the stylesheet if someone can help me.

Thanks!!

Suzy

[Artem]

I can't see the screenshots, and I doubt you'll come back to see what I answer to this. Anyway, maybe for some hitchhikers browsing the internet looking for this, then.

The problem I think you have is float. Although I have no clue what the refresh part makes for a difference.

So basically, if you float an item, you need to float all following items (preferrably also the previous items) as well.

Also, don't start worrying about how something looks like in the middle of the design process, by adding all elements, it sometimes occurs that error (which actually aren't errors) fix themselves when you finish coding all elements.

Hope this helps.

[crigby]

Ki,
I cannot see them either. I would say that I think the previous answer probably has some truth to it. Be carefulith "floats" and strict widths.
Be kmowledgeable of CSS "clear: both;
Peace,
Clarke

[dercaw]

I know exactly what you're referring to - I've had this happen a lot, and it's terribly confusing.

The problem is that at least one of the overlapping divs is an image, and you didn't declare in the CSS the width and height of that image.

As a result, the browser can't properly know the dimensions of it until it loads the image, and the first time it creates the page layout it doesn't have that info, so it makes the layout with the image overlapping. This only happens in Firefox and its derivatives for some reason (it jumps the gun on making the layout before all the images load, I guess). Subsequent refreshes it already has the image and its dimensions, and makes the layout just fine.

The solution is extremely easy: declare the width and height of your image explicitly in the Div's CSS. For example:

#logo {
  float: left;
  padding-left: 12px;
  padding-right: 12px;
  width: 120px;
  height: 50px;
}

Then in the HTML:

<a id="logo" href="http://www.myhomepage.com"><img src="./images/logo.png" alt="My Company, Inc."/></a>