Site shows up 'wrong' in IE; fine in Firefox,Opera

plagel 0 Newbie Poster

15 Years Ago

Hi folks. I'm Jeff, long time lurker, but now I need help I can't figure it out for the life of me. I can get everything else to look just fine, but the 'body' part of the site(right pane) shows up UNDERneath everything in IE. For example http://www.sparkleaning.com/commercial/

Thanks for any help!!

Here's the HTML for the page:

<!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>Sparkleaning - Bucks County Residential Cleaning. Also Serving Philadelphia and New Jersey</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link href="http://www.sparkleaning.com/commercial/style.css" rel="stylesheet" type="text/css" />
	<meta name="verify-v1" content="j9lwZWNxr+cAwGg4cB/TXREd0J9kq6jXLTRn1dInrxY=" />
	<script type="text/Javascript" src="curvycorners.js"></script>

	<script type="text/javascript" src="mootools.js"></script>
	<script type="text/javascript">
		window.addEvent('domready', function(){
			$('myForm').addEvent('submit', function(e) {

			new Event(e).stop();
			var log = $('log_res').empty().addClass('ajax-loading');
			this.send({
				update: log,
				onComplete: function() {
					log.removeClass('ajax-loading');
				}
			});
			});		
		});
	</script>

</head>
<body>
<div id="container">

<div id="topBar">
		<img src="http://www.sparkleaning.com/images/topBar.gif" width="752px" height="42px" />
	</div>

	<div id="heading">
		<div id="topBanner">
			<img src="http://www.sparkleaning.com/images/headbg.jpg" width="750px" height="71px" />
		</div>
</div>
	<div id="belly">
		<div id="leftPane">
			<div id="leftPaneParagraph">
								<!-- PICTURE GOES IN HERE 
				
				<div id="leftPanePicturePane">
				
				</div>
				-->

				
				Contact us today for a free estimate or to schedule an appointment!
				<div id="form_box">
		<form id="myForm" action="send.php" method="get" name="myForm">
	
		
			
			<nobr><label for="name">First Name:</label>
			<input type="text" name="first_name" id="name" value="" /></nobr>
		<br />
		
			
				<nobr><label for="lname">Last Name:</label>
			<input type="text" name="lname" id="lname" value="" /></nobr>

		<br />
			
				<label for="email"><nobr>E-mail:</nobr></label>	
			<input type="text" name="e_mail" id="email" value="" />
		<br />
			<nobr><label for="phone">Phone:</label>
			<input type="text" name="phone" id="phone" value="" /></nobr>
		<br />
			
				<nobr><label for="address">Address:</label>

			<input type="text" name="address" id="address" value="" /></nobr>
		<br />
			
				<label for="city"><nobr>City:&nbsp;</nobr></label>	
			<input type="text" name="city" id="city" value="" />
		<br />
		<label for="state">State:&nbsp;</label>
		                <select name="State" id="state">
                        <option value="">State:</option>

                        <option value="Alabama">Alabama</option>
                        <option value="Alaska">Alaska</option>
                   

                        <option value="Arizona">Arizona</option>
                        <option value="Arkansas">Arkansas</option>
    
                        <option value="California">California</option>
                        <option value="Colorado">Colorado</option>

                        <option value="Connecticut">Connecticut</option>

                        <option value="Delaware">Delaware</option>
                        <option value="District of Columbia">District of Columbia</option>
                        <option value="Florida">Florida</option>
    
                        <option value="Georgia">Georgia</option>
                        <option value="Hawaii">Hawaii</option>

                        <option value="Idaho">Idaho</option>

                        <option value="Illinois">Illinois</option>
                        <option value="Indiana">Indiana</option>
                        <option value="Iowa">Iowa</option>
    
                        <option value="Kansas">Kansas</option>
                        <option value="Kentucky">Kentucky</option>

                        <option value="Louisiana">Louisiana</option>

                        <option value="Maine">Maine</option>
                        <option value="Maryland">Maryland</option>
    
                        <option value="Massachusetts">Massachusetts</option>
                        <option value="Michigan">Michigan</option>
                        <option value="Minnesota">Minnesota</option>

                        <option value="Mississippi">Mississippi</option>
                        <option value="Missouri">Missouri</option>
                        <option value="Montana">Montana</option>
    
                        <option value="Nebraska">Nebraska</option>
                        <option value="Nevada">Nevada</option>

                        <option value="New Hampshire">New Hampshire</option>
                        <option value="New Jersey">New Jersey</option>
                        <option value="New Mexico">New Mexico</option>
    
                        <option value="New York">New York</option>
                        <option value="North Carolina">North Carolina</option>

                        <option value="North Dakota">North Dakota</option>

                        <option value="Ohio">Ohio</option>
    
                        <option value="Oklahoma">Oklahoma</option>
                        <option value="Oregon">Oregon</option>

                        <option value="Pennsylvania">Pennsylvania</option>
    
                        <option value="Rhode Island">Rhode Island</option>

                        <option value="South Carolina">South Carolina</option>
                        <option value="South Dakota">South Dakota</option>
                        <option value="Tennessee">Tennessee</option>
    
                        <option value="Texas">Texas</option>
                        <option value="Utah">Utah</option>
                        <option value="Vermont">Vermont</option>

                        <option value="Virginia">Virginia</option>
                        <option value="Washington">Washington</option>
                        <option value="West Virginia">West Virginia</option>
    
                        <option value="Wisconsin">Wisconsin</option>
                        <option value="Wyoming">Wyoming</option>
    
                    </select>           
					<br />

			<label for="zip"><nobr>Zip Code:</nobr></label>	
			<input type="text" name="zip" id="zip" value="" />
		<br />


					<label for="message">Message:</label>
			<textarea name="message" id="message" style="overflow: auto;"></textarea>

		
		

			
		
		<div class="hr">

			<!-- spanner -->
</div>

	<input type="submit" name="button" value="Submit" id="submitter" class="button"/>
	</div>			</div>
		</div>

		<div id="rightPane">
			<div id="divNav">
				<ul id="nav">

					<li id="navTab1" class=""><a href="http://www.sparkleaning.com/commercial/index.php"><span>About Us</span></a>
					<!--
						<ul>
							<li><a href="http://www.sparkleaning.com/residential/mission.php">Our Mission</a></li>
							<li><a href="http://www.sparkleaning.com/residential/history.php">Our History</a></li>
							<li><a href="http://www.sparkleaning.com/residential/goals.php">Our Goals</a></li>
							<li><a href="http://www.sparkleaning.com/residential/service.php">Areas of Service</a></li>
						</ul>
						-->
					</li>
					<li id="navTab2" class=""><a href="http://www.sparkleaning.com/commercial/mission.php"><span>Mission</span></a>
						<!--<ul>
							<li><a href="http://www.sparkleaning.com/commercial/services/janitorial.php">Janitorial Cleaning</a></li>
							<li><a href="http://www.sparkleaning.com/commercial/services/carpet_floor.php">Carpet and Floor Care</a></li>
							<li><a href="http://www.sparkleaning.com/commercial/services/specialty.php">Specialty</a></li>
							<li><a href="http://www.sparkleaning.com/commercial/services/healthcare.php">Healthcare</a></li>
							<li><a href="http://www.sparkleaning.com/commercial/services/education.php">Education Cleaning</a></li>
							<li><a href="http://www.sparkleaning.com/commercial/services/green.php">Green Cleaning</a></li>
						</ul>-->
						
					</li>
					<li id="navTab3" class="currentPage"><a href="http://www.sparkleaning.com/commercial/services/index.php"><span>Services</span></a>

						<!--
						<ul>
							<li><a href="http://www.sparkleaning.com/residential/packages/basic_cleaning.php">Basic Cleaning&nbsp;</a></li>
							<li><a href="http://www.sparkleaning.com/residential/packages/deep_cleaning.php">Deep Cleaning</a></li>
							<li><a href="http://www.sparkleaning.com/residential/packages/green_cleaning.php">Green Cleaning</a></li>
							<li><a href="http://www.sparkleaning.com/residential/packages/extras.php">Extras</a></li>
						</ul>
					</li>
					-->
					<li id="navTab5" class=""><a href="http://www.sparkleaning.com/commercial/contact.php"><span>Contact</span></a>
						<!--<ul>
							<li><a href="http://www.sparkleaning.com/residential/contact/free_estimate.php">Free Estimate&nbsp;&nbsp;&nbsp;</a></li>
							<li><a href="http://www.sparkleaning.com/residential/contact/questions_comments.php">Questions/Comments?</a></li>
						</ul>
						-->
					</li>
					
				</ul>
			</div>
			<!-- header-->
			<h1>

			Our Services
			</h1>
			<!--end header-->

			<p>
				Take a moment to browse the the services we provide, in addition to the regular dusting jobs those <i>other</i> companies do. 
			</p>
			<p>
				<a href="janitorial_services.php">Janitorial Solutions</a> - Great for any office, no matter how large <i>or</i> small. 
			</p>

			<p>
				<a href="education_services.php">Education Solutions</a> - Protect our youth from unnecessary health risks, help raise their scores, and reduce absences! 
			</p>
			<p>
				<a href="healthcare_services.php">Healthcare Solutions</a> - Ensure your office stays as clean as possible, to keep your clients healthy! 
			</p>
			<p>
				<a href="carpet_services.php">Floor &amp; Carpet Solutions</a> - Extend the life of your floors while maintaining your professional appearance. 
			</p>

		</div>
	</div>

	<div id="bottomBar">
		<div id="legalNotice">
					<html>
			
			<head>
			<link href="./style.css" rel="stylesheet" type="text/css" />
			</head>

			<body>
			<p class="footer">&copy; 2007-2009 Sparkleaning LLC. All Rights Reserved. </p>
			</body>
			</html>		</div>
	</div>

</div>

<!--google tracker **RIGHT BEFORE </body>-->

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-10324414-1");
pageTracker._trackPageview();
} catch(err) {}</script>
<!--End google tracker-->





</body>

</html>

And the CSS:

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #646A61;
	background: #165C7C;
}

#container {
	width: 752px;
	margin: 1em auto;
}

a:link { color: #666; }
a:visited { color: #666; }
a:hover { text-decoration: underline; }

a.nav:link { color: #FFF; text-decoration: none; }
a.nav:visited { color: #FFF; text-decoration: none; }
a.nav:hover { text-decoration: underline; }



/**********FORMS*****************/

#form_box {
	float:left;
	width: 220px;
	font:0.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
	padding-left: 0.2em;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left:0em;
	margin-right:0px;
	height:100%;

}


/*CONTACT FORM PART*/
#leftPane {
	float:left;
	width: 220px;
	text-align: left;
	height:100%;
	background-color:#D8D8D8;
	margin-top: 0px;
	color: #fff;
	padding-right:0px;
	padding-top:0px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;


}
/*END CONTACT FORM PART*/

form div {
	text-align: center;
}

 
#form_box div {
	padding: 0.2em 0.5em;
}
 
#form_box div.hr {
	height: 0px;
	margin-top: 0pt;
	margin-bottom: 7px;
}
 
#form_box p {
	float: left;
	margin: 4px 0pt;
	width: 120px;
}
 
 
#log {
	width: 400px;
	margin-top: 10px;
}
 
#log_res {
	overflow: auto;
}
 
#log_res.ajax-loading {
	padding: 0;
	background: url(http://www.ethinking.net/17femmes/images/Small_of_the_Back_Girl_01.jpg) no-repeat center;
}

label {
	float: left;
	width: 45px;
	color: #3a6483;
	font-size:13px;
	text-align: right;
	margin-right: 5px;
	padding-right:4em;
	padding-bottom:.5em;
}

input.text, textarea {
	float: left;
	margin-bottom: .5em;
	width: 140px;
}

input, textarea {
	width:140px;
	float:left;
	background-color: #FF9F10;
	border-color: #FF9F10;
}

input:focus, textarea:focus {
	background-color: #FFB030;
	border-color: #FFB030;
}

textarea {
	height: 60px;
}




form br {
	clear: both;
}

p.submit {
	padding-left:10em;
}

/*******************ENDFORMS*****************/












.brushBullets {
	list-style-type: none;
/*	list-style-image: url('images/brush-20.jpg');
 */
}
.brushBullets li {
	overflow: visible;
	background: url('images/brush-20.jpg') 0px -5px no-repeat;
	height: 26px;
	margin: 0 0 0 5px;
	padding: 2px 0 0 28px;
}

.packagearea {
	color: #003366;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	text-align:left;
	padding-bottom:2px;
	padding-top:2px;
	font-weight:bold;
	
}


h1 {
	color: #003366;
	border-bottom: 0px solid #ccc;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 1.9em;
	text-align:left;
	padding-bottom:5px;
	
}

h2 {
	color: #003366;
	border-bottom: 0px solid #ccc;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: .9em;
	text-align:left;
	padding-bottom:5px;
	padding-top:10px;
	font-weight:bold;
}

p {
  color:#3a6483;
  font-family:verdana,geneva,arial,helvetica,sans-serif;
  font-size: 13px;
  text-align:left;
  padding:1em;
}

p.footer {
  color:#3a6483;
  font-family:verdana,geneva,arial,helvetica,sans-serif;
  font-size: 13px;
  text-align:left;
  padding:0em;
 }


 ul.list {
  color:#3a6483;
  font-family: verdana, geneva, arial, helvetica, sans-serif;
  font-size:1em;
  text-align:left;
  padding-left:3em;
 }
 
  ul.deeplist {
  color:#3a6483;
  font-family: verdana, geneva, arial, helvetica, sans-serif;
  font-size:1.1em;
  text-align:left;
  padding-left:1.3em;
  font-weight:bold;
 }
 
  ul.extralist {
  color:#3a6483;
  font-family: verdana, geneva, arial, helvetica, sans-serif;
  font-size:1em;
  text-align:left;
  padding-left:3em;
  line-height:1.4em;
 }
 
 ul.cleaninglist {
 	  color:#3a6483;
  		font-family: verdana, geneva, arial, helvetica, sans-serif;
  		font-size:.9em;
  		text-align:left;
  		padding-left:15px;
  		text-height:1px;
	
 }

#topBar {
	width: 752px;
	height: 42px;
}

#topBanner {
	position: relative;
	display: inline-block;
	width: 750px;
	height: 71px;
}

#heading {
	border-left: 1px solid #ff9000;
	border-right: 1px solid #ff9000;
	border-bottom: 1px solid #226d9f;
}

#packages {
	border-left: 0px solid #226d9f;
	float: left;
	width: 450px;
	padding:0;

	
}
	

#belly {
	width: 750px;
	padding: 0;
	background: white;
	border-left: 1px solid #ff9000;/*left border*/
	border-right: 1px solid #ff9000;/*right border*/
	border-bottom:1px solid #226d9f;/*bottom border, above orange part*/
	overflow: auto;
}

#leftPane {
	float: left;
	width: 253px;
	padding-left: 4px;
	padding-right:4px;
	padding-top:0px;
	text-align: center;
}
#leftPane p {
	margin: 1em;
	font-size: 1.2em;
	font-weight:bold;
}

#rightPane {
	border-left: 1px solid #226d9f;
	float: right;
	width: 480px;
	padding-bottom: 10em;
}
#rightPane>* {
	margin: 0 .2em;
}
#rightPane p {
	text-align: left;
}

#bottomBar {
	color: white;
	background: #ff9000 url('images/bottomBar.gif') no-repeat top left;
	width: 752px;
	height: 42px;
	text-align: center;
}

#legalNotice {
	padding:.5em;
	
}

#legalNotice p{
	color: white;
	text-align:center;
	line-height:1em;
}

.formfield {
	font-family: verdana,arial,helvetica,geneva,sans-serif;
	font-size:11px;
	color:#666666;
	background-color:#F7F7F7;
	border: 1px solid #999999;
	letter-spacing: 0.1em;
	text-indent: 0.2em;
}

/* Navigation Container */
#divNav {
	background: #f90;
	height: 58px;/*height of the whole nav section*/
	width: 480px;
	margin: 0 0 1.1em;
	padding: 0;
	position: relative;
	top: 0; left: 0;
}
#divNav * {margin: 0; padding: 0; line-height:1.1em, 1.05, 1.15;}
#divNav a {text-decoration: none;}

#nav {
	list-style-type: none;
}

#nav>li {
	margin: 0;
	display: block;
	float: left;
	text-align: center;
}

/* for all links in the list */
#nav li a {
	display: block;
	width: 96px;
	color: white; /*color of sub-menu foreground*/
	font-weight: bold;
}

#nav li>ul a:hover {
	display: block;
	width: 96px;
	color: #f90; /*color of sub-menu foreground*/
	font-weight: bold;
}




/* Tab Presentation */
#nav>li>a {
	float: left;
	display: block;
	height: 15px;
	padding: 4px 0;
	width: 94px;
	border: 1px solid #165C7C;
	color: #165C7C; /*color of the non-current, main menu foreground*/
	background: white;
}
#nav>li.currentPage>a {background:#f90;border-bottom: 1px solid #f90; color: white;}/* Current top-menu */
#nav>li:hover>a {background: #165C7C;color: white;}/*Non-current top-menu, when hovered on*/
#nav>li.currentPage:hover>a {background: #f90}/*current top-menu, when hovered on*/


/* Categories */
#nav>li>ul {
	float: left;
	display: none;
	position: absolute;
	top: 25px;
	left: 0;
	width: 476px;
	height: 30px;/*height of subnav*/
	padding: 1px;/*padding of the subnav*/
	background: #165C7C;/*background color of the subnav*/
	list-style-type: none;
	border: 1px solid #224d9f;/*shows bottom border of the subnav area*/
	border-top: none;
}
#nav>li.currentPage>ul {
	background: #f90;
	display: inline-block;
}
#nav>li>ul>* {
	font-size: 92%;
	float: left;
	height: 29px;
	margin: 1px;
	padding-top:0px;/*padding for the subnav from the topnav*/
	/*padding-left:20px;/*makes the sub-nav more spaced out*/
	padding-right:15px;
	display: inline-block;
	width: 90px;
}
#nav>li>ul>*>* {
	vertical-align: middle;
}

/* Rollover */
#nav>li:hover>ul {
	display: block;
	z-index: 10000;
}
#nav>li:hover>a {border-bottom: 1px solid #165C7C;}/*when you hover over the top-nav*/
#nav>li.currentPage:hover>a {border-bottom: none; color: white;}/*when you hover over the top-nav, current*/
#nav li.currentPage ul li a:hover {color:#165c7c;}/*when you hover over the top-nav*/

web-design

3 Contributors
2 Replies
139 Views
1 Day Discussion Span
Latest Post 15 Years Ago Latest Post by Besherek

ak_2005

15 Years Ago

The "How do you fix it" part in this site maybe of some help - http://www.positioniseverything.net/explorer/floatIndent.html

with respect to your code in relation with the above site, you may want to take a look at line number 193 of your HTML code.. you could try changing <div id="rightPane"> to
<div id="rightPane" style="display: inline">

If the above doesn't work, you could try this - http://crowstoburnaby.com/index.php/2005/02/07/fixing_the_pc_ie_float_drop_bug

note: I am no expert in this area, so sorry if I have suggested something totally pointless..

Edited 15 Years Ago by ak_2005 because: n/a

Besherek 0 Light Poster

15 Years Ago

I usually throw in a clear: both div when I get the float drop problem. Some older IE version have problems with margins and paddings and in turn drops a float left or right underneath like with your site.

Try add a clear: both div. example below, styles can be external.

<div class="container">
  <div style="float: left" class="left_pane"></div>
  <div style="float: left" class="right_pane"></div>
  <div style="clear: both; display: none;"></div>
</div>

Not sure if this will help you out, I haven't had the chance to look at your site and code, but it sounds like a similar problem i've had in the past with IE.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.