...
PDA

IE9 Breaking My CSS? Flash Embedded in xHTML

tommyzDad
06-21-2012, 02:50 AM
Hello.

Here is a link to live version of the site:
http://louiswu.aisites.com/navban2/index_working.html

The main problem I'm experiencing is IE9 breaking my code. I code on a machine running IE8, and in IE8, Chrome, and Firefox the embedded Flash is centered---everything's fine, even the live version. But others, especially my client, report the site pushed over to the right in IE9.


Here's the code, with HTML first then, the CSS:

(The content div (pink background, blue dashed border) I'm using just for learning purposes, i.e. Can I put a Flash object on top of an HTML div.......)


You'll see in the <head></head> I've tried some (probably badly applied) code for trying to get IE to use a different stylesheet, to no avail--it's as if style2.css is being ignored completely:


xHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">



<head>

<title>NavidNegahban.com</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<link href="assets/navBanStyle_working.css" rel="stylesheet" type="text/css" />

<!--[if IE]>
<link href="assets/style2.css" rel="stylesheet" type="text/css" />
<![endif]-->

<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>



<body>


<div id="container"><!-- open "container" -->

<div id="content"><!-- open "content" -->
<div id="navBan_swf"><!-- open "navBan_swf" -->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="950" height="655" id="FlashID" title="Navid Negahban Flash interface">
<param name="movie" value="globalAssets fl_raw.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="11.0.0.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="globalAssets fl_raw.swf" width="950" height="655">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="11.0.0.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<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" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div><!-- close "navBans_swf" -->



<div id="bigPhotoGallery_swf"><!-- open "bigPhotoGallery_swf" -->
</div><!-- close "bigPhotoGallery_swf" -->
</div><!-- close "content" -->

<div id="footer"><!-- open "footer" -->
</div><!-- close "footer" -->


</div><!-- close "container" -->

<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>

</html>



CSS

/* CSS Document */
/* for index_working.html */
/* 17 June 2012 */

* {
padding: 0;
border: 0;
margin: 0;
}



body {
font-family: Tahoma, Geneva, sans-serif;
font-size: 100%;
/*background-color: #FC0;*/
}


/*#container {
background-color: #000;
position: relative;
width: 100%;
height: 1600px;
}
*/
/* ******************************************* CONTENT ************************************* */

#content {
background-color: pink;
width: 950px;
height: 665px;
border: 3px dashed #06F;
position: relative;
top: 10px;
left: 22%;

}



#navBan_swf {
/*background-color: orange;*/
/*width: 955px;*/
/*height: 670px;*/
/*padding: 10px;*/
/*padding-top: 10px;*/
/*position: relative;*/
/*left: 20%*/;
/*top: 1%;*/
text-align: center;
z-index: 1;
}

#bigPhotoGallery_swf {
position: absolute;
top: 25px;
left: 250px;
/*text-align: center;*/

z-index: 6;

visibility: hidden;

}



/* ******************************************* END CONTENT ************************************* */



/* ******************************************* FOOTER ************************************* */

#footer {
}


/* ******************************************* END FOOTER ************************************* */



As you can see, a relatively small bit of code. But for this coding newb, it's enough to drive me to drinking. :D
tracknut
06-21-2012, 03:05 AM
I'm viewing it on IE9 and Firefox 11, both look very much the same with the dotted box pushed to the right....

Dave
tommyzDad
06-21-2012, 04:49 PM
I'm viewing it on IE9 and Firefox 11, both look very much the same with the dotted box pushed to the right....

Dave

Odd. I just installed Firefox 13 (after using Firefox 3.0....) and it's centered.....
tracknut
06-21-2012, 04:59 PM
Your #content div is 950px wide, and positioned:relative, 22% in from the left side of the window. That would only be "centered" if your browser window was a very specific size. I suspect my browser window is not the same size as yours, and probably your IE window isn't the same size either. You might center that via margin:0 auto, I'd think that should work.

Dave
tommyzDad
06-21-2012, 05:29 PM
I'll give that a try.

Can I ask you to take a look at my HTML again, specifically the <head> element. In there I have, commented out, a link to an IE-only css.

Did I write the HTML comments correctly? In my testing on a computer using IE, nothing changes. (I track this by making changes to the background color of the divs.)

Thanks.
tracknut
06-21-2012, 05:42 PM
Unless you're trying to make this compatible with very old versions of IE, you shouldn't need to use conditional comments for IE these days. The syntax looks ok to me, But I don't see a file on your server called http://louiswu.aisites.com/navban2/assets/style2.css

Dave
tommyzDad
06-22-2012, 02:07 AM
http://louiswu.aisites.com/navban2/index_working.html

Can I get someone to confirm that the content is now centered in your respective browser. I can confirm its position on the other computer I have running IE9, and an outside user as well confirms it as well, but just for my firm peace of mind, I would like someone else to confirm it.

Thank, Dave, very much for your help. I seems I need a refresher course on CSS positioning.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum