What is wrong with this div? 1

[Recordsetclown]

I have a page that is generated by php from a main template and sometimes, subtemplates. I added a div enclosing the subtemplate in order to put a border around the subtemplate contents, which include varying numbers of photos and varying amounts of text. In IE7, it seems to be doing what I intended, but in Firefox 3.5.7, I get a box that cuts through the other divs. I can see with Firebug that the new div is wide enough, but only about four lines high. I have tried both auto and 100% for height and width of the new container to no effect. I can't manually set the div height because of the varying content length. The parent container works fine, and I could put a border around it, except that it would then be present for every page.

Any ideas?

 

[ChrisHunt]

So you want us to guess at the code you've written, and then tell you what's wrong with it?

Ideally, if you can post the URL of the page that's failing, post that. Failing that, do a "view source" of the (bit of the) page that's failing and post that, along with the CSS you're applying to it.

Then you should get a useful answer.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Recordsetclown]

Might as well, I was just guessing at it. Actually, I was hoping someone would say the same thing happened to them and give me an idea that I hadn't checked.

I can't give you an url, but the code of the subtemplate is as follows:

<div id="listdetail">
<h3>{listing_title}</h3>
{show_listed_by_admin_block}<h4>{lang_listed_by} <a href="{listing_agent_link}">{listing_agent_first_name} {listing_agent_last_name}</a></h4>{/show_listed_by_admin_block}
<h4>{headline}</h4>
{vtour_button}
<div id="listingimagegroup">
{listing_images_nocaption}
</div>
<div class="landr">
<div class="listingleft">{top_left}</div>
<div class="listingright">{top_right}</div>
</div>
<br />
<br />
<div class="listingcenter">
{center}
</div>
<div class="landr">
<div class="listingleft">{feature1}</div>
<div class="listingright">{feature2}</div>
</div>
<div class="landr">
{hide_printer_friendly}<strong>{lang_tools}</strong><br />
<a href="{contact_agent_link_url}">Contact Agent</a><br />
<a href="{link_calc_url}">Calculators</a><br />
{check_member}{link_add_favorites}<br />{/check_member}
{link_printer_friendly}<br />
<a href="{link_email_friend_url}">Email this listing to a friend</a><br /><br />
<strong>{lang_neighborhood_links} </strong><br />
{link_map}<br />
{link_yahoo_school}<br />
{link_yahoo_neighborhood}<br />{/hide_printer_friendly}
<br />					
{show_listed_by_admin_block}<strong>{lang_listed_by}: </strong><a href="{listing_agent_link}">{listing_agent_first_name} {listing_agent_last_name}</a><br />{/show_listed_by_admin_block}
{listing_agent_field_phone_block}{listing_agent_field_phone}<br />{/listing_agent_field_phone_block}
{listing_agent_field_mobile_block}{listing_agent_field_mobile}<br />{/listing_agent_field_mobile_block}
{listing_agent_field_fax_block}{listing_agent_field_fax}<br />{/listing_agent_field_fax_block}
{listing_agent_field_homepage_block}{listing_agent_field_homepage}<br />{/listing_agent_field_homepage_block}
{listing_agent_field_info_block}{listing_agent_field_info}<br />{/listing_agent_field_info_block}
<br />
{check_member}
{addon_daysonmarket_showpage}
<br />
{/check_member}
{lang_this_listing_has_been_viewed} <b>{hitcount}</b> {lang_times}.
<br />
</div>
</div>

The css is:

html,body {

background-color:#5D7E7D;

margin:0;

padding:0;

text-align:center;

}



#pagewidth {

background-color:#FFF;

border:3px outset #3E3535;

height:auto;

margin-left:auto;

margin-right:auto;

margin-top:5px;

overflow:visible;

text-align:left;

width:920px;

}



#header {

background-image:url('[URL unfurl="true"]http://');[/URL]

background-repeat:no-repeat;

height:319px;

overflow:visible;

position:relative;

width:100%;

}



#twocols {

float:right;

height:auto;

position:relative;

width:920px;

}



#rightcol {

clear:none;

display:inline;

float:right;

height:auto;

margin-top:15px;

position:relative;

text-align:center;

top:2px;

width:150px;

}



#maincol {

	background-color:#FFF;

	clear:none;

	color:#3E3535;

	display:inline;

	float:left;

	font-family:Tahoma, Verdana, "Microsoft Sans Serif";

	font-size:13px;

	height:auto;

	margin-left:15px;

	margin-right:5px;

	margin-top:15px;

	position:relative;

	top:0;

	width:740px;

	border: none;

}



#listdetail {

	height: 100%;

	width: 100%;

	border: 1px solid #666;

	clear: both;

	z-index: 1;

	padding: 4px;

}



#calculator{

	height: auto;

	width: auto;

	margin-left: 125px;

}



#footer {

	background-color:#FFF;

	clear:both;

	color:#3E3535;

	font-size:9px;

	font-style:normal;

	text-align:center;

	vertical-align:top;

	margin-top: 20px;

	height: 25px;

}



#navcontainer {

font-weight:600;

height:auto;

left:190px;

overflow:visible;

position:absolute;

top:-133px;

width:730px;

z-index:20;

}



#rss {

color:#3E3535;

float:left;

font-family:Tahoma, Verdana, "Microsoft Sans Serif";

font-size:16px;

font-variant:small-caps;

font-weight:600;

height:auto;

left:15px;

line-height:normal;

list-style-type:none;

position:relative;

top:173px;

white-space:normal;

width:250px;

}



#aboutus {

font-size:14px;

text-indent:5%;

}



#contact {

font-weight:400;

height:auto;

left:25%;

position:relative;

width:auto;

}



#featuredphoto {

border:2px solid #BBBCBC;

float:left;

height:150px;

margin-right:10px;

position:relative;

text-decoration:none;

width:200px;

}



#featuredtext {

float:left;

height:auto;

width:auto;

}



#listingimagegroup {

	height: auto;

	width: 210px;

	clear: none;

	float: left;

	border: none;

}



.listingcenter {

	float: right;

	height: auto;

	width: 520px;

	margin-top: 10px;

	margin-bottom: 10px;

}



.listingright {

	float: right;

	height: auto;

	width: 257px;

	text-align: left;

}



.listingleft {

	float: left;

	height: auto;

	width: 257px;

}



.landr {

	height: auto;

	float: right;

	width: 514px;

	margin-right: 7px;

	list-style-position: inside;

	list-style-type: disc;

	border: none;

}



.bulletlist {

	list-style-position: inside;

	list-style-type: disc;

}



.clearfix:after {

clear:both;

content:".";

display:block;

height:0;

visibility:hidden;

}



.clearfix {

display:block;

}

Thanks for looking at it.

 

[Vragabond]

I have no idea which are the elements that are causing you issues (as well as I can't use your server-side html), but it looks like a clearing issue. Read up on it here:

http://www.quirksmode.org/css/clearing.html

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[audiopro]

Does the page validate?

Keith

http://www.studiosoft.co.uk

 

[Recordsetclown]

Thanks to everyone who looked at this. The issue was resolved by adding overflow:hidden to the css for the offending container, as the link provided by Vragabond suggested.