IE CSS Problems [closed]

开发者_Python百科 This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. Closed 10 years ago.

Website Link

Okay, I'm having trouble with IE issues, go figure. I'm still novice at getting websites to look right in IE. Like on each page, the elements in the right side, or right column, get bumped down. And the little triangle images on the footer are screwed up too. I know their is a fix, I'm just having trouble finding it. Any ideas? Thanks! :)

Note: I am testing in IE7

---

the Doctype is fine, it's rendering in IE8 standards mode for me, so that's a good sign

here's one of them.. there's too much to figure out in one go ;)

this one should fix the alignment of the nav menu I think there must be a text-align: center somehwere but even without tracking it, I'd recommend just getting explicit, help out poor IE where you can ;).. so explicitly tell the nav menu (which is absolutely positioned) to align to the left side - this one doesn't need to be IE specific as it does no harm

#nav {
left: 0;
}

Update

the main problems I can see are all float related and a bit of math in the footer, a useful rule to remember for IE7 and below, is to always help IE count ;)

I made your footer-wrap the 1001px necessary to contain all the stuff inside it, the I also positioned it relatively so the 2 x triangle effects could be absolutely positioned to the left and right with a negative top position to sit them on top on the wrap.

Then after that the main problems are with how you're floating, in both places, header and footer you have right floated elements after a non-floated element, this doesn't really work and may even be unstable in other browsers, it's easy to fix you just float the left content left too, then you need to make the containers #header and #footer-wrap and #footer float too and explicitly give them their width.. the width is 941px in the footer div's cases because they have 60px padding which makes them total 1001px - this is what I mean by helping IE.. make it obvious for it!

anyway there's a working (in IE7) link in JSBin - EXAMPLE

I've embedded style.css into the head of the document to make making changes easier.. and all changes are in there, there is still a scrollbar in IE7 and I can't figure out where that's coming from, but hopefully this will give you a good start to help visualise what