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

Question

plagel 0 Newbie Poster

16 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

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="" 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="" width="752px" height="42px" />
	</div>

	<div id="heading">
		<div id="topBanner">
			<img src="" 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=""><span>About Us</span></a>
					<!--
						<ul>
							<li><a href="">Our Mission</a></li>
							<li><a href="">Our History</a></li>
							<li><a href="">Our Goals</a></li>
							<li><a href="">Areas of Service</a></li>
						</ul>
						-->
					</li>
					<li id="navTab2" class=""><a href=""><span>Mission</span></a>
						<!--<ul>
							<li><a href="">Janitorial Cleaning</a></li>
							<li><a href="">Carpet and Floor Care</a></li>
							<li><a href="">Specialty</a></li>
							<li><a href="">Healthcare</a></li>
							<li><a href="">Education Cleaning</a></li>
							<li><a href="">Green Cleaning</a></li>
						</ul>-->
						
					</li>
					<li id="navTab3" class="currentPage"><a href=""><span>Services</span></a>

						<!--
						<ul>
							<li><a href="">Basic Cleaning&nbsp;</a></li>
							<li><a href="">Deep Cleaning</a></li>
							<li><a href="">Green Cleaning</a></li>
							<li><a href="">Extras</a></li>
						</ul>
					</li>
					-->
					<li id="navTab5" class=""><a href=""><span>Contact</span></a>
						<!--<ul>
							<li><a href="">Free Estimate&nbsp;&nbsp;&nbsp;</a></li>
							<li><a href="">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) ? "" : "");
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*/

html-css user-interface web-design

3 Contributors
2 Replies
149 Views
1 Day Discussion Span
Latest Post 16 Years Ago Latest Post by Besherek

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.

Member #161545 · Answer 1 · 2009-11-01T23:27:03+00:00

The "How do you fix it" part in this site maybe of some help -

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..

Besherek 0 Light Poster · Answer 2 · 2009-11-02T14:45:31+00:00

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.