Flash making IE act strange

Hi all
This code puts an swf file into a div called mycontent. In Chrome and FF the flash file and the png image file show on the same horizontal line (correct) but in IE the image drops to the next line. I can’t understand it as the width of the containing div (step) is 993px wide and the swf is 200px wide and the image 705px. I think I must be getting my floats wrong. What am I doing wrong? Thanks (apologies for inline css code)


<script type="text/javascript" src="/media/js/swfobject.js"></script>
		<script type="text/javascript">
			var flashvars = {};
		var attributes = {};
			
			
			var params = {
			  allowfullscreen: "true"
			  
			};
			swfobject.embedSWF("/media/flash/flashfile.swf", "myContent", "200", "110", "9.0.0.0","expressInstall.swf", flashvars, params, attributes);
		</script>


<div id="step" style="width:993px;">

<div id="myContent" style="background:#fff;width:210px;" >
          <div id="myAlternativeContent">
    <p>	<a href="http://www.adobe.com/go/getflashplayer">
               		<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
              	</a>
          </p>
          </div></div>

<div id="topselect" style="float:left;width:705px;"><img src="/media/topselect.png" width="705" height="121" alt="" />
</div>
</div>

It’s probably the <p> element in myContent pushing the other div down. Try floating myContent too.

Thanks Ralph I floated the mycontent div left and the topselect div right, it works fine in FF and google chrome but the topselect div still “drops” in IE http://tinyurl.com/3pxnh7j

Why is this happening? Thank you

Hi,

That code in the link is almost impossible to debug.:slight_smile:

Why is the code all mixed case and why are all the quote marks missing? Your snippet above isn’t like that. All that combined with the inline styles make it almost impossible to debug and would be quicker for me to write from scratch than try and work out what each is doing.

Your wrapper is 920px wide yet a little way down the page you have a inner element that is 993px wide?


DIV style="[B]WIDTH: 920px[/B]" id="wrapper">
    <DIV id="header">
        <DIV style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 34px; COLOR: green; BORDER-LEFT-WIDTH: 0px" 
id="mainnavcontainer"> </DIV>
        <DIV><IMG style="FLOAT: left" alt="" src="http://copywritecolombia.com/try_files/topinfo.png" width=934 height=110></DIV>
        <DIV style="DISPLAY: none" id="debug"><IMG src="http://copywritecolombia.com/try_files/loading.gif"> </DIV>
        <DIV style="WIDTH:993px" id="step">

I don’t think it has anything to do with the specific problem but it does make it hard to understand what you are trying to do.

I think the gap in IE is that the object needs to be floated.


object{
float:left;
}

However I would suggest you tidy that code up before you gon on. Never use inline styles especially when testing as it makes it almost impossible to debug properly as you are looking in the stylesheet for rules and then looking in the html for rules and trying to work out what does what.

Looking at the output it would seem that you just want a header followed by two columns and you should do just that. Create the header and then float the two columns of the correct width and then stack individual elements in each column.

Lastly why are you using the emulate ie7 meta tag? That causes more problems than it fixes and unless its for a specific script issue get rid of it quickly.:slight_smile:

Thanks Paul yeah it is a mess I’m sorry I’ll sort it out!!!
The object float works perfectly thanks again

I don’t know what your site is about, but if it is for a paying customer I hope you really will sort it out. There is nothing worse than when in three months your customer asks you to make some changes and you didn’t clean your code. The joke will be on you. Believe me, I’ve been there :frowning: