CODEWITHSUNDEEP
cssinternet-explorer
kia4567
kia4567

Reputation: 603

Need help working with footer in IE

Being a web designer I hope to make websites that at least work in as many browsers as possible. I still try to design for IE 7 for those visitors only using IE and who don't know anything else. However I'm not too familiar id IE and it's spacing and it's hacks.

My website looks good, you can view it here, in every browser except IE. :s Thankfully it's only the footer now.

I'm hoping someone can give me advice and help me fix this hiccup and then maybe give me some references or articles about IE & it's spacing issues & hacks.

My footer doesn't work in either IE 7 or 8.

IE 7: enter image description here

IE 8: enter image description here

CSS

#footer { width: 100%; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; margin-top: 100px;/*border: 1px solid #0C0;*/}
#footer a { text-decoration: underline; color: #c7bd89 !important; }
#footer a:hover { text-decoration: none; color: #fff; }

#footer h6 { background: url(img/FOOTER-HR-BG.jpg) left center repeat-x; text-align: left;}
#footer h6 span { background: #8e2023; display: inline-block; padding-right: 5px; }

I've tried a bunch of different ways but I'm not sure whats happening in IE with this footer. If anyone can shed some light on what might be happening, it would be greatly appreciated!

Upvotes: 0

Views: 81

Answers (2)

albert
albert

Reputation: 8153

you have an unclosed aside element for starters. if you view it in ie8 and use f12 developer tools you can see how the footer is now a child of the element. close that guy out....should help out.

Upvotes: 1

Godwin
Godwin

Reputation: 9907

I'm not sure of the root of the problem but instead of using "float: right;", using "position: absolute; right: -2px;" seems to solve the issue (also ensure #searchform has a relative position).

Upvotes: 1

Related Questions