Problems with my HTML/CSS

Question

Note below is my CSS. This is a three column website. my main content is in the center. The problems that I am having is that my main content does not adjust correctly to IE. It is fine in FF but not in IE.

.columns3headers2 #mainContent1 {
 margin: 0 22% 0 24%;
 width: 570px;
 background-color: #DDDDDD;
 height: 370px;
 padding: 0, 10, 0, 0;
 border: groove
}

.columns3headers2 #mainContent2 {
   margin: 0 22% 0 24%;
 width: 570px;
 background-color: #DDDDDD;
 height: 190px;
 border: groove
} 

I do not have much in my main content.

<div id="mainContent1">
<h1> Main Content </h1>
<div id="cround">
    <h3>Absolute Value</h3>
    <ul>
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li> 
    <li>test 4</li>    
</ul>
</div>

Answer 1

Did you start out with a CSS reset?

http://meyerweb.com/eric/tools/css/reset/

http://developer.yahoo.com/yui/reset/

Whats up with that errant closing p tag?

I would start out by using a CSS reset myself. From there, you have to explain what the problem is other than 'IE is not working'.

Answer 2

From reading the partial code, my best guess is that your left and right margins are being added to your div width values and the total exceeds the width of the outer container that wraps mainContent1 and mainContent2. IE 6 has a bug that doubles the left margin value.

To get a more helpful suggestion, I recommend that you post enough HTML and CSS to reproduce the problem, and tell us in which versions of IE you have seen the layout problem.

Answer 3

Contrary to what Kevin said, I would NOT start with a CSS Reset. It won't solve your problem. It might just create more headaches down the line.

Instead, start with validating your code. In the short CSS you posted there are errors. Who know's how many more. Same with the HTML.

The short code snippet you posted is not nearly enough for us to help you out I'm afraid.

Answer 4

From what I see in your main content, you are missing a div closing tag.