CSS Causing Contradictory Problem in Firefox & IE

[KennyP]

Hi guys,

Working on a singer friend's site, some simple CSS code I obviously entered incorrectly is creating a contradictory problem in Firefox & IE...

If you would please take a look, IE practically doubles a 20px margin over the following line, while Firefox doesn't display a margin at all ...

"2. Select your cell phone service provider from list below."

This is the direct link to the test page. (http://www.billyjoeconor.com/promotion/ringtones/send-install.php)

Thanks,

Kenny

[bernie1227]

which version of internet explorer are you using?

[bernie1227]

I can't actually find the css for the margin, could you please post it? Also, to do with ie and Firefox, do you mean the margin between that and the part above it? or the dropdown below it? As, I'm not seeing any real difference in either.

[KennyP]

Hi Bernie,

Thanks for your reply. I'm using IE9. Below is the code for that section, and attached are images as it displays in IE and FF.


<div class="style72" style="width:362px; margin-top:0px; margin-left:30px; margin-right:0px; text-align:justify;">


<div class="left" style="margin-top:15px; width:307px; float:left"><input type=radio name="ringtone" class="styled" value="audioplay/rose.mp3" id="rose" >
<em>A Rose in the Devil's Garden</em></div>
<div class="right" style="margin-top:15px; width:51px; float:right">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="51" height="24" id="player3">
<PARAM NAME=movie VALUE="audioplay.swf?playerid=3">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=wmode VALUE="transparent">
<PARAM NAME="allowScriptAccess" value="always" />
<embed wmode="transparent" src="audioplay.swf?playerid=3" quality=high width="51" height="24" name="player3" allowScriptAccess="always"
align="" TYPE="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>
</div>
</div>

<div class="style72" style="width:362px; margin-top:0px; margin-left:30px; margin-right:0px; text-align:justify;">
</div>

<div class="style72" style="width:362px; margin-top:20px; margin-left:30px; margin-right:0px; text-align:justify;">
<span class="style64">2. </span>Select your cell phone service provider from list below.</div>

[bernie1227]

alright, I don't get that gap at all in ie9, however, I can see that the problem is that the part that you're applying the margin to, is actually all one section, I think you will have to apply individual syles to the
"2. Select your cell phone service provider from list below."
part
ie:


<div class="style72" style="width:362px; margin-top:20px; margin-left:30px; margin-right:0px; text-align:justify;">
<span class="style64" style="margin-top: 20px;">2. </span>Select your cell phone service provider from list below.</div>

I don't know what the difference is in your version of ie9.

[KennyP]

Sorry Bernie. I had this post all written but I got logged out when I tried to enter it, so I had to re-do it. Why is there such a short time limit set in which to write out a message?

In Dreamweaver...

If I remove the code which is highlighted, (image 1), then, the line "2. Select..." overlaps "A rose in the Devil's Garden" as if it were under the previous line, "Last Night's Memories" (image 2).