Jump to content

Flash objects causing layout problems

selfrevolution

By selfrevolution
in CSS

 Share

Recommended Posts

selfrevolution Newbie

selfrevolution

Posted
Posted (edited)

Click here and view this page in Internet Explorer 7. You may have to refresh it once to see the error. Its on the bottom of the page, in the middle. The text overflows the boundary of the content box. I know for a fact that the Flash files are the culprits, because upon removal of them, the problem is fixed. The problem is that they need to be in there. Here's the 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><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Amphenol Interconnect Products Corporation</title><meta name="keywords" content="" /><meta name="description" content="" /><link href="default.css" rel="stylesheet" type="text/css" /><style type="text/css"><!--	@import url("layout.css");--></style><style type="text/css"><!--.style2 {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 10px;	font-weight: bold;}--></style></head><body><div id="content">	<div id="left">  <div id="header">  	<div id="headermenu">    <ul>    	<li><a href="#" id="headermenu1" accesskey="1" title=""><b>Home</b></a></li>    	<li><a href="#" id="headermenu2" accesskey="2" title=""><b>Find</b></a></li>    	<li><a href="#" id="headermenu3" accesskey="3" title=""><b>Mail</b></a></li>    </ul>  	</div>  	<div id="logo"><img src="images/homepage15.jpg" alt="" width="172" height="146" /></div>  </div>  <div id="mainmenu">  	<ul>    <li><a href="http://www.selfrevolution.com/test/homepage.html" id="mainmenu1" title=""><b>home</b></a></li>    <li><a href="#" id="mainmenu2" title=""><b>products</b></a></li>    <li><a href="http://www.selfrevolution.com/test/news.html" id="mainmenu3" title=""><b>news release</b></a></li>    <li><a href="http://www.selfrevolution.com/test/aboutus.html" id="mainmenu4" title=""><b>about us</b></a></li>    <li><a href="http://www.selfrevolution.com/test/contactus.html" id="mainmenu5" title=""><b>contact us</b></a></li>    <li><a href="#" id="mainmenu6" title=""><b>sitemap</b></a></li>  	</ul>  </div>  <div id="box1">  	<p class="text1"><strong>Amphenol Interconnect<br />    Products Corporation</strong><br />    20 Valley St.<br />    Endicott, NY 13760<br />    USA</p>  	<ul class="text1">    <li><strong>Phone:</strong> 607.754.4444</li>    <li><strong>Fax:</strong> 607.786.4311</li>    <li><strong>Email:</strong> info@aipce.com</li>  	</ul>  </div>	</div>	<div id="right">  <div id="splash">  	<div id="splash-image">    <object type="application/x-shockwave-flash" data="http://www.selfrevolution.com/test/images/header_a.swf" width="306" height="226">    <param name="movie" value="http://www.selfrevolution.com/test/images/header_a.swf" />    </object>  	</div>  	<div id="splash-date">    <p class="text2">    	<script language="JavaScript" type="text/javascript" src="date.js"></script>    </p>  	</div>  	<div id="splash-box">    <object type="application/x-shockwave-flash" data="http://www.selfrevolution.com/test/images/header_b.swf" width="193" height="196">    <param name="movie" value="http://www.selfrevolution.com/test/images/header_b.swf" />    </object>  	</div>  	  </div>  <div id="box2">  	<p><strong class="text4">News:</strong> <a href="#" class="link2">Etiam porttitor. Fusce tincidunt auctor. Duis eu ante vel dolor tortor…</a></p>  </div>  <div id="box3">  	<div id="box3A">    <div id="box4">    	<div class="title">      <h2 id="title1"><b>Welcome to our website</b></h2>    	</div>    	<div class="content"><img src="images/homepage38.jpg" alt="" width="61" height="58" class="img1" />      <p>We are one of the largest manufacturers of interconnect products in the world. AIPC designs and manufactures the best-performing high bandwidth, low skew, copper and optical cable assemblies, adapters and terminators, supporting volume OEM applications in leading edge technologies.</p>    	</div>    </div>    <div id="box5">    	<div class="title">      <h2 id="title2"><b>Consequat tempus</b></h2>      <h3>Dolor sit amet volutpat etiam nullam</h3>    	</div>    	<div class="content"><img src="images/homepage36.jpg" alt="" width="61" height="58" class="img2" />      <p>We are one of the largest manufacturers of interconnect products in the world. AIPC designs and manufactures the best-performing high bandwidth, low skew, copper and optical cable assemblies, adapters and terminators, supporting volume OEM applications in leading edge technologies.</p><p>We are one of the largest manufacturers of interconnect products in the world. AIPC designs and manufactures the best-performing high bandwidth, low skew, copper and optical cable assemblies, adapters and terminators, supporting volume OEM applications in leading edge technologies.</p>      	    	</div>    </div>  	</div>  	<div id="box3B">    <div id="box6">    	<div class="title">      <h2 id="title3"><b>Latest Products</b></h2>    	</div>    	<div class="content">      <p>We are one of the largest manufacturers of interconnect products in the entire world.</p>      <p><img src="images/homepage37.jpg" alt="" width="149" height="77" /></p>      <ul class="ul1">      	<li><a href="#"><strong>Infiniband</strong></a></li>      	<li><a href="#"><strong>Fiber Channel</strong></a></li>      	<li><a href="#"><strong>SCSI</strong></a></li>      	<li><a href="#"><strong>SAS and Mini SAS</strong></a></li>      	<li><a href="#"><strong>SATA</strong></a></li>      </ul>      <p>We are one of the largest manufacturers of interconnect products in the world. AIPC designs and manufactures.</p>      <p><a href="#" class="link3"><b>Learn more</b></a></p>    	</div>    </div>  	</div>  </div>	</div>	<br style="clear: both;"  /></div><div id="footer">	<p class="text5">Copyright © 2006 Amphenol Interconnect Products Corporation. All rights reserved.</p></div></body></html>

Any ideas as to what might be causing this?

Edited by aspnetguy
Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted (edited)

The way I currently see the page (note: not the code, but the link) in IE7 it looks great. Was the probleming object (temporary) removed? If so, put it back. IE7 is still a beta and it's not that widely used yet after all. It shouldn't cost you any trouble. I'll post again if I see the problematic stylesheet and have a solution of some sort :) . Oh, and by the way, why don't you combine the import and the head style? They are both under a style tag after all.[edit] By the way, nice design. I really like it. I'm starting to wonder why don't you switch to scrict, scince you're not using presentational attributes anyway.[/edit]

Edited by boen_robot
Link to comment
Share on other sites
selfrevolution Newbie

selfrevolution

Posted
  • Author
Posted (edited)

Well crap. Looks fine to you but not me. GAH. I really wish Firefox was the only browser! But instead we have good old Internet Exploder.The problematic object is still in there. When you went to the page, did you refresh it? Cause when I go to it the first time from the link, it looks fine, but as soon as I refresh it it looks all messed up. I wouldn't normally worry too much about this, but I asked a co-worker to try it in IE6 and he had a different error. Apparently in IE6, the text doesn't overflow the white box, it actually gets cut off.UGH.

Edited by selfrevolution
Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted (edited)

OMG. You're right. When refreshed, the page is again messed up :) . I'll check it out.And just for the sake of this post not to be an "empty" one, in order to switch to strict mode, you just change the doctype.For XHTML 1.0 strict, you would use:

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

And for 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Note that with 1.1 you make huge risks, because IE6 might threat it oddly. I'm not sure what IE7's reaction would be either. Try it though. It might work.[edit] Hmm... I didn't noticed any hacks... nothing new. And it's odd that the first time the page loads fine. You might want to report this to Microsoft. It seems as a browser bug to me. [/edit]

Edited by boen_robot
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...