Form is not in correct position in IE7

Question

http://www.campbellcustomcoatings.com/index2.php

At this site, I'm using css3's box shadow and rgba for the content background. To make it play nice with IE7, i'm using 3 images. The Form element is cleared underneath the main content area and it's supposed to be to the right of it.

Any body know why?

Answer 1

Your HTML is not validating. Try first to fix that, it might not fix the problem, but at least you'll have a good basis to work from.

Having valid HTML/CSS is fundamental before trying to fix rendering issues and quirks, as not all browsers treat invalid markup the same way.

Answer 2

Now I didn't touch your main2.css. That still uses float:right to layout the form for FF/Chrome/Safari. My solution uses position:absolute to layout the form in ie.css.

I think this is the simplest/quickest way to fix your web page for IE7+.

Personally, I would go back and refactor main2.css for more code consistency, you would probably end up with less code in ie.css that way (which is what I typically strive for).

I used absolute positioning, because I knew it would work. You could probably use relative positioning too. It would be tricky to use float positioning. I find using relative/absolute is easier to achieve cross-browser compatibility in some situations, but I could be wrong. I'm sure there are other ways to skin this cat too, maybe even better ones.

If you want any other tips or suggestions, or if the steps below don't 100% work for you, let me know. Your site looks awesome btw.

Starting with your latest version of index2.php, main2.css, and ie.css:

In index2.php

move <div id="form"> inside of:

div#container

In ie.css

get rid of:

#form { float:right; }

get rid of:

#container #bottom { clear: left; }

add:

#container #content { float:none; }

change:

#container #bottom { margin: 0; }

to:

#container #bottom { margin: 0 0 0 35px; }

add :

#container { position:relative; } /* this sets the parent element for the next line */

finally add:

#form { position:absolute; right:0; top:-15px; }

As you know, you still need to add your graphics back into the div#form, and also put the top and bottom rounded graphics on the div#form. If you have any problems and need help with that let me know. Hopefully the techniques about will help you finish it.

Answer 3

On my IE7 everything is showing OK,if you have solved the problem you could post the solution.

Answer 4

The div#form is outside you div#container.

Try this :

• Put div#form inside container after div#content
• Set div#form float:right; instead of left
• Adjust div#content and div#form width/padding/margins so they can both fit in div#container's width.

Answer 5

If you want to understand why this is happening, try putting a brightly colored margin on the div with id="container".

You will see that its width is as specified in the CSS, but in IE 8 and Firefox its height is zero. This is because it contains only empty divs and a floating div, which is rendered outside the normal flow of the page.

However, in IE 7 "container" has a height which includes the height of the floating div with id="content". This causes it to push the div with id="form" down below it.

If you want "form" to show up in the space which (in IE 7) is occupied by "container", you could try making "form" a child of "container".