Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Auto height in content div not correct in Firefox
Old 08-03-2006, 07:35 AM Auto height in content div not correct in Firefox
Junior Talker

Posts: 2
Trades: 0
I imagine this is something simple but I am stumped Untitled Document The main content div is set to auto height. My understanding of this is that the div should then expand with the nested content. It is working correctly in IE (that's a first!) but not in Firefox. Please help!
Code:
#wrapper { 	font-family: Arial, Helvetica, sans-serif; 	width: 800px; 	margin-right: auto; 	margin-bottom: 0px; 	margin-left: auto; 	height: 300px; 	background-repeat: no-repeat; 	margin-top: 70px; 	background-color: #FFFFFF; } #content { 	font-family: Arial, Helvetica, sans-serif; 	width: 800px; 	height: 600px; 	background-image: url(images/home_main_image.jpg); 	background-repeat: no-repeat; 	background-color: #FFFFFF; } #top { 	margin: 0px; 	height: 265px; 	width: 100%; } #top #header { 	height: 64px; 	border-top-color: #D30D0F; 	border-bottom-color: #D30D0F; 	border-top-style: solid; 	border-bottom-style: solid; 	border-bottom-width: 2px; 	border-top-width: 2px; 	background-image: url(images/logo.jpg); } #tagline { 	background-color: #D30D0F; 	float: left; 	height: 36px; 	width: 600px; 	border-top-width: 1px; 	border-top-style: solid; 	border-top-color: #FFFFFF; 	padding-left: 200px; } #bottom { 	padding: 0px; 	height: auto; 	width: 100%; 	background-color: #FFFFFF; } #bottom #left { 	float: left; 	height: auto; 	width: 183px; 	padding-left: 11px; } #bottom #right { 	width: 606px; 	margin-left: 0px; } #right #topbabes { 	float: left; 	height: 260px; 	width: 575px; 	padding-top: 11px; 	padding-left: 25px; } .bigbabes { 	float: left; 	height: auto; 	width: auto; 	margin-right: 45px; } .bigbabename { 	font-family: Arial, Helvetica, sans-serif; 	font-size: 10pt; 	font-weight: bold; 	color: #8A8C8D; 	text-align: center; 	padding-top: 5px; } .bigbabesright {  	float: left; 	height: auto; 	width: auto; 	margin-right: 0px; } #homethumbs { 	background-color: #F2F2F2; 	float: left; 	height: 235px; 	width: 575px; 	padding-left: 25px; } .homethumb img { 	border: 1px solid #CE0C0C; } .homethumblast img { 	border: 1px solid #CE0C0C; } #homethumbs .homethumb { 	float: left; 	width: 50px; 	margin-right: 33px; 	margin-top: 10px; } .thumbtext { 	font-family: Arial, Helvetica, sans-serif; 	font-size: 8pt; 	font-weight: bold; 	color: #666666; 	text-align: center;` 	padding-top: 5px; 	line-height: 9pt; } #homethumbs .homethumblast { 	float: left; 	width: 50px; 	margin-top: 10px; } #signup { 	font-family: Arial, Helvetica, sans-serif; 	font-size: 10px; 	font-weight: bold; 	color: #D30D0F; 	background-color: #E3E3E3; 	height: 160px; 	width: 167px; 	float: left; 	margin-top: -50px; 	margin-left: 10px; } #nav { 	position: relative; 	left: 9px; 	top: -67px; 	width: 178px; 	height: 100%; 	float: left; 	 } body { 	background-image: url(images/logo.gif); 	background-repeat: no-repeat; 	text-align: center; 	background-position: center top; 	background-color: #CCCCCC; } #babes { 	width: 560px; 	height: 520px; 	margin-top: 170px; 	float: left; 	margin-left: 10px; } #detailtext { 	background-color: #f7f7f7; 	padding: 10px; 	float: right; 	height: auto; 	width: 300px; 	min-height: 217px; 	overflow: visible; } #detailphoto { 	float: left; }   #babes #topbabes { 	height: 249px; 	width: 100%; 	margin-left: 25px; 	margin-bottom: 15px; } #footer { 	background-color: #CC0000; 	float: left; 	height: 20px; 	width: 770px; 	padding-top: 5px; 	padding-left: 30px; 	font-family: Arial, Helvetica, sans-serif; 	font-size: 8pt; 	color: #FFFFFF; } #footer a { 	font-family: Arial, Helvetica, sans-serif; 	font-size: 8pt; 	color: #FFFFFF; 	text-decoration: none; } #footer a:hover { 	color: #cccccc; } #navigation { 	height: auto; 	width: 85%; 	float: left; 	text-align: left; 	position: relative; 	z-index: 3; 	margin-top: -460px; 	margin-left: 10px; } .navlink { 	float: left; 	width: 90%; 	padding-bottom: 15px; 	border-bottom-width: 1px; 	border-bottom-style: solid; 	border-bottom-color: #FFFFFF; 	padding-top: 15px; 	margin-left: 15px; } .navlinklast { 	float: left; 	width: 90%; 	padding-bottom: 15px; 	padding-top: 15px; 	margin-left: 15px; } .signupform { 	padding: 10px; 	width: 100px; 	text-align: left; } .signupform input { 	font-family: Arial, Helvetica, sans-serif; 	font-size: 9pt; 	border: 1px solid #D30D0F; } .signuplabel { 	font-family: Arial, Helvetica, sans-serif; 	font-size: 8pt; 	font-weight: bold; 	color: #D30D0F; 	text-align: left; } #left { 	float: left; 	height: auto; 	width: 178px; } .thumbtext a { 	font-family: Arial, Helvetica, sans-serif; 	font-size: 8pt; 	color: #666666; 	text-decoration: none; 	text-align: center; } .thumbtext a:hover { 	color: #D30D0F;  } .homethumblink a { border: 1px solid #000000; } .bigbabename a { 	text-decoration: none; 	color: #8A8C8D; } .bigbabename a:hover { 	text-decoration: none; 	color: #D30D0F; } #insidethumbs { 	float: left; 	height: 235px; 	width: 540px; 	padding-left: 25px; } #insidethumbs .insidethumb { 	float: left; 	width: 76px; 	margin-right: 37px; 	margin-top: 10px; } #insidethumbs .insidethumblast { 	float: left; 	width: 76px; 	margin-top: 10px; } .insidethumb img { 	border: 1px solid #CE0C0C; 	margin-bottom: 5px; } .insidethumblast img { 	border: 1px solid #CE0C0C; 	margin-bottom: 5px; } #babescroll {  	width: 600px; 	height: 500px; 	margin-top: 157px; 	float: left; 	padding-left: 5px; 	overflow: auto; 	padding-bottom: 10px; } #detailtop { 	background-color: #D30D0F; 	float: left; 	width: 100%; 	height: 24px; 	text-align: left; } #detail {  	width: 565px; 	height: auto; 	margin-top: 170px; 	float: left; 	margin-left: 10px; } #detailtext .myself { 	font-family: Arial, Helvetica, sans-serif; 	font-size: 8pt; 	line-height: 13pt; 	color: #666666; 	float: left; 	height: auto; 	width: 93%; 	text-align: justify; 	margin-top: 5px; 	margin-left: 10px; } .detailhdr { 	font-family: Arial, Helvetica, sans-serif; 	font-size: 11pt; 	font-weight: bold; 	color: #D30D0F; } #stats { 	background-color: #ECECEC; 	float: right; 	width: 300px; 	height: auto; 	padding-top: 10px; 	padding-left: 20px; 	padding-bottom: 10px; 	overflow: visible; 	margin-bottom: 10px; } #stats #statsleft { 	font-family: Arial, Helvetica, sans-serif; 	font-size: 8pt; 	float: right; 	width: 50%; 	text-align: left; 	color: #666666; } #stats #statsright {  	font-family: Arial, Helvetica, sans-serif; 	font-size: 9pt; 	line-height: 12pt; 	float: left; 	width: 50%; } .statshdr { 	font-family: Arial, Helvetica, sans-serif; 	font-size: 8pt; 	font-weight: bold; 	color: #D30D0F; 	line-height: 16pt; } .statshdr2line { 	font-family: Arial, Helvetica, sans-serif; 	font-size: 8pt; 	font-weight: bold; 	color: #D30D0F; 	line-height: 9pt; } .stats2line { 	line-height: 9pt; } #content2 {  	font-family: Arial, Helvetica, sans-serif; 	width: 800px; 	height: 600px; 	background-image: url(images/home_main_image.jpg); 	background-repeat: no-repeat; 	background-color: #FFFFFF; 	padding-bottom: 50px; } #detailsflashleft { 	font-family: Georgia, "Times New Roman", Times, serif; 	font-weight: bold; 	font-style: italic; 	color: #FFFFFF; 	margin-left: 10px; 	font-size: 10pt; 	margin-top: 3px; 	float: left;  } #detailsflashright { 	font-family: Georgia, "Times New Roman", Times, serif; 	font-weight: bold; 	font-style: italic; 	color: #FFFFFF; 	font-size: 9pt; 	margin-top: 3px; 	float: right; 	margin-right: 10px;  }
artdog is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 08-03-2006, 11:40 AM Re: Auto height in content div not correct in Firefox
saadatshah's Avatar
Extreme Talker

Posts: 215
Name: Syed Saadat Ali
Location: Lahore, Pakistan
Trades: 0
Post your code
__________________
- -- --- ---- ----- ------ ------- ---------------
If you have knowledge, let others light their candles in it.
saadatshah is offline
Reply With Quote
View Public Profile Visit saadatshah's homepage!
 
Old 08-03-2006, 12:57 PM Re: Auto height in content div not correct in Firefox
Junior Talker

Posts: 2
Trades: 0
Here is the code


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/babe_details.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="eastern_babes.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="sleight.js"></script>
<link href="Templates/sIFR-screen.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" href="Templates/sIFR-print.css" type="text/css" media="print" />
<script language="JavaScript" type="text/javascript" src="Templates/sifr.js"></script>
<script src="Templates/sifr-addons.js" type="text/javascript"></script>

<!--[if IE]>
<style>

#wrapper {
margin-top: 55px;
}
.navlink {
margin-left: 7px;
}
.navlinklast {
margin-left: 7px;
}
#navigation {
margin-left: 5px;
}
#content2 {
padding-bottom: 0px;
}
</style>
<![endif]-->
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

</head>

<body onload="MM_preloadImages('images/nav/home_over.gif','images/nav/why_czech_women_over.gif','images/nav/our_agency_over.gif','images/nav/view_ladies_over.gif','images/nav/stay_in_prague_over.gif','images/nav/our_offers_over.gif','images/nav/contact_us_over.gif')">
<script type="text/javascript">
//<![CDATA[
/* Replacement calls. Please see documentation for more information. */

if(typeof sIFR == "function"){




sIFR.replaceElement("#detailsflash", "trajanprobold.swf", "#000000", null, null, null, 0, 0, 0, 0);


};

//]]>
</script>
<div id="wrapper">
<div id="content2">
<div id="left"><div id="nav"><img src="images/nav_back.png" alt="nav background" /></div>
<!-- InstanceBeginEditable name="navigation" -->
<div id="navigation"><img src="images/top_buttons.gif" alt="top buttons" width="167" height="64" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="27,19,52,42" href="Templates/index.html" />
<area shape="rect" coords="71,19,97,42" href="Templates/contact_us.html" />
<area shape="rect" coords="107,17,137,47" href="Templates/sitemap.html" />
</map>
<div class="navlink"><a href="Templates/index.html" onmouseover="MM_swapImage('home','','images/nav/home_over.gif',1)" onmouseout="MM_swapImgRestore()"><img src="images/nav/home.gif" alt="home" name="home" width="53" height="15" border="0" id="home" /></a></div>
<div class="navlink"><a href="Templates/why_czech_women.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('why','','images/nav/why_czech_women_over.gif',1)"><img src="images/nav/why_czech_women.gif" alt="why czech women" name="why" width="140" height="15" border="0" id="why" /></a></div>
<div class="navlink"><a href="Templates/our_agency.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('our','','images/nav/our_agency_over.gif',1)"><img src="images/nav/our_agency.gif" alt="our agency" name="our" width="140" height="15" border="0" id="our" /></a></div>
<div class="navlink"><a href="Templates/view_ladies.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('view','','images/nav/view_ladies_over.gif',1)"><img src="images/nav/view_ladies.gif" alt="view ladies" name="view" width="140" height="15" border="0" id="view" /></a></div>
<div class="navlink"><a href="Templates/stay_in_prague.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('stay','','images/nav/stay_in_prague_over.gif',1)"><img src="images/nav/stay_in_prague.gif" alt="stay in prague" name="stay" width="140" height="15" border="0" id="stay" /></a></div>
<div class="navlink"><a href="Templates/our_offers.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('offers','','images/nav/our_offers_over.gif',1)"><img src="images/nav/our_offers.gif" alt="our offers" name="offers" width="140" height="15" border="0" id="offers" /></a></div>
<div class="navlinklast"><a href="Templates/contact_us.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/nav/contact_us_over.gif',1)"><img src="images/nav/contact_us.gif" alt="contact us" name="contact" width="140" height="15" border="0" id="contact" /></a></div>
</div>
<!-- InstanceEndEditable -->
<div id="signup"><img src="images/newsletter_signup_hdr.gif" alt="newsletter signup" />
<div class="signupform">
<span class="signuplabel">Name:</span><br />
<input name="name:" type="text" /><br /><br />
<span class="signuplabel">E-mail:</span><br />
<input name="email" type="text" /><p />
<input name="" type="image" src="images/submit_but.gif" />
</div>
</div>
</div>

<!-- InstanceBeginEditable name="babes" -->

<div id="detail">
<div id="detailtop">
<div id="detailsflashleft">MARKETA</div>
<div id="detailsflashright">AGE: 23</div>
</div>
<div id="detailphoto"><img src="images/detail_holder.jpg" alt="lady" width="245" height="368" /> </div>
<div id="detailtext">
<div class="myself">
<div class="detailhdr">Myself</div>
I am a nice girl looking for a rich husband. I am a nice girl looking for a rich husband. I am a nice girl looking for a rich husband. I am a nice girl looking for a rich husband. I am a nice girl looking for a rich husband. I am a nice girl looking for a rich husband. I am a nice girl looking for a rich husband. I am a nice girl looking for a rich husband. I am a nice girl looking for a rich husband. I am a nice girl looking for a rich husband. I am a nice girl looking for a rich husband. I am a nice girl nice girl looking for a rich husband. I am a nice girl looking for a rich husband. I am a nice girl looking for a rich husband. I am a nice girl looking for a rich husband. I am a nice girl looking for a rich husband. I am a nice girl looking for a rich husband. I am a nice girl looking for a rich husband. I am a nice girl This is the end of the text girl looking for a rich husband. I am a nice girl looking for a rich husband. I am a nice girl looking for a rich husband. I am a nice girl looking for a rich husband. I am a nice girl looking for a rich husband. I am a nice girl looking for a rich husband. I am a nice girl looking for a rich husband. I am a nice girl This is the end of the text </div>

<span class="myself">girl looking for a rich husband. I am a nice girl looking for a rich husband. I am a nice girl looking for a rich husband. I am a nice girl looking for a rich husband. I am a nice girl looking for a rich husband. I am a nice girl looking for a rich husband. I am a nice girl looking for a rich husband. I am a nice girl This is the end of the text </span></div>
<div id="stats">
<div id="statsleft">
<span class="statshdr">Hair:</span> Brown<br />
<span class="statshdr">Eyes:</span> Green<br />
<span class="statshdr">Languages:</span> English, Czech, German<br />
<span class="stats2line"><span class="statshdr">Interests:</span> Skiing, Children, Photography, Literature</span>
</div>
<div id="statsleft"><span class="statshdr">Birthdate:</span> 4/22/1982<br />
<span class="statshdr">Education:</span> Highschool</span><br />
<span class="statshdr">Home town:</span> Cesky Krumlov<br />
<span class="statshdr">Height:</span> 52 cm<br />
<span class="statshdr">Weight:</span> 54 kilos2<br />

</div>

</div>
</div>
<!-- InstanceEndEditable --></div>
<div id="footer"><a href="Templates/index.html">Home&nbsp;</a> |&nbsp; <a href="Templates/why_czech_women.html">Why Czech Women</a>&nbsp; |&nbsp; <a href="Templates/our_agency.html">Our Agency</a> &nbsp;| &nbsp;<a href="Templates/view_ladies.html">View Ladies</a> &nbsp;| &nbsp;<a href="Templates/stay_in_prague.html">Stay in Prague</a>&nbsp; | &nbsp;<a href="Templates/our_offers.html">Our Offers</a> &nbsp;|&nbsp; <a href="Templates/contact_us.html">Contact Us</a> &nbsp;| &nbsp;<a href="Templates/site_map.html">Site Map</a> &nbsp;| &nbsp;<a href="Templates/privacy.html">Privacy Policy</a> </div>
</div>
</div>
</body>
<!-- InstanceEnd --></html>
artdog is offline
Reply With Quote
View Public Profile
 
Old 08-03-2006, 02:58 PM Re: Auto height in content div not correct in Firefox
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
Try clearing your floats. If you float 'em, you usually have to clear them.

One other thing. All that text needs to be inside <p> tags to be proper.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Auto height in content div not correct in Firefox
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.22535 seconds with 12 queries