Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Location
    Manassas, Virginia
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer IE9 Breaking My CSS? Flash Embedded in xHTML

    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
    Code:
    <!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
    Code:
    /* 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.

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,224
    Thanks
    10
    Thanked 269 Times in 268 Posts
    I'm viewing it on IE9 and Firefox 11, both look very much the same with the dotted box pushed to the right....

    Dave

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Location
    Manassas, Virginia
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tracknut View Post
    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.....

  • #4
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,224
    Thanks
    10
    Thanked 269 Times in 268 Posts
    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

  • #5
    New to the CF scene
    Join Date
    Jun 2012
    Location
    Manassas, Virginia
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,224
    Thanks
    10
    Thanked 269 Times in 268 Posts
    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

  • #7
    New to the CF scene
    Join Date
    Jun 2012
    Location
    Manassas, Virginia
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •