PDA

View Full Version : IE alignment skewed: help!



sp00nk
11-04-2007, 02:04 AM
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
11-04-2007, 05:26 AM
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
11-04-2007, 10:11 AM
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
11-04-2007, 01:57 PM
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
11-04-2007, 02:49 PM
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
11-04-2007, 07:43 PM
You are, no doubt, a master of CSS, and I am very thankful, and truly awed by your expertise.

Many thanks.