I wonder why the layout turn into chaos in Firefox, Google Chrome, and Safari?

Can anyone suggest me why and how to fix it ?


The link didn't work for me. I guess you're saying that it only looks OK in IE. Is the layout that you see in the other browsers similar? Any chance of a screen shot?

Set the following CSS to fix the layout issues (especially the footer).

#footer-container { clear: both; }

Then, add the following div underneath <div id="text"> in <div id="boxcontainer">

<div style="clear:both;"></div>

So it should look something like this:

<div id="image"><img align="LEFT" src="http://ocklaw.com/new/wp-content/themes/ocklaw/images/pic2.png"></div>
<div id="text">Request more information from OCK&Associates </div>
<div style="clear:both;"></div>

ok, if I add this: #footer-container { clear: both; } to the css, the position move to the correct place in Firefox, but the length turns shorter in both browser. The red line suppose to fill the whole browser width, not only as long as the content width.

Before you expect cross browser compliance, and before you try and fix errors like this(works in one browser and not another), you should validate your markup with the validator!

I ran your site through the validator and it showed 65 errors. You can view them here. Many of those errors are serious enough to break your layout, especially in IE. Fix them first, then if you're still having layout issues, post back.

Edit: looking through your source code, you have very poorly coded source code! You dont have a proper page structure.

This is a good basic page structure:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

You have list items but they aren't contained in a <ul> or <ol> at all.

Once again, I will suggest that you LEARN some basic coding practices, instead of relying on ppl here to fix every code problem you have.

commented: What he's saying is perfectly true, and nuff said about this. +2