My site Works with Firefox, but looks terrible in IE

www.relevantreviews.net

Unfortunately, I have a problem. It works fine in Firefox, but it looks totally messed up in Internet Explorer. I checked the w3 validation service, and I found 7 errors. Does anyone know what I did wrong to make the site look like crap on Internet Explorer?

I appreciate the help,
Josh.

 

The problem is with your CSS. Your original code:

#main {margin-right: 29%; margin-top: 10px;  padding: 5px; color: #777777;}
#main h2 {margin: 0; color: #ff9933;}
#main a {color: #ff9933; text-decoration: underline;}
#main a:hover {color: #dd0000;}

Code (markup):

You need to change to become this (as shown in bold):

#main {margin-right: [B]5%;[/B] margin-top: 10px;  padding: 5px; color: #777777;}
#main h2 {margin: 0; color: #ff9933;}
#main a {color: #ff9933; text-decoration: underline;}
#main a:hover {color: #dd0000;}

Code (markup):

Why? Since you already set

#outside {[B]margin-left: 5%;[/B] margin-right: 5%; border-top: solid 10px #ff9933; border-bottom: solid 2px #ff9933; background-color: #ffffff;}

Code (markup):

It was a conflict. Your #main and #outside. IE got really confused.

 

Thanks a bunch for the help. Unfortunately, I performed the neccessary actions, and IE is still confused. Anything else wrong with the coding?

 

When I change the code as shown below, it looked fine with my IE.

 

Haha, thats wierd. Do you have IE7? I don't have Internet Explorer on this particular computer, so I have to keep switching back-and-forth between computers to see if it works. And yes, it's a mac. Can anyone else spot something wrong with the code? I can give $2-4 for this small problem if anyone wants it.

 

Get the page validating and your problems will likely go away. If it's validating and you're still having problems PM me and I'll help you fix it. Install the Web Developer toolbar for FireFox and validation is a simple ctrl+shift+h away. This extension also has a thousand other benefits for a web developer...

Also, FYI that album cover's file size is about 10x larger than it needs to be. You should resize & optimize in Photoshop. Using a bunch of non-breaking-spaces to do your positioning is kludgey/problematic too. You should use CSS alternatives. (padding, margin, text-align)