So, on this page, everything looks great in safari, chrome, firefox, but wack in ie. Specifically, the social media icons at the lower left corner of the page. Can someone please take a look and let me know what the issue is? I've tried several things but don't quite know what's wrong.

www.anitarosenberg.com

"Out of wack" means???

But it's probably something to do with the absolute positioning of the footer.

Hmm, thanks for taking a look. Not sure what the story is still, but that very well could be it.

If you insist on keeping AP on the footer, and it's looking ok in everything but IE, then just use conditional comments pointing at a stylesheet with just the fixes for IE. Web designers will be doing that as long as IE continues to exist.

tim

That's a good idea... any example of how that's done? I can probably learn from it.

Example of conditional comments

<!--[if IE 8]> #social_media {padding-top:10px;}
<![endif]-->

Originally Posted by Puddlemut

Example of conditional comments

<!--[if IE 8]> #social_media {padding-top:10px;}
<![endif]-->

Not quite. You still have to include the style tag, and you have to put it after the main CSS in the head:

<!--[if IE 8]>
<style type="text/css">
#social_media {padding-top:10px;}
</style>
<![endif]-->

But the preferred way is with a link to an external stylesheet, also called for after the main stylesheet:

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

And you can use lt (less than) gt (greater than) lte (less than or equal to)
gte (greater than or equal to) before IE and the version number to target
multiple versions.

tim

Try to simply remove id attribute id="social..." from the table tag and manipulate with the padding-left padding-top of table's parent div.

Originally Posted by explozive

Try to simply remove id attribute id="social..." from the table tag and manipulate with the padding-left padding-top of table's parent div.

You have the same id on the div and table. ID's have to be unique and used only once per page. Classes can be used multiple times per page.

In your case Fireox is applying your #social_media { padding-top : 30px;} to both elements with the ID of social_media (div and table), IE is only applying it to the div.

Remove the ID (or rename it to something unique) from the table and change the css style to 60px:

#social_media { padding-top: 60px; }