Alignment in the Evil Browser (I.E. I.E.)

[Ilan]

Hi. Hope you enjoyed the pun.

Anyway,

My website at www.ironwhisk.com is showing up strangely in IE.
I was able to fix most things by creating a seperate stylesheet but two relatively simple problems remain:

1) There is horizontal scrolling. When I reduce the wrap div width, the scrolling decreases. After what I have now though, it ruins the layout. How can I get rid of this scrolling? Why is it so wide..

2) The ad at the top is not aligned with the text. When I change the adtop div margin, nothing happens.

Please advise!

Thanks,

Ilan

[Sammy12]

Delete on line 815 of style.css:

#adtop {
      float: right !important;
      margin-left: 150px !important;
}

and replace with:

#adtop {
      margin-left: 20px;
}

The horizontal scroll in IE is caused by this ad.

[Ilan]

Hi Sammy,

Thanks a bunch for your suggestion - it totally fixed the ad problem.
I'm still having trouble with the scrolling though. I tried decreasing the wrap div but it isn't working.

Thank you!

[Ilan]

Thanks, that's very helpful and worked great.

Quick question though, for the footer it's not aligned to the right of the secondary sidebar in IE like it is in chrome/mozilla.
I can't just add padding since it will look different everywhere. Do you have a suggestion on how to fix it?

[Sammy12]

sec I'm just going to try to fix this layout

Take out the:

html, body {
     width: 100%;
     overflow-x: hidden;
}

And add:

#wrap {
     width: 1000px !important;
     margin: 0 auto !important;
     padding: 0 !important;
     position: relative;
}
#sidebar-primary {
     position: static !important;
     margin: 0 !important;
     float: left !important;
}
#main {
     float: left !important;
     width: 738px !important;
     margin-bottom: 50px;
     overflow: hidden; *zoom: 1;
}
#adtop {
     margin-left: 20px !important;
     margin-bottom: 40px !important;
}
#content {
     width: 495px !important;
     margin: 0 !important;
     padding: 0 20px !important;
}
#footer-container {
     clear: both !important;
     overflow: hidden; *zoom: 1;
     margin: 20px 0;
}

[Ilan]

Oh wow, that works great!
Fixed everything but the footer, should I just use margin for that then?

Should I add that code to my other stylesheet?

[Ilan]

Hi,

Thanks I added the code but it messed up all the formatting.

[Ilan]

So are you suggesting I add it to the head of the page instead of in the stylesheet?
What's the difference?

[Ilan]

Did I somehow add the code incorrectly then? It looks all messed up in IE.

[Ilan]

I did add it. It's at the bottom of the stylesheet.
Am I supposed to replace the code at the top currently there describing main, wrap, etc. or just paste this code at the bottom?

[Ilan]

I have a seperate style sheet for IE.
all-ie-only.css and I added it in there.

That ie style sheet is simply the other one copied and pasted with a few changes because of ie's weird formatting

[Ilan]

Alright, added the code. This happened:

1) The entire website was shifted up
2) The sidebar was shifted down
3) It did not affect IE at all (it was not in the IE stylesheet so I'm not sure why it would).

I'm leaving it up like this for now so you can see.

Thanks

[Ilan]

Here is a before and after screen shot

[Ilan]

Hi,

Thanks. That works.

These changes didn't affect IE at all though (the footer is still not aligned).

[Ilan]

Hi Sammy,

Just to clarify the problem is in IE not in any other browser.
What code should I use in IE?