How to fix positioning error in IE?

Easiest solution is a separate CSS stylesheet just for IE (cause it sucks).

<!--[if IE]>

  whatever you want in here

<![endif]-->

or for more control you can specify a number

<!--[if IE 7]>

  whatever you want in here

<![endif]-->

Your document structure and CSS approach are really out of whack on this. I'll leave it up to you to invest the time to learn how to do this correctly, but I'll point out that it's your use of CSS positioning combined with IE's box model that are causing the problem in this case.

The "logo" div is outside the declared boundary of the "header" div. A quick fix is to modify the left margin of "logo" (which is currently 80%) to a smaller value so that the logo div is within the boundaries of "header". If you set it to, e.g., 75%, it'll fit, and the page will appear centered in IE. Tweak that value until it's where you want it.

If that isn't to your liking, then you'll have to apply absolute positioning... which will require you to modify a bunch of other stuff on your page. I'd say it'd really be worth your time to spend some time understanding how positioning works and when it should be used. You've applied the position attribute to almost every element of your page which is just making things more difficult for you.

So, if you just want a quick fix, I'd say change the left margin and accept that it will look slightly different but be consistent cross-browser.

For technical questions involving web site development in Internet Explorer, this site is a great resource for information. The community there can help you with HTML, CSS and Script specific to Internet Explorer, and I'm sure they would be happy to take a look at your site.

Microsoft Web Dev Forum:

http://social.msdn.microsoft.com/Forums/en-US/iewe...

Cheers,

Bryn

IE Outreach Team

All browsers display HTML code differently then the others. One good way to start dealing with this to begin by "resetting" the default styles for HTML tags provided by each browser. It's good to include some "reset" rules such as the following at the top of your stylesheet:

* {

vertical-align: baseline;

font-weight: inherit;

font-family: inherit;

font-style: inherit;

font-size: 100%;

border: 0 none;

outline: 0;

padding: 0;

margin: 0;

}

To be even more thorough, you may add:

body {

padding: 5px;

}

h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {

margin: 20px 0;

}

li, dd, blockquote {

margin-left: 40px;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

I got these rules from http://www.css-reset.com/ but you can write your own or get it from somewhere else if you prefer.

Might correct some coding errors before trying to make corrections to fix problems.

CSS errors: http://jigsaw.w3.org/css-validator/validator?profi...

8 critical HTML errors: http://validator.w3.org/check?verbose=1&uri=http%3...

Many are minor, but you do have an XHTML document type to let browsers know what to use to parse your code.

Ron