Jump to content

DIV contains all text in FF but not in IE


selfrevolution

Recommended Posts

For starters, the XHTML on the page completely validates with w3(XHTML 1.0 transitional)The CSS may not, I haven't tried. I'm pretty sure the problem is with the the HTML and not the style sheet.This is the page I'm working onIf you look at in Firefox, everything looks fine and as it should.Look at it in Internet Explorer 7(or whatever number the new beta version is) and the text in the middle column on the bottom of the white container(under "Amphenol Interconnect Products Corp.) ignores the bottom of the container and overflows into the page. I have tried everything I can think of, otherwise I wouldn't be here. Normally I can fix these problems myself but this one has me completely baffled. The code for both the XHTML and CSS pages is below.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><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" /><link rel="stylesheet" media="all" type="text/css" href="http://www.selfrevolution.com/test/flyout.css" /><style type="text/css"><!--	@import url("layout.css");--></style><script type="text/JavaScript"><!--function MM_jumpMenu(targ,selObj,restore){ //v3.0  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");  if (restore) selObj.selectedIndex=0;}//--></script><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"><img src="http://www.selfrevolution.com/test/images/innovative.gif" alt="" />	<p class="text5">Copyright © 2006 Amphenol Interconnect Products Corporation. All rights reserved.</p></div></body></html>

CSS code:

/** TITLES */#title1 {	height: 35px;	background: url(images/homepage32.gif) no-repeat left top;}#title2 {	height: 35px;	background: url(images/homepage33.gif) no-repeat left top;}#title3 {	height: 35px;	background: url(images/homepage34.gif) no-repeat left top;}#title4 {	height: 35px;	background: url(images/subpage1_01.gif) no-repeat left top;}#title5 {	height: 35px;	background: url(images/subpage_about.gif) no-repeat left top;}#title6 {	height: 35px;	background: url(images/subpage_contact.gif) no-repeat left top;}#title7 {	height: 35px;	background: url(images/subpage_news.gif) no-repeat left top;}.title {	margin-bottom: 10px;}.title b {	position: absolute;	left: -10000px;}/** BASIC */html, body {	height: 100%;}a.link3 {	display: block;	height: 16px;	background: url(images/homepage35.gif) no-repeat right top;}a.link3 b {	position: absolute;	left: -10000px;}.ul1 {	margin-left: 0px;	padding-left: 0px;	list-style: none;}.ul1 a {	padding-left: 10px;	background: url(images/homepage39.gif) no-repeat left center;}/** CONTENT */#content {	width: 705px;	margin: 0px auto;	border: 1px solid #FFFFFF;	background: #FFFFFF url(images/homepage25.gif) repeat-y left top;}.subpage #content {	background-image: url(images/subpage2_01.gif);}#left {	float: left;	width: 205px;}#right {	float: left;	width: 500px;}/** HEADER */#header {	padding-left: 33px;}/** HEADERMENU */#headermenu {}#headermenu ul {	margin: 0px;	padding: 0px;	list-style: none;}#headermenu li {	display: inline;}#headermenu a {	display: block;	float: left;	height: 41px;}#headermenu1 { width: 56px; background: url(images/homepage12.jpg) no-repeat left top; }#headermenu2 { width: 56px; background: url(images/homepage13.jpg) no-repeat left top; }#headermenu3 { width: 60px; background: url(images/homepage14.jpg) no-repeat left top; }#headermenu b {	position: absolute;	left: -10000px;}/** LOGO */#logo {	width: 172px;	padding-bottom: 39px;	background: url(images/homepage16.jpg) no-repeat left bottom;}/** MAINMENU */#mainmenu {	padding-left: 33px;	background: url(images/homepage03.gif) repeat-y left top;}#mainmenu ul {	margin: 0px;	padding: 0px;	list-style: none;}#mainmenu li {	display: inline;}#mainmenu a {	display: block;	width: 172px;}#mainmenu1 { height: 31px; background: url(images/homepage18.gif) no-repeat left top; }#mainmenu2 { height: 31px; background: url(images/homepage17.gif) no-repeat left top; }#mainmenu3 { height: 31px; background: url(images/homepage19.gif) no-repeat left top; }#mainmenu4 { height: 31px; background: url(images/homepage21.gif) no-repeat left top; }#mainmenu5 { height: 31px; background: url(images/homepage22.gif) no-repeat left top; }#mainmenu6 { height: 31px; background: url(images/homepage23.gif) no-repeat left top; }#mainmenu b {	position: absolute;	left: -10000px;}/** SPLASH */#splash {	height: 226px;}/** SPLASH-IMAGE */#splash-image {	float: left;}/** SPLASH-DATE */#splash-date {	float: left;	width: 193px;	height: 19px;	padding: 10px 0px 0px 0px;	background: url(images/homepage06.gif) repeat left top;	border-left: 1px solid #FFFFFF;	border-bottom: 1px solid #FFFFFF;}#splash .text2 {	margin: 0px 10px 0px 0px;	padding: 0px 13px 0px 0px;	background: url(images/homepage27.gif) no-repeat right center;	text-align: right;}/** SPLASH-BOX */#splash-box {	float: left;	width: 193px;	height: 196px;	background: url(images/homepage07.jpg) repeat-y left top;	border-left: 1px solid #FFFFFF;	border-bottom: 1px solid #FFFFFF;}#splash-box h2 {	height: 42px;	background: url(images/homepage28.jpg) no-repeat left top;}#splash-box h2 b {	position: absolute;	left: -10000px;}#splash-box p {	margin: 0px 15px;}/** SPLASH-SEARCH */#splash-search {	float: left;	width: 193px;	height: 71px;	background: url(images/homepage08.jpg) repeat-y left top;	border-left: 1px solid #FFFFFF;	border-bottom: 1px solid #FFFFFF;}#splash-search h2 {	height: 28px;	background: url(images/homepage29.jpg) no-repeat left top;}#splash-search h2 b {	position: absolute;	left: -10000px;}#splash-search form {	margin: 0px 0px 0px 7px;}#splash-search p {	margin: 0px 5px 0px 15px;}/** BOX1 */#box1 {	height: 200px;	min-height: 200px;	margin-left: 33px;	background: url(images/homepage05.gif) no-repeat left top;	}html>body #box1 {	height: auto;}#box1 p {	padding: 24px 0px 0px 17px;}#box1 ul {	margin: 0px;	padding: 0px 0px 0px 17px;	list-style: none;}#box1 li {}#box1 li strong {	float: left;	width: 45px;}/** BOX2 */#box2 {	padding: 10px;	background: url(images/homepage09.gif) repeat left top;	border: 1px solid #FFFFFF;	border-right: none;}#box2 p {	margin: 0px;	padding: 0px 0px 0px 15px;	background: url(images/homepage31.gif) no-repeat left center;}/** BOX3 */#box3 {}#box3A {	float: left;	width: 305px;}#box3B {	float: left;	width: 195px;}/** BOX4 */#box4 {	margin: 0px 30px 0px 26px;	padding: 21px 0px 10px 0px;	background: url(images/homepage10.gif) repeat-x left bottom;}#box4 h3 {	position: absolute;	left: -10000px;}/** BOX5 */#box5 {	margin: 0px 30px 0px 26px;	padding: 10px 0px 10px 0px;}#box5 h3 {	position: absolute;	left: -10000px;}/** BOX6 */#box6 {	padding: 21px 26px 0px 19px;}/** BOX7 */#box7 {	margin: 0px 30px 0px 26px;	padding: 21px 0px 10px 0px;}#box7 h3 {	position: absolute;	left: -10000px;}/** BOX8 */#box8 {	margin: 0px 30px 0px 26px;	padding: 21px 0px 10px 0px;}#box8 h3 {	position: absolute;	left: -10000px;}/** FOOTER */#footer {	padding-top: 17px;}.aipcnews { 	font-family: verdana, arial;	font-size: 10;	font-weight: bold;	color: red}

GAH. Please help, I will be eternally grateful.

Edited by selfrevolution
Link to comment
Share on other sites

From what I tested, it seems like your JavaScript is somehow affecting it. It works whenever you turn JavaScript off. I'm using IE 6. This is how I'm seeing the page; the left screen is IE and the right screen is Mozilla Firefox (with JavaScript on).[Edited]Then here is IE with JavaScript off:[Edited]Hoped that help out some.:)

Edited by RahXephon
Link to comment
Share on other sites

Did you used any CSS hacks to place that onto it's place? If so, try to isolate that hack into a separate stylesheet that you would call with IE6's conditional comment. Or perhaps think of some way to get it work in IE7 and use that way into a separate stylesheet for IE7. If all else fails, try asking in IE7's newsgroups. If this is browser bug, it should be fixed, but I do think (even without looking into the code) that it's some sort of hack.

Link to comment
Share on other sites

rah-Thank you, I never even thought to check the javascript. I'll take it out and see if that fixes the problem on IE 7 as well.Thanks again.

Did you used any CSS hacks to place that onto it's place? If so, try to isolate that hack into a separate stylesheet that you would call with IE6's conditional comment. Or perhaps think of some way to get it work in IE7 and use that way into a separate stylesheet for IE7. If all else fails, try asking in IE7's newsgroups. If this is browser bug, it should be fixed, but I do think (even without looking into the code) that it's some sort of hack.

boen_robot-I am not using any CSS hacks. As far as I know it is all legit CSS. Thanks for the input, I'll give it another look.
Link to comment
Share on other sites

I think I may have just figured out my problem. I took the javascript out, seemed to make no difference at all on IE7. Same issue. Just for kicks I took out the flash objects and what do you know, it works fine now. So the Flash was causing the problem all along.Thanks for the help.

Link to comment
Share on other sites

rah-Thank you, I never even thought to check the javascript. I'll take it out and see if that fixes the problem on IE 7 as well.Thanks again.

Sure thing, I'm glad you figured it out. :)
Link to comment
Share on other sites

Ugh.I have tried everything. The Flash files are screwing the page up no matter what I try. I thought maybe if I tried positioning them relatively it might work, but that doesn't seem to help at all.Any more ideas?

have you tried to just making the flash animation a gif animation instead? it could help.
Link to comment
Share on other sites

have you tried to just making the flash animation a gif animation instead? it could help.

I've considered that, but gif files tend to be bigger and flash generally seems to perform better. The option to put Flash on the page should be there, ya know? I know it can be done. Its gotta be something stupid screwing it all up.
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
×
×
  • Create New...