CSS - Mozilla Removes Background Of Parent Div Of Floating Child Divs

I have elements in a certain class and they may have child elements. I want to position the child so that it's TOP is at the bottom of the parent. Right now its top is at a fixed place relative to the parent. The parent is variable height. So in my css I have
ul.parent ul {
top: <bottom of parent>
}

How do I refre to it?

I have like this psudo-code:

Code:

<div id=parent  position: absolute>
<div id=child1 position: relative>
</div>
<div id=child2 position: absolute>
</div>
</div>

As I fill up child1 with text or content, the parent grows along with it. I would like the child2 div to grow along with it as well. That is the concept. Here is the real code:
Code:

<div  style="border: solid 3px; position: absolute; top: 0px; left: 0; width: 300px">


<div style="border: solid green; position: relative; width: 150px">
<p class="bodyCopy">
	Lots of text to fill out the div and make it grow.
	<br/><br/>
	A lot more text I wish I knew that latin phrase everyone uses to fill out text, better than making stuff up 
	<br/><br/>The next paragraph to make a div grow.
<p class="bodyCopy">
	Lots of text to fill out the div and make it grow.
	<br/><br/>
	A lot more text I wish I knew that latin phrase everyone uses to fill out text, better than making stuff up 
	<br/><br/>The next paragraph to make a div grow.
<p class="bodyCopy">
	Lots of text to fill out the div and make it grow.
	<br/><br/>
	A lot more text I wish I knew that latin phrase everyone uses to fill out text, better than making stuff up 
	<br/><br/>The next paragraph to make a div grow.

</div>

<div style="position: absolute; top: 0px; right: 0px; height: 100%; width: 10px; border: solid red 3px;">
</div>
<div style="border: solid blue 1px; position: absolute; height: 10px; width: 10px; left: 200px; bottom: -14px;">
</div>
</div>

I also have a test page here

This pretty much does what I would expect(or what I want) in FF, but not IE or Opera.

I would like this to be dynamic and not use any javascript. Does anyone have any suggestions?

Thanks for your time,

CJB

Hello All...

I'm making lay-out page based on 2 section (left panel and main) using div layer and wrap it under 1 parent layer.

My confusion arise as IE and FF doesn't treat equally (again!)
FF seems to ignore the parent CSS definition while IE obey it, so the background and border value i define in it's parent tag apply on IE but not in FF.

Here is the code related :

CSS Code:
Original - CSS Code .all2 { width:900px; border-bottom: groove #888888 2px; border-left: groove #888888 2px; border-right: groove #888888 2px; margin-left: auto; margin-right: auto; margin-bottom:auto; text-align: left; background-color: #FFECC7; padding:0; } .leftpanel { float: left; display: block; width:125px; font: 10px Arial, Helvetica, sans-serif; text-align: left; padding-top: 25px; padding-left:20px; padding-right:20px; } .mainpanel { float: left; display: block; width: 694px; border-left: groove #888888 1px; padding-top: 15px; padding-left:20px; padding-right:20px; text-align:justify; }

  

 .all2 { 


 width:900px; border-bottom: groove #888888 2px; 


 border-left: groove #888888 2px;


 border-right: groove #888888 2px; 


 margin-left: auto; margin-right: auto; margin-bottom:auto;


 text-align: left; background-color: #FFECC7; padding:0;


 }


  


 .leftpanel  { float: left; display: block; width:125px; 


 font: 10px Arial, Helvetica, sans-serif; text-align: left;


 padding-top: 25px; padding-left:20px; padding-right:20px;  


 }


  


 .mainpanel {  float: left; display: block;  width: 694px; 


 border-left: groove #888888 1px;


 padding-top: 15px; padding-left:20px; padding-right:20px;


 text-align:justify; 


 }  

The HTML :
Code:

<div class="all2">

<div class="leftpanel">	
.....
Left Panel Text 
</div>

<div class="mainpanel">		
....
Main Body Text
</div>

</div>

The Doc Type is XHTML 1.0 Transitional

Many thanks in advanced

A minimal example is easier than trying to describe the problem:
analogdawn.com/test/overlap.html

I understand what the problem is, the children are set to fill 100% of the parent, and that doesn't include the padding and border widths.

My question is:
How can I fix that easily, while still using padding and borders? I need to have a liquid width, so the DIV widths need to stay percentage based.

Any help will be appreciated.

Here is the code:
Code:

<html>
<head>
<style>
body {
	background-color: grey;
}

#wrap {
	width: 75%;
	border: 2px solid red;
}

.border {
	width: 100%;
	border: 2px solid yellow;
	padding: 2px;
	background-color: orange;
}

.text {
	color: white;
	width: 100%;
	border: 2px solid lightgreen;
	padding: 2px;
	background-color: black;
}
</style>
</head>
<body>
<div id="wrap">
<div class="border">
	<div class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse pellentesque. Curabitur lectus. Etiam pellentesque, nunc et fringilla lacinia, ante velit blandit libero, nec sollicitudin nisl nunc eu dui. Duis eu sapien. Proin justo magna, fermentum quis, scelerisque eu, commodo et, quam. Pellentesque tortor nulla, auctor in, feugiat tempus, tempus vel, eros. Quisque elit. Aliquam quam orci, sagittis a, laoreet sit amet, euismod non, pede. Donec a lacus. Nullam porta, nibh eget sagittis volutpat, sapien nibh porttitor arcu, ut aliquam turpis justo ut erat. Integer ut velit. Mauris scelerisque bibendum sapien. Nulla imperdiet tincidunt urna. Praesent sollicitudin dolor pharetra mauris. In hac habitasse platea dictumst. Vestibulum at sapien nec justo egestas sollicitudin. </div>
</div>
</div>


</body>
</html>

Hello all. I want to hide everything in a div with a particular id except for a specific tag. In other words, I want to be able to do the following:

Code:

<style type="text/css">
  #outer { display: none; }
  #outer p { display: block; }
</style>
<div id="outer">
  <p>This is text. </p>
  <h1>This is more text. </h1>
</div>

Where "This is text. " would appear but "This is more text. " would not appear? Is this possible?

I understand the inheritance that #outer p is getting the display: none property from the parent but does not mean I cannot override it?

Please look at this page -
http://www.soarminden.com/glider-soaring-gallery.asp

I put a red border on parent element. The children divs appear outside the parent at page bottom? Can someone shed some light please? I think the issue is with the styling of the div(s)

innerLeftColumn

or LeftColumn


Code:

<div style='width:670px;margin:0;border:1px solid red;min-height:500px;position:relative;'>


<div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;clear:left;'>
<img src='images/gallery/1/tom6.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br />
<h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=1' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Tom Hall Soaring</a></h4>
</div>


<div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;'>
<img src='images/gallery/12/phil-jones2.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br />
<h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=12' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Phil Jones Goes Gold & Diamond!</a></h4>
</div>

<div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;'>
<img src='images/gallery/13/wedding1.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br />
<h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=13' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Wolfram and Lydia's Wedding</a></h4>
</div>


<div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;clear:left;'>
<img src='images/gallery/15/DSC_6547.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br />
<h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=15' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Brennan Hall Soaring Lake Tahoe</a></h4>
</div>


<div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;'>
<img src='images/gallery/16/teresa.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br />
<h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=16' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Teresa Luther</a></h4>
</div>


</div>

Hi guys wonder if i could get a hand,

I have a problem with an applet from the bbcnews website - essentially my portal has dynamic content, and sometimes this is pushed against the menu bar.

It works fine, until used in IE6/7, when you roll over the parent on the menu bar, the child goes under the applet, again only in IE.

I have tried every type of z-index trick going to no avail - is it an issue with the JScript or css, and more to the point is there a fix?

Thanks a million for you help in advance, as theres no upload script here and this portal is in a secure location i'll copy the test code below for you to generate an htm with.

<-------->
CODE
<-------->

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


	<style type="text/css">

	body {
		font-family: arial, helvetica, serif;
	}
	
	#nav, #nav ul { /* all lists */
		padding: 0;
		margin: 0;
		list-style: none;
		float : left;
		width : 11em;
		z-index:5;
	}
	
	#nav li { /* all list items */
		position : relative;
		float : left;
		line-height : 1.25em;
		margin-bottom : -1px;
		width: 11em;
	}
	
	#nav li ul { /* second-level lists */
		position : absolute;
		left: -999em;
		margin-left : 11.05em;
		margin-top : -1.35em;
	}
	
	#nav li ul ul { /* third-and-above-level lists */
		left: -999em;
	}
	
	#nav li a {
		width: 11em;
		w\idth : 10em;
		display : block;
		color : black;
		font-weight : bold;
		text-decoration : none;
		background-color : white;
		border : 1px solid black;
		padding : 0 0.5em;
	}
	
	#nav li a:hover {
		color : white;
		background-color : black;
	}
	
	#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
		left: -999em;
	}
	
	#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
		left: auto;
	}
	
	#content {
		margin-left : 12em;
	}
</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>


</head>



<body>
<table width="200" border="0">
  <tr>
    <td><ul id="nav">

	<li><a href="#">Percoidei</a>
		<ul>
			<li><a href="#">Remoras</a>
				<ul>
					<li><a href="#">Echeneis</a>
						<ul>
							<li><a href="#">Sharksucker</a></li>
							<li><a href="#">Whitefin Sharksucker</a></li>
						</ul>
					</li>
					<li><a href="#">Phtheirichthys</a>
						<ul>
							<li><a href="#">Slender Suckerfish</a></li>
						</ul>
					</li>
					<li><a href="#">Remora</a>
						<ul>
							<li><a href="#">Whalesucker</a></li>
							<li><a href="#">Spearfish remora</a></li>
							<li><a href="#">Marlinsucker</a></li>
							<li><a href="#">Remora</a></li>
							<li><a href="#">Ceylonese remora</a></li>
						</ul>
					</li>
					<li><a href="#">Remorina</a>
						<ul>
							<li><a href="#">White suckerfish</a></li>
						</ul>
					</li>
					<li><a href="#">Rhombochirus</a>
						<ul>
							<li><a href="#">R. osteochir</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li><a href="#">Tilefishes</a>
				<ul>
					<li><a href="#">Caulolatilus</a></li>
					<li><a href="#">Lopholatilus</a></li>
					<li><a href="#">Malacanthus</a></li>
				</ul>
			</li>
			<li><a href="#">Bluefishes</a>
				<ul>
					<li><a href="#">Pomatomus</a></li>
					<li><a href="#">Scombrops</a></li>
					<li><a href="#">Sphyraenops</a></li>
				</ul>
			</li>
			<li><a href="#">Tigerfishes</a>
				<ul>
					<li><a href="#">Amniataba</a></li>
					<li><a href="#">Bidyanus</a></li>
					<li><a href="#">Hannia</a></li>
					<li><a href="#">Hephaestus</a></li>
					<li><a href="#">Lagusia</a></li>
					<li><a href="#">Leiopotherapon</a></li>
					<li><a href="#">Mesopristes</a></li>
					<li><a href="#">Pelates</a></li>
					<li><a href="#">Pelsartia</a></li>
					<li><a href="#">Pingalla</a></li>
					<li><a href="#">Rhyncopelates</a></li>
					<li><a href="#">Scortum</a></li>
					<li><a href="#">Syncomistes</a></li>
					<li><a href="#">Terapon</a></li>
				</ul>
			</li>

		</ul>
	</li>

	<li><a href="#">Anabantoidei</a>
		<ul>
			<li><a href="#">Climbing perches</a>
				<ul>
					<li><a href="#">Anabas</a></li>
					<li><a href="#">Ctenopoma</a></li>
				</ul>
			</li>
			<li><a href="#">Labyrinthfishes</a>
				<ul>
					<li><a href="#">Belontia</a></li>
					<li><a href="#">Betta</a></li>
					<li><a href="#">Colisa</a></li>
					<li><a href="#">Macropodus</a></li>
					<li><a href="#">Malpulutta</a></li>
					<li><a href="#">Parosphromenus</a></li>
					<li><a href="#">Pseudosphromenus</a></li>
					<li><a href="#">Sphaerichthys</a></li>
					<li><a href="#">Trichogaster</a></li>
					<li><a href="#">Trichopsis</a></li>
				</ul>
			</li>
			<li><a href="#">Kissing gouramis</a></li>
			<li><a href="#">Pike-heads</a></li>
			<li><a href="#">Giant gouramis</a></li>

		</ul>
	</li>

	<li><a href="#">Gobioidei</a>
		<ul>
			<li><a href="#">Burrowing gobies</a></li>
			<li><a href="#">Dartfishes</a></li>
			<li><a href="#">Eellike gobies</a></li>
			<li><a href="#">Gobies</a></li>
			<li><a href="#">Loach gobies</a></li>
			<li><a href="#">Odontobutidae</a></li>
			<li><a href="#">Sandfishes</a></li>
			<li><a href="#">Schindleriidae</a></li>
			<li><a href="#">Sleepers</a></li>
			<li><a href="#">Xenisthmidae</a></li>
		</ul>
	</li>

</ul></td>
<td><!-- BBCi Syndication --><noscript><a href="http://www.bbc.co.uk/news" target="_BBC"><img src="http://newsimg.bbc.co.uk/shared/bsp/hi/services/htmlsyndication/img/synd_js_error_js-inactive.gif" width="165" height="200" border="0" alt="BBCi: Javascript is not available on this browser"/></a></noscript><script src="http://www.bbc.co.uk/syndication/html/jsserver/1096038497229" language="JavaScript" style="z-index:1;" type="text/javascript"></script><!-- /BBCi Syndication --></td>
  </tr>

</table>
</body>
</html>

Is there a way of changing a parent class based on a child class like.
../[class=child]{
}
This way i can change a parent class if it has this child
Any ideas?

i have a <div> inside another <div>

I want the parent div to stay exactly where it is, and the child div to be inside it but with a 20px margin from the top.

But when I add the 20px margin, the parent div moves downwards by 20px so the child div is still at the very top edge.


Example of what is happening is he http://www.eionbryant.com/test.html


I want the green area "#wrap" to be flush with the purple strip... and the grey area "#boxes" to begin inside the green area 20px down.


I am learning css, so i would prefer someone explained how I am doing it wrong, rather than offering some work around.

cheers





Code:

<body>

<div id="strip"> </div>


<div id="wrap">

	<div id="boxes"> </div>

</div>

</body>

</html>

Code:

body {background:#FFFFF; font-family:"Trebuchet MS", Times, serif; padding:0; margin:0; position:relative;  }

#strip {background:#663366; width:100%; height:10px; padding:0; border:0;}

#wrap {background:#00FFCC; width:100%; height:700px; margin:0 auto; }



#boxes {background:#666666; margin: 20px auto; width:800px; height:200px; clear:both;}

Here's my situation...

I have a div, that's a child to a div. I want the child to be behind the parent, but a part of it sticking out from the side and people can click on the child.

Because of the cms\framework I'm working with, the div i want to click needs to stay a child of this particular parent.

I can get it working in IE, but that's it.

Also, the parent div MUST be set to overflow:visible, for other misc reasons.

Take a look at the attached image for a visual of what I mean.

Ok the problem is hard to explain but here it goes:
I have news items that are divs, inside that div i have a floating left image, then i have the news content.

The problem comes when I view it in Firebird. It seems the next news item starts at the bottom of the floating image. This causes serious problems with the text. I tried this .clear css style:
clear: both
height: 0
line-height: 0

but it just seemed to help with one (bringing the second one below the bottom of the page).

Does anyone know what might be the problem?
Here is the link:
http://www.cjweed.com/porttest

As you can see IE displays everything like a champ, mozilla likes to mash it together.

Please help

How could I Force a parent div to vertically expand to size of its child div?

Thanks in advance,
Richard Carson

Hi,

I've been stuck on this for the last few days and was wondering if you could help me. I'm not even sure if using javascript is the best option to do this, but if you could help me anyway that would be great. My dilemma is I'm designing a website which has several links in the left hand navigation bar. But at the moment, the links open in a new window. I don't want that. I want them to open in the main area of the parent window. Normally if i'd used frames, opening the links within that same page wouldn't have been a problem because I could just use the target attribute.

But I didn't use frames, I used CSS layouts but when I set the target attribute to _parent, the links open up across the whole page rather than just in the main section.Can some one provide some code to point me in the right direction of how to do this?

Hello I have struggled to understand this issue. I have a large container and I want 2 or more dives to stay side my side but if I apply float left to the div(s) it leaves the large container. How do I do it so that the left divs push the large container with them. I've included my example. and a screen shot here [IMG]atrexstudio.com/float_left/Untitled-4.jpg[/IMG]




<body>

<style type="text/css">

.container {
width: 600px;
background-color: #0F0;
}
#left1{
background-color: #633;
height: 100px;
width: 100px;
float: left;
}
#left2 {
background-color: #639;
height: 100px;
width: 100px;
float: left;
}
</style>


<div class="container">why do the two left divs jump out the container?
<div id="left1">left</div><!--left -->
<div id="left2">left2</div>
</div><!--container -->
</body>
</html>

If I can understand this then I will not have to keep setting the length of the container manually. Thank you I appreciate you time.

i have divs on a page, and the ones appearing on the left don't use any style (style=""), where as on the ones appearing on the right use (style="float: right; clear: right;")

in IE 6 and 7, it creates the needed visuals found in the first attachted file (ie 7.gif).. as is seen, it clears the content so that the end of the divs are always in line, so that the next divs can begin properly in line

in mozilla firefox (mozzila firefox.gif), it does not obey this idea, and simple starts the next divs after the end of the above ones.. you can imagine how problematic this is when some divs on the right contain ALOT of words, that should be inline with the one of the left, etc

any thoughts or anything that could help would be apprciated...

regards