IE alignment skewed: help!

[sp00nk]

Hi people!

Please help me out with this alignment problem I'm running into;

It seems that I'm missing an attribute (default one somewhere) that gives me different presentation of the same website...

Note: www.re-focus-online.com (don't mind the weird text)

Firefox displays it perfect. IE has 2 problems: menu (implemented via u-list) aligned too high to top (vertical-align attribute doesn't help here, padding-top does help but screws up firefox presentation);
second problem is Copyright notice too close to the edge of the bottom div.

Please look at the website; CSS is here:

www.re-focus-online.com/styles.css

Thank you kindly, everybody,

-Dan

[jscheuer1]

Just put your padding that fixes things up in IE in here (you can include something for the copy notice in here too):


<!--[if IE]>
<style type="text/css">
/* IE only Styles here */
</style>
<![endif]-->

And put that right after your (I'm adding the required type attribute in red):


<link rel="stylesheet" href="styles.css" type="text/css">

or put the IE styles in a separate style sheet - say ie_styles.css, and link it in after your other sheet like so:


<link rel="stylesheet" href="styles.css" type="text/css">
<!--[if IE]>
<link rel="stylesheet" href="ie_styles.css" type="text/css">
<![endif]-->

These are not alternate styles. They are supplemental. So only include what needs to be added and/or different in IE.

[sp00nk]

Wow, this worked like magic!

Thank you so very much for this useful piece of advice.

The website now works flawlessly, as I could adjust the IE styles separately.

- - -

Many thanks again,

-Dan.

[sp00nk]

Another question, If I may, I will be very grateful for a reply,

I've fixed the website, as you can see, upon visiting the new link.

The relevant links are:

www.re-focus-online.com
www.re-focus-online.com/styles.css
www.re-focus-online.com/ie_styles.css

The problem that still persists in IE is a horizontal scroll bar when using full-screen mode, that is unexplained. How do I get rid of it?

Thank you kindly for your help, it is most appreciated.

-Dan.

[jscheuer1]

It's fine in IE 7, not in IE 6. Diagnosing IE can be a bit tricky, there may be a better way, but this style seems to work:


body {
width:99.9%;
}

Add it to your ie_styles.css file. It doesn't seem to hurt IE 7.

Just as a note though, you can make IE version specific styles:


<!--[if lt IE 7]>
<style type="text/css">
body {
width:99.9%;
}
</style>
<![endif]-->

Here, the above style will only be applied to less than IE 7.

[sp00nk]

You are, no doubt, a master of CSS, and I am very thankful, and truly awed by your expertise.

Many thanks.