CSS - </div> Not Reverting To Parent Div Position Info

I have 3 images that I would like to go togather to form a heading with rounded corners. I want to use 3 div tag to accomplish this. I am unable to get all 3 to lign up

Code:

 
.rounded_STYLE{
  background-color: #fff;         
  border: 1px solid BORDER_COLOR; 
  position: relative;
}
.rounded_STYLE{background:url('/images/chg.gif') repeat-x; }
.rounded_STYLE > .tl, .rounded_STYLE > .tr, .rounded_STYLE > .bl, .rounded_STYLE > .br{
  width: 6px;
  height: 24px;
  position: absolute;
}
.rounded_STYLE > .tl{
  background: url(/images/clg.gif) top left no-repeat;
}
.rounded_STYLE > .tr{
  background: url(/images/crg.gif) top right no-repeat;
}
.rounded_STYLE > .tc{
  background: url(/images/chg.gif) top right no-repeat;
}
.rounded_STYLE > .bl{
  background: url(/images/bl.png) bottom left no-repeat;
}
.rounded_STYLE > .br{
  background: url(/images/br.png) bottom right no-repeat;
}

Code:

<div class="rounded_STYLE rounded">
  <div class="tl"></div>
  
  <div class="tc"><table class="h"><tr><td class="l"></td><td>dddddddddd</td><td class="r">ssssssss</td></tr></table></div>
  
  <div class="tr"></div>
  ... contents of the block go here ...
  <div class="bl"></div><div class="br"></div>
</div>

Hey
AHH I know that there is a lot of code to look at but I'm only working on the middle box with the cross. All I am wanting to figure out right now is how to get the parent div.icross to show all it's background in FF. It shows and looks how I want it to look in IE, so you can use that as reference.

You guys are always so much help and I REALLY appercaite it. Thanks so much to whoever helps me.

- Jacenta

Here is the page: tri-m.com/index_newlayout.html

Here is the css that only corresponds to the middle to make things easier for you to see:

Code:

div.icross /* index cross */
{
background:url(trim_images/layout/cross_background.gif);
background-color:#FFFFFF;
background-repeat:no-repeat;
background-position:top;
width:540px;
height:1%;
}
div.ilogo /* logo in cross, top left box */
{
width:192px;
height:57px;
margin-right:1px;
margin-bottom:2px;
float:left;
text-align:right;
padding:0;
}
div.ind /* name/description in cross, top right box */
{
width:346px;
height:57px;
margin-left:1px;
margin-bottom:2px;
float:right;
text-align:right;
padding:0;
}
div.iimage /* image in cross, bottom left box */
{
width:192px;
float:left;
margin-right:1px;
margin-top:1px;
height:1%;
}
div.iinfo /* info in cross, bottom right box */
{
width:346px;
float:right;
margin-left:1px;
margin-top:1px;
text-align:left;
height:1%;
}
.trimdescription 
{
color:#1b4da6;
font-family:Arial;
font-size:12px;
text-align:left;
font-weight:normal;
width:540px;
}
.pname /* product name */
{
color:#063891;
font-family:Arial;
font-size:28px;
padding:0;
}
.pdescription /* product  description */
{
color:#f47720;
font-family:Arial;
font-size:12px;
font-style:italic;
text-align:right;
padding:0;
margin-left:15px;
}
div.clear /* clear div/container */
{
clear:both;
}
div.fptitle /* featured products title/banner */
{
width:540px; 
height:19px; 
padding:0; 
margin:0;
}
div.fproducts /* featured products small images */
{
background-color:#e8e8e8; 
width:540px; 
height:76px; 
padding:0; 
margin:0;
}

I am confused by the "rules" of how to indicate what you are trying to style when an element is within other elements. Specifically in this case (but hopefully this lesson will be portable to other contexts). I have a UL with an LI (classed) that is within an id'd UL that is within an id'd DIV.

Code:

<div id="horzmenu">
<ul id="horznavmenu">
  <li><a href='rooms.php'>Accomodations</a></li>
  <li class='hot'>Location & Info		 
    <ul>
	<li><a href='/otherprops.php'>Other Properties</a></li>
	<li><a href='/news.php'>News & Photos</a></li>
    </ul>
  </li>
  <li><a href='booking.php'>Booking</a></li>
</ul>
</div> 

So if I were to wish to style this new UL and its LI's do I refer to:
The parent UL as in: #horznavmenu ul ul {
The parent UL and the class'd LI as in: #horznavmenu ul ul li.class{

Or? Thanks in advance for any feedback or suggested reading...

Is there a way to get the style sheet to let the inner tag to override the parent's tag? Seem that only one webpage need that while many other doesn't. I'll post the code below, take a look at the text-align:left ......

Code:

<div style="margin:0px;padding:25px 30px;text-align:left;">
 <img style="text-align:center;" src="...">
</div>

http://weightlossforever.ca/


Works fine in everything but ie7 the leaves appear in front of their parent, they should be behind it.

Thoughts?

Is there a way to get the style sheet to let the inner tag to override the parent's tag? Seem that only one webpage need that while many other doesn't. I'll post the code below, take a look at the text-align:left ......

Code:

<div style="margin:0px;padding:25px 30px;text-align:left;">
 <img style="text-align:center;" src="...">
</div>

I'm using a web application for an online survey system. The pages rendered are XHTML transitional ("<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">")... but it doesn't validate (a big problem, I know).

It looks like this initially...



...and I'm trying to indent the entire element below the header text like so...



...but the problem is that it applies the change not only the parent TABLE/DIV combo, but then the children as well (which is why the radio buttons ended up being shifted over too I believe).

I can't change any of the code of the application, but the application references an external CSS file that I can edit only (so I can't change the fact that there aren't many/any classes assigned to the elements to use directly... but I can modify this one file and have the changes applied).

What I've tried thus far is to use either of the following...
Code:

TABLE DIV {position: relative; left: 25px;}
TABLE DIV {padding-left: 25px;}

I found the tree using Firebug for Firefox. Is there a way to make the CSS code be applied to only the first/parent TABLE/DIV combo and not it's children? Maybe I could start with BODY TABLE DIV or something?

I would really appreciate any assistance possible.

Please look at this page -
http://hometown.tmhdesign.com/ask.asp?faq=9

See how the <p> exceeds the containing box at the bottom? I put a border-bottom on the containing div to show you where the issue occurs. It does not happen in IE7

I just noticed it does it also on this page

http://hometown.tmhdesign.com/staff.asp

Please look at this page http://osake.garychus.com/menu2.asp

I am trying to wrap a div (red border) around each category on this restaurant menu. For some reason the code looks right but the red border does not enclose the entire category section(s).

I validated the html but think the issue is css related. Any help is appreciated.

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've been searching for a few days, but I haven't found a solution to my problem. How do I get my parent DIV to expand to contain all of my content beyond the viewport?

CSS:
Code:

html {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
	min-height: 100%;
}
body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
	min-height: 100%;
}
.page {
	background-color: #dddddd;
	margin-left: -390px;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #9CB0C0;
	border-right-color: #9CB0C0;
	border-bottom-color: #9CB0C0;
	border-left-color: #9CB0C0;
	position: absolute;
	height: 100%;
	min-height: 100%;
	width: 780px;
	left: 50%;
	top: 0;

}
.header {
	position: absolute;
	height: 158px;
	width: 764px;
	background-color: #FFFFFF;
	left: 7px;
	top: 0px;
}
.content {
	position: absolute;
	left: 7px;
	top: 159px;
	background-color: #9CB0C0;
	height: 821px;
	width: 764px;
	margin-bottom: 34px;

}
.footer {
	background-color: #415569;
	height: 34px;
	width: 764px;
	left: 7px;
	bottom: 0px;
}

And the HTML:
Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="/test.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body>
<div id="lPage" style="position:absolute; z-index:1" class="page"> 
  <div id="lContent" style="position:absolute; z-index:2;" class="content"></div>
  <div id="lHeader" style="position:absolute; z-index:1" class="header"></div>
  <div id="lfooter" style="position:absolute; z-index:3" class="footer"></div>
</div>
</body>
</html>

I've searched through a few of the threads here, but haven't been able to find an answer either.

Thanks,

Brent

I have just a few more CSS bugs to iron out and I can't seem to figure this one out.

Here's a link: http://www.plml.org/multitool/index.php

In IE8/Firefox it works just as it should: the #solution_area div (contains the multiplication problems) doesn't stretch to its max width.

In IE7 the #solution_area div stretches. I've tried taking out all of the contents of the .tab_content divs (just inside the #solution_area div) except for some gibberish text and it works fine. As soon as I put a single thing in, it stretches.

What's going on?

I am trying to make sure that the body div takes up all the available space in div container (the parent div), however:
Code:

height: 100%;

makes it take up 100% of the whole page, not just the container.

Here is my source code:
Code:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Home -- OpportunIT</title>
		<link href="main.css" rel="stylesheet" type="text/css" />
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<link rel="alternate" type="application/rss+xml" title="OpportunIT News Feed" href="http://www.sphinxgaming.com/OpportunIT/" />
		<link rel="shortcut icon" href="favicon.ico" />

	</head>
	
	<body id="test">
		<div id="container" class="rounded-corners">
				<div id="header">OpportunIT</div>
				
				<div id="nav-menu"><ul>
				<li><a href="?page=home">Home</a></li>
				<li><a href="?page=software">Software</a></li>

				<li><a href="?page=about">About us</a></li>
				<li><a href="?page=contact">Contact us</a></li>
				</ul></div> 
				
				<br/><br/>
				<div id="body">
					Welcome to OpportuneIT!<br/>
<br/>
<b>What's New:</b><br/>

<a href="?page=sinc">SiNC Framework Announced</a><br/>
SiNC is a framework used to manage computers and networks in a secure,<br/>
reliable, easy to learn and use way. SiNC can make almost any network<br/>
management tasks simpler, such as transferring a file over a secure<br/>
connection, running commands on or even remotely controlling computers,<br/>
checking the status of various servers, computers and online services<br/>
automatically, simplifying networked programming tasks and managing network<br/>
security.<br/>
<br/>

<a href="?page=home">Renamed and Redesigned!</a><br/>
We have been renamed to OpportuneIT, and are working on a brand new<br/>
website... Stay tuned for more info on this.<br/>				</div>
		</div>
	</body>
</html>

Code:

html, body {
height: 95%;
}

#container
{
	height: 100%;
	width: 95%;
	margin-left: auto ;
	background: #FFFFFF;
	margin-right: auto ;
}

#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}

#nav-menu
{
	margin-left: auto ;
	margin-right: auto ;
	width:40em
} 

#nav-menu li
{
float: left;
margin: 0 0.15em;
}

#nav-menu li a
{
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
} 

#body
{
	height:auto;
	width: auto;
	margin-left: auto ;
	background: #FFFFFF;
	margin-right: auto ;
	padding: 5px;
}

#header
{
	margin:0px;
	padding:0px;
	background: #000000;
	width:auto;
	height:54px;
	font-family:Verdana;
	font-size:30px;
	text-align:center;
	color:#FFFFFF;
	border-bottom: #AAAAAA solid 5px;
}

#footer
{
	margin:0px;
	padding:0px;
	background: #000000;
	width:auto;
	height:24px;
	text-align:center;
	color:#FFFFFF;
}

.rounded-corners {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 19px;
	border-style:solid;
	border-width:20px;
}

Thanks in advance.

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 think I'm having a CSS brain fart here. I'm trying to nest some divs, which is working, but the "helper" won't go where I need it to go. The "helper" is inside the "map" and needs to sit at the bottom of the "map" div because the regular content that appears in there (images) may not be the full height. Currently, the "helper" is sitting just below the image.

For example, MAP is 400px tall. HELPER is 98px tall. If there is a picture in MAP that is 213px tall, then there should be 89px between the bottom of the image and HELPER. Here is the code:

PHP Code:
#content {
    border:1px solid #000000;
    margin:0px auto;
    width:900px;
    height:402px;
    text-align:left;
    }
#content #map {
    float:right;
    width:302px;
    height:400px;
    margin:2px 2px 2px 2px;
    display:inline;
    text-align:center;
    }
#content #map #helper {
    top:300px;
    width:298px;
    height:98px;
    } 





I've tried position and bottom as well. Those items seem to ignore the dimensions of #map and throw the div at the bottom of the page instead of the bottom of #map.

If there is a better way, let me know.