Internet Explorer Div Issue

Question

I am having problems with my webpage. On all browsers the div aligns perfectly. However, on all versions of Internet Explorer the Div shows out of line. Here is an image of the difference:

Here is the page so that you can view the source:

Contact Page

I would really love the help, IE has done this to me several times. I would love to learn what to do in these types of situations. I read somewhere about an IE specific CSS file that would fix this but I did not fully understand what needed to be changed in this new CSS file. All help appreciated.

-Noah

Answer 1

You can add this and it should work (at least it did just through in-browser modifications) after your normal css

<!--[if IE]>
<style type="text/css">
    #mainbox{padding-left:0;}
    #servicesright{float:left;}
</style>
<![endif]-->

That aside, you're also missing some closing tags it would seem and probably the reason for the weirdness.

Answer 2

Issues I detected on your page structure so far (which are causing the display issue):

1. #main-container should not have width
2. you are using table for your form layout which is a big mistake (it's pushing the whole content together down)

as a workaround removing width in (1) and width=100% in (2) will fix your problem butI highly recommend to follow good practices for your page layout. (i.e. using div instead of table).

Answer 3

Try fixing the issues presented by the W3 validator. http://validator.w3.org/check?uri=http%3A%2F%2Fkynikosdesign.com%2Fcontact.php&charset=%28detect+automatically%29&doctype=Inline&group=0&verbose=1