Website works perfect in Firefox, but not IE Options

[drew7bc]

Hi All,

I'm designing my personal website (my skills are quite elementary) and I'm having a problem with IE. My website works perfect in Firefox 3.0.1. The problem is with the customization of my audio players on my music page. The blue color scheme works fine with Firefox, but, on IE7, there is no customization at all. There are also some line spacing issues in the left hand sidebar with IE7. I even tried IE8 beta and everything seemed worse; no audio players even showed up. I wish everyone used Firefox ha! I've tried different things, but can't seem to get anywhere. Any help would be greatly appreciated! Thanks!!

http://www.andrewdavidnelson.com/music

I'm assuming this script is the culprit:

<script type="text/javascript">
//<![CDATA[

AudioPlayer.setup("http://www.andrewdavidnelson.com/player.swf", {
width: 165,
initialvolume: 100,
transparentpagebg: "yes",
bg: "ffffff",
leftbg: "0066ff",
lefticon: "ffffff",
voltrack: "000000",
volslider: "ffffff",
rightbg: "0099ff",
rightbghover: "000000",
righticon: "ffffff",
righticonhover: "ffffff",
loader: "000000",
track: "000000",
tracker: "0099ff",
border: "ffffff",
skip: "0033ff",
text: "ffffff",
titles: "Lightheaded",
artists: "Superhoney",
});
//]]>
</script>

[Website Design Perth]

I'm sorry I can't help you but I agree, I wish everyone used anything other than IE!!

That's a nice little player, can you point me to where you got it?

Good luck.

[drew7bc]

I'm sorry I can't help you but I agree, I wish everyone used anything other than IE!!

That's a nice little player, can you point me to where you got it?

Good luck.

Thanks,
Found it here: http://wpaudioplayer.com/standalone

[pandy]

FYI the player looks fine in IE6, but you have what looks like a massive float drop. The middle column drops all the way down below the others.

I also get 3 JS errors as the page loads.

[drew7bc]

FYI the player looks fine in IE6, but you have what looks like a massive float drop. The middle column drops all the way down below the others.

I also get 3 JS errors as the page loads.

Thanks! I think I may have fixed it, but I have IE7, so I have no way to tell! Now my only problem is getting the columns to line up at the top across all browsers; seems impossible to me.

[pandy]

Nope. Afraid it's still dropping.

I use BrowserPool to check in IE7 and Mac browsers. They have a free trial that never expires. There seems to be a problem with their site right now, but check it out later. It's a great service. You get to really use the browsers through VNC. A little sluggish, but beats a screen cap.
http://www.browserpool.de/

[drew7bc]

Nope. Afraid it's still dropping.

I use BrowserPool to check in IE7 and Mac browsers. They have a free trial that never expires. There seems to be a problem with their site right now, but check it out later. It's a great service. You get to really use the browsers through VNC. A little sluggish, but beats a screen cap.
http://www.browserpool.de/

Thanks for the link - I got another laptop to work with IE6; however, I still cannot figure out how to get that center column not to drop! It's so annoying ha. Site works great on all other browsers, even IE7. Any other advice would be greatly appreciated! Thanks!

[pandy]

It's always because there isn't enough room for the float(s). IE has bugs that can make a float require extra space. So either make the dropping float a little less wide or provide more space for it by reducing the width of the other columns or reducing padding or margins, whatever you use. A few pixels is usually enough.

Usually you ddon't notice the page look any different after doing this. It's easier than to track down the actual bug and apply an involved hack for it, if there is any.

[drew7bc]

It's always because there isn't enough room for the float(s). IE has bugs that can make a float require extra space. So either make the dropping float a little less wide or provide more space for it by reducing the width of the other columns or reducing padding or margins, whatever you use. A few pixels is usually enough.

Usually you ddon't notice the page look any different after doing this. It's easier than to track down the actual bug and apply an involved hack for it, if there is any.

Thanks for your help - I've tried numerous adjustments with the column width / margins, and it still won't show correctly in IE6. Unbelievable how frustrating this problem is! ha

[pandy]

It's possible that it doesn't work to make the columns less wide since each of them seems to contain one or more images that forces a certain width.

I'd go with making the main container a little wider.

CODE

.thrColFixHdr #container { width: 795px }

Actually, 793 pixels seem to be enough, but I added a couple for safety. Yes, you may get a little scroll in a full window at 800*600, but you would get that anyway if the chrome is wider than you had calculated with.

[drew7bc]

It's possible that it doesn't work to make the columns less wide since each of them seems to contain one or more images that forces a certain width.

I'd go with making the main container a little wider.

CODE

.thrColFixHdr #container { width: 795px }

Actually, 793 pixels seem to be enough, but I added a couple for safety. Yes, you may get a little scroll in a full window at 800*600, but you would get that anyway if the chrome is wider than you had calculated with.

Thanks again Pandy. I think I finally figured it out! Before I saw your response, I changed the width in this conditional comment and it seems to work fine:

<!--[if IE]>
<style type="text/css">
.thrColFixHdr #mainContent {
margin: 0 197px;
padding: 22px 10px;
}
</style><![endif]-->