Large gap in Firefox and IE. help quck

**jag5311** · Sep 7, 2004, 20:58

Sorry for the rush guys, I just have a deadline tommorow and I am in a hurry.

On this page, http://magichour.biz/rough/vows.php I have the image containers floated left. I added

<div style="clear: both;"></div>
<br clear="all" />

To make it so I could put information underneath the images.

Well, I added a paragraph, but for some reason it gets thrown to the bottom of the content area. Then, in IE, I get that nasty page refresh issue where there is a huge breaking white space if you scroll the page at all.

Any help?

Thanks
Bryan

**Paul O'B** · Sep 8, 2004, 04:12

Hi,

The problem when you clear a float is that some browsers will clear all previous floats in the document. The solution is usually to enclose the content in a float itselkf and that seems to contain the context of the clear (in most browsers).

Heres an example with your code although I haven't dotted all the i's and crossed the t's as my main computer has just died on me

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>Our Current Vows Samples - Magic Hour Productions Inc.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="" />
<script type="text/javascript" src="http://magichour.biz/rough/js/w.js"></script>
<style type="text/css">
/* CSS Document */
body {
font-size: 1em;
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #A88699;
background-color: #FCF3F3;
}
div#header {
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
height: 148px;
width: 754px;
background-image: url(http://magichour.biz/rough/images/header-left.jpg);
}
div#header h1 {
display: none;
position: absolute;
top: -400px;
}
div#nn4 {
display: none;
margin: 0px;
padding: 0px;
}
div#innerbody {
margin: 0px auto;
padding: 0px;
width: 754px;
border-top-width: 10px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #EFCFDA;
border-right-color: #EFCFDA;
border-bottom-color: #EFCFDA;
border-left-color: #EFCFDA;
text-align: left;
border-bottom-width: 1px;
background-color: #FFFFFF;
}
div#tabs {
margin: 0;
clear: right;
padding: 0px 0px 0px 15px;
}
ul#navtabs {
list-style: none;
margin: 0px;
padding: 0px;
}
ul#navtabs li {
display: block;
float: left;
height: 24px;
width: 102px;
text-align: center;
padding: 0px;
margin: 0px;
background: url(http://magichour.biz/rough/images/off-tab.jpg) no-repeat;
}
ul#navtabs a:link, ul#navtabs a:visited {
display: block;
font: bold 70% Verdana, Arial, Helvetica, sans-serif;
color: #9B6A78;
text-decoration: none;
height: 24px;
width: 102px;
padding: 3px 1px 2px;
margin: 0px;
}
ul#navtabs a:hover {
text-decoration: underline;
}
div#container {
text-align: center;
}
div#content {
padding: 5px 0px 5px 15px;
margin-top: 40px;
font-size: 80%;
line-height: 19px;
text-align: left;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.roundcont {
width: 250px;
background-color: #F2F5FB;
color: #5179A2;
font-size: 100%;
}
.roundtop { 
background: url(http://magichour.biz/rough/images/topright-blue.gif) no-repeat right top; 
}
.roundbottom {
background: url(http://magichour.biz/rough/images/bottomright-blue.gif) no-repeat right top; 
}
img.corner {
width: 14px;
height: 14px;
border: none;
display: block !important;
}
div#rightside {
margin: 0px 25px 25px;
padding: 0px 0px 0px 20px;
float: right;
width: 150px;
display:inline;/* ie fix*/
}
div#rightside2 {
margin: 0px 25px 25px;
padding: 0px 0px 0px 20px;
float: right;
width: 150px;
display:inline;/* ie fix*/
}
div#rightside p {
margin: 5px 10px;
}
div#rightside2 p {
margin: 5px 10px;
}
div#leftside {
margin-right: 230px;
margin-left: 0px;
}
* html div#leftside {height:1%}
#leftinner{width:100%;float:left}
div#leftside ul {
margin-right: 10px;
}
div#leftside2 {
margin-right: 230px;
margin-left: 0px;
background-color: #F8F4F5;
border: 1px solid #F0D5DF;
font-size: 110%;
}
div#leftside p, div#leftside2 p {
margin: 10px;
padding-bottom: 10px;
}
div#leftside a:link, div#leftside a:visited, div#leftside2 a:link, div#leftside2 a:visited {
color: #9B6086;
text-decoration: underline;
font-weight: bold;
}
div#leftside a:hover, div#leftside2 a:hover {
color: #AA83AF;
}
div#footer {
background-repeat: no-repeat;
margin: 0px;
padding: 3px 0px 0px;
height: 21px;
width: 756px;
text-align: center;
font-size: 70%;
background-image: url(http://magichour.biz/rough/images/footer.jpg);
}
div#wrap {
text-align: left;
width: 754px;
margin-right: auto;
margin-left: auto;
}
.roundcont2 {
background-color: #F8F4F5;
font-size: 110%;
}
.roundtop2 { 
background: url(http://magichour.biz/rough/images/topright.gif) no-repeat right top; 
}
.roundbottom2 {
background: url(http://magichour.biz/rough/images/bottomright.gif) no-repeat right top; 
}
.roundcont3 {
background-color: #F8F4FB;
margin-top: 30px;
}
.roundtop3 { 
background: url(http://magichour.biz/rough/images/topright-purple.gif) no-repeat right top; 
}
.roundbottom3 {
background: url(http://magichour.biz/rough/images/bo...ght-purple.gif) no-repeat right top; 
}
div#content h2 {
margin-bottom: 20px;
font-size: 140%;
font-weight: bold;
background-repeat: no-repeat;
padding: 3px;
background-image: url(http://magichour.biz/rough/images/h2gradient.jpg);
}
div.specials {
font-size: 130%;
font-weight: bold;
color: #394F71;
text-align: center;
margin-right: 5px;
margin-left: 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #DCE2E9;
padding-bottom: 3px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
div.advertisements {
font-size: 130%;
font-weight: bold;
color: #7E5485;
text-align: center;
margin-right: 5px;
margin-left: 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #D8CCDD;
padding-bottom: 3px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
div#rightside a:link, div#rightside a:visited, div#rightside2 a:link, div#rightside2 a:visited {
color: #003366;
text-decoration: underline;
}
div#rightside a:hover, div#rightside2 a:hover {
color: #7D99C1;
}
div#quotes {
clear:both;
margin-right: 140px;
margin-left: 140px;
margin-top: 10px;
margin-bottom: 25px;
border-top-width: 4px;
border-bottom-width: 4px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FED8EA;
border-bottom-color: #FED8EA;
font-weight: bold;
font-size: 80%;
background-color: #FFFBFB;
padding: 10px 5px 5px;
line-height: 20px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
div.quoteby {
font-weight: normal;
text-align: right;
padding-right: 10px;
padding-top: 10px;
}
.floatright {
float: right;
}
div#quotes h3 {
font-size: 140%;
color: #7E6763;
margin: 0px 0px 15px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
h3 {
font-size: 140%;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #F7F2F2;
padding-bottom: 3px;
margin-left: 10px;
}
ul#advertisers {
padding: 5px;
margin: 0;
list-style-type: none;
}
ul#advertisers li {
margin: 5px 0px;
list-style-type: none;
background-repeat: no-repeat;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
background-position: 0px 5px;
background-image: url(http://magichour.biz/rough/images/arrow.jpg);
}
ul.topblue {
padding: 5px;
margin: 0;
list-style-type: none;
}
ul.topblue li {
margin: 5px 0px;
list-style-type: none;
background-repeat: no-repeat;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
background-position: 0px 5px;
background-image: url(http://magichour.biz/rough/images/arrow-blue.jpg);
}
ul.advertisers2 {
padding: 5px;
list-style-type: none;
margin: 0px 0px 0px 0px;
}
ul.advertisers2 li {
margin: 5px 0px;
list-style-type: none;
background-repeat: no-repeat;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
background-position: 0px 5px;
background-image: url(http://magichour.biz/rough/images/arrow.jpg);
}
div.specialarea {
background-color: #F2F5FB;
border: 1px solid #A6BACA;
padding-top: 5px;
color: #4D6582;
}
div.advertisearea {
background-color: #F8F4FB;
border: 1px solid #CEBDD9;
padding-top: 5px;
color: #4D6582;
margin-top: 30px;
}
ul#advertisers a:link, ul#advertisers a:visited, ul#advertisers2 a:link, ul#advertisers2 a:visited {
color: #633E71;
}
ul#advertisers a:hover, ul#advertisers2 a:hover {
color: #997EA5;
}
div#printfooter {
display: none;
}
span.quotehide {
display: none;
}
p.smalledit {
font-size: 10px;
color: #003366;
padding-top: 20px;
line-height: 13px;
}
div#leftside h4 {
font-size: 120%;
font-weight: bold;
color: #003366;
margin-left: 10px;
padding-bottom: 3px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #E8E1E7;
margin-right: 10px;
}
img.aboutimage {
float: right;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
background-color: #FFFFFF;
padding: 4px;
border: 1px solid #D1BAC4;
}
div#leftside dl {
margin-top: 5px;
margin-right: 5px;
margin-bottom: 20px;
margin-left: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #E8DBE8;
width: 360px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
}
div#leftside dt {
font-size: 160%;
margin-bottom: 10px;
}
div#leftside dd {
font-size: 80%;
margin-top: 3px;
margin-bottom: 3px;
padding-left: 20px;
background-image: url(http://magichour.biz/rough/images/left-arrow.gif);
background-repeat: no-repeat;
background-position: 0px 4px;
margin-left: 30px;
}
div#leftside dl dt a:link, div#leftside dl dd a:link, div#leftside dl dt a:visited, div#leftside dl dd a:visited {
width: 100%;
padding: 3px;
color: #5B3145;
text-decoration: underline;
}
div#leftside dl dt a:hover, div#leftside dl dd a:hover {
background-color: #EBDFEC;
}
dl div.imgright {
float: right;
margin: 5px;
font-size: 70%;
text-align: center;
}
dl div.imgright img {
border: none;
margin: 0;
padding: 0;
}
dl div.imgright a img, div.imagecontainer a img {
border: 1px solid #F8F4F5;
}
dl div.imgright a:hover img {
border: 1px solid #E2D3DF;
}
 
div#contact p {
margin-top: 3px;
margin-bottom: 3px;
}
label {
font-weight: bold;
color: #6F8CB0;
}
fieldset {
border: none;
}
div#contact {
margin-right: 10px;
margin-left: 5px;
}
div#contact input, div#contact textarea {
background-color: #FFFFFF;
border: 1px solid #E2C2D7;
padding: 2px;
color: #003366;
}
p.error {
color: #993333;
background-color: #FFFFFF;
padding: 5px;
border: 1px solid #AF7978;
}
div.thankyou {
background-color: #FFFFFF;
padding: 5px;
border: 1px solid #DDC1D5;
margin-right: 10px;
margin-left: 10px;
}
span.small {
font-size: 70%;
color: #003366;
}
span.smalledit {
font-size: 90%;
color: #003366;
}
span.smallhead {
font-size: 65%;
font-weight: bold;
}
 
span.required {
font-size: 100%;
color: #990000;
}
div.followup {
background-color: #FFFFFF;
padding: 5px;
margin-right: 10px;
margin-left: 10px;
border: 1px solid #E2D8DE;
}
div.quote {
color: #8F6895;
padding: 5px;
margin-right: 20px;
margin-left: 20px;
border-top-width: 3px;
border-bottom-width: 3px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #EDDCE4;
border-bottom-color: #EDDCE4;
background-color: #FFFFFF;
}
.padimage {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
}
span.price {
font-size: 160%;
font-weight: bold;
color: #003366;
}
div.imagecontainer {
text-align: center;
padding: 3px;
float: left;
width: 122px;
margin-right: 5px;
margin-left: 5px;
}
.videosize {
font-size: 75%;
font-weight: bold;
color: #003366;
}
div#nn4 {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
background-color: #E5E5E5;
padding: 5px;
border: 1px solid #666666;
}
ul#navtabs li#videostab {
background: url(http://magichour.biz/rough/images/on-tab.jpg) no-repeat;
}
ul#navtabs li#videostab a {
font-weight: bold;
}
 
.roundcont, .roundcont3 {
width: 150px;
float: right;
}
</style>
</head>
<body>
<div id="container"> 
<div id="wrap"> 
	<div id="innerbody">
	 <!--Begin Header-->
	 <div id="nn4">If you can read this message, then you are using an outdated 
		browser. All the information on this website is still viewable, but your 
		visual experience will not be the same. We recommend several sources for 
		<b>Modern</b> browsers such as <a href="http://www.mozilla.com" target="_blank">Mozilla</a>, 
		<a href="http://www.opera.com" target="_blank">Opera</a>, <a href="http://www.mozilla.org/products/firefox/" target="_blank">Firefox 
		(recommended)</a>, and of course the latest <a href="http://www.microsoft.com/windows/ie/...p1/default.asp" target="_blank">Internet 
		Explorer</a><br />
		We apologize for the inconvenience</div>
	 <div id="header">
		<h1>Magic Hour Productions</h1>
		<img src="http://magichour.biz/rough/rotate/rotator.php" class="floatright" alt="Magic Hour Productions" /></div>
	 <!--Begin menu-->
	 <div id="tabs"> 
		<ul id="navtabs">
		 <li id="hometab"><a href="index.php">Home</a></li>
		 <li id="packagetab"><a href="packages.php">Packages</a></li>
		 <li id="videostab"><a href="videos.php">Videos</a></li>
		 <li id="bookonlinetab"><a href="bookonline.php">Book Online</a></li>
		 <li id="abouttab"><a href="aboutus.php">About Us</a></li>
		 <li id="asktab"><a href="whattoask.php">What to Ask?</a></li>
		 <li id="contacttab"><a href="contact.php">Contact Us</a></li>
		</ul>
	 </div>
	 <div id="content"> 
		<!--You can Edit this-->
		<h2>Wedding Vows Samples</h2>
		<!--Right side Information-->
		<div id="rightside"> 
		 <!--Begin round box-->
		 <!--Don't edit this area-->
		 <div class="roundcont"> 
			<div class="roundtop"> <img src="http://magichour.biz/rough/images/topleft-blue.gif" alt="" width="14" height="14" class="corner" style="display: none" /> 
			</div>
			<!--You CAN edit this area-->
			<div class="specials">SAMPLES</div>
			<ul class="topblue">
			 <li><a href="wedding-open.php">Wedding Open</a></li>
			 <li><a href="documentary.php">Documentary</a></li>
			 <li><a href="montage.php">Montage</a></li>
			 <li><a href="highlights.php">Highlights</a></li>
			 <li><a href="reception-open.php">Reception Open</a></li>
			 <li><a href="vows.php">Vows</a></li>
			</ul></p>
			<!--Don't edit this area-->
			<div class="roundbottom"> <img src="http://magichour.biz/rough/images/bottomleft-blue.gif" alt="" width="14" height="14" class="corner" style="display: none" /> 
			</div>
		 </div>
		 <!--End round box-->
		 <div class="roundcont3"> 
			<div class="roundtop3"> <img src="http://magichour.biz/rough/images/topleft-purple.gif" alt="" width="14" height="14" class="corner" style="display: none" /> 
			</div>
			<div class="advertisements">ADVERTISERS</div>
			<ul id="advertisers">
			 <li><a href="http://www.perfectweddingguide.com/" target="_blank">The 
				Perfect Wedding Guide</a></li>
			 <li><a href="http://www.weddingchannel.com" target="_blank">The 
				Wedding Channel</a></li>
			 <li><a href="http://www.bbb.com" target="_blank">Better Business 
				Bureau</a></li>
			 <li><a href="http://www.yellowbook.com/" target="_blank">Yellow 
				Book</a></li>
			</ul>
			<div class="roundbottom3"> <img src="http://magichour.biz/rough/images/bottomleft-purple.gif" alt="" width="14" height="14" class="corner" style="display: none" /> 
			</div>
		 </div>
		</div>
		<div id="leftside"> 
		 <div id="leftinner">
	<!--Begin Round Box-->
		 <!--Don't edit this area-->
		 <div class="roundcont2"> 
			<div class="roundtop2"> <img src="http://magichour.biz/rough/images/topleft.gif" alt="" width="14" height="14" class="corner" style="display: none" /> 
			</div>
			<!--You CAN edit the below area-->
			<p>The following video clips are samples of Vows we have recorded. 
			 Please check back often as more video clips will be added.</p>
			<div id="imagefloats"> 
			 <div class="imagecontainer"> <a href="videos/harrington-vows.wmv"><img src="http://magichour.biz/rough/images/harrington-vows.jpg" alt="Harrington Wedding Vows Sample" /></a><br />
				<span class="videosize">3.06 MB (.wmv)<br />
				<a href="videos/harrington-vows.wmv">Download Now</a></span> </div>
			 <div style="clear: both;"></div>
			</div>
			<p class="smalledit">The videos displayed on this page are in Windows 
			 Media Video format. <a href="http://www.microsoft.com/windows/win...0/default.aspx" target="_blank">Download 
			 Windows Media Player</a>.</p>
			<!--Don't edit this area-->
			<div class="roundbottom2"> <img src="http://magichour.biz/rough/images/bottomleft.gif" alt="" width="14" height="14" class="corner" style="display: none" /> 
			</div>
		 </div>
	 	<!--End Round Box-->
		</div>
		<div style="clear: left;"></div>
	 <br style="clear:both"/>
</div>
</div>
	 <div id="quotes"> 
		<h3>What our Clientele has to say</h3>
		<img src="http://magichour.biz/rough/images/quoteleft.gif" alt="" /> <span class="quotehide">"</span> 
		You put on a great production. We all loved the video <span class="quotehide">"</span> 
		<img src="http://magichour.biz/rough/images/quoteright.gif" alt="" /> 
		<div class="quoteby">~ Bob Barth</div>
	 </div>
	</div>
	<div id="footer">Magic Hour Productions, Inc. &copy; 2004 | All Rights Reserved</div>
</div>
</div>
<div id="printfooter"> Magic Hour Productions<br />
6931 Wesley Court<br />
Indianapolis, IN 46220<br />
(317) 513-1496</div>
</body>
</html>

Hope that helps anyway.

Paul

**jag5311** · Sep 8, 2004, 05:50

Hey Paul, just curious

, could you tell me specifically what you altered as that is alot of code to sift through to find 1 or 2 changes, even though I can't believe you actually went through it all.

Your a trooper, thats for sure.

Thanks

**Paul O'B** · Sep 8, 2004, 06:06

Hi,

Sorry, I was in a bit of a rush and didn't want to leave anything out. I've gone through and marked the changes in bold (I hope i haven't missed any

)>

You can tidy those 2 clear statemtnts into one if you use my clearer code as follows.

Code:

 .clearer{
 height:1px;
 overflow:hidden;
 clear:both;
 margin-top:-1px;
 
 }

Code:

		   <!--End Round Box-->
		</div>
  	  <div class="clearer"></div>
   </div>
   </div>
	  <div id="quotes">

Paul

**jag5311** · Sep 8, 2004, 06:30

Thanks Paul, I will take a closer look when I get home. I appreciate it.

**jag5311** · Sep 8, 2004, 22:29

Hey Paul,

I have been fiddling with the css that you provided and I it works great for the videos pages, but the other pages get messed up.

I believe that is because on the videos series of pages, specifically, I override the css with embedded css on those pages.

I do this to force the main content area wide and the right side smaller.

That may be the culprit.

Can you think of some css code that i can apply ONLY to those pages via my current embedded rules?

For example, on this page,
http://magichour.biz/event/documentary.php

You will notice I have this

Code:

 <style type="text/css">
	ul#navtabs li#videostab {
	background: url(images/on-tab.jpg) no-repeat;
	}
	ul#navtabs li#videostab a {
	font-weight: bold;
	}
	
	.roundcont, .roundcont3 {
	width: 150px;
	float: right;
	}
	div#leftside {
	margin-right: 250px;
	}

</style> I think some things were getting goofed because of this.

Its only the video pages I am having issues with. The others look great in IE and Firefox because all other pages are suppose to have a skinnier left side and a wider right side.

Thanks
Bryan

**Paul O'B** · Sep 9, 2004, 07:45

I have been fiddling with the css that you provided and I it works great for the videos pages, but the other pages get messed up.

Well if you only want the video pages affected then you are going to need to identify them if you want the same code to be used elsewhere.

You could obviously just set up new classes/id's for that page with the changes I made above and the other pages wouldn't be affected. You do need to follow the way I have instructed above as that is the only way I know of stopping the floats from clearing all floated content.

Alternatively you could use the same styles but duplicate them and then preced them with a body id. You could give the video pages an ID of video. Then you just address the styles preceeded by the body id to apply them uniquely to that page.

e.g.
html:

Code:

<body id="video">

Code:

 
body#video div#rightside {
margin: 0px 25px 25px;
padding: 0px 0px 0px 20px;
float: right;
width: 150px;
display:inline;/* ie fix*/
}

Just do that for all the necessary changes and leave the original styles as they were. I haven't offered all the code because I've already done it once

The choice is yours. Either use new classes on that page or use the same classes pre-fixed by the body tag. (Test on a small portion first before you make large changes, in case there are other unforseen problems.)

Hope that helps.

Paul

**jag5311** · Sep 9, 2004, 09:37

Thanks Paul, I will give it a shot.

btw - Last night when I was fiddling with your previous solution, I noticed that the pages that did not have the <div id="innerleft"> worked just the same as the one with that tag. Not really sure if adding that actually did anything.

**Paul O'B** · Sep 9, 2004, 09:56

It wont make any difference and is not needed on pages where you arent clearing floats. Remember that the problem is that in some cases clearing a float means that the browser clears all floats above it.

If you don't have any little floats in the page (as in the video page) then there is no need for that inner.

The inner is a large float that contains little floats and if you clear a float inside a float then hopefully it won't be able to clear its parent because its inside it.

Thats the theory anyway

Paul

The SitePoint Forums have moved.

User Tag List

Thread: Large gap in Firefox and IE. help quck

Thread Tools

Display

Large gap in Firefox and IE. help quck

Bookmarks

Bookmarks

Posting Permissions