div background-color won't show behind tranbsparent nested divs

bazz

02-17-2005, 07:16 PM

The centerdiv should be #eeeeee; in color. It is but it doesn't run behind the two divs that are nested within it. I can't see why it should be so I shall post the code and css.
HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>

<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="http://.com/globalstyle.css">
<link rel="stylesheet" href="/stylesheets/controlpanel.css" type="text/css">

</head>

<body>

<div id="header">
<img src="http:///images/strapline.gif" alt="the " title="The" />
</div>

<div id="centerdiv">
<legend><h2>Meal Menus Control Panel</h2>
<div id="mainleft">
<fieldset><legend>Breakfasts</legend>

<dl>
<dt>Breakfast Menu</dt>
<dd><a href="http://cms..com/cgi-bin/1/Meal_Menus/publicindex.pl/Breakfast">View</a>  <a href="http://cms..com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Breakfast">Modify</a></dd></dl>
<dl>
<dt>Continental Breakfast Menu</dt>

<dd><a href="http://cms..com/cgi-bin/1/Meal_Menus/publicindex.pl/Continental_Breakfast">View</a>  <a href="http://cms..com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Continental_Breakfast">Modify</a></dd></dd></dl>

<dl><dt>Traditional Irish Breakfast</dt>
<dd><a href="http://cms..com/cgi-bin/1/Meal_Menus/publicindex.pl/Traditional_Irish_Breakfast">View</a>  <a href="http://cms..com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Traditonal_Irish_Breakfast">Modify</a></dd></dl>
</fieldset>

<fieldset><legend>Light Meals</legend>
<dl><dt>Bar Meals </dt><dd>
<a href="http://cms..com/cgi-bin/1/Meal_Menus/publicindex.pl/Bar_Meals">View</a>  <a href="http://cms..com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Bar_Meals">Modify</a></dd></dl>

<dl><dt>HighTea </dt><dd>
<a href="/cgi-bin/1/Meal_Menus/publicindex.pl/High_Tea">View</a>  <a href="/cgi-bin/1/Meal_Menus/admin/builddb.pl/High_Tea">Modify</a></dd></dl>

<dl><dt>Lunch</dt><dd>
<a href="/cgi-bin/1/Meal_Menus/publicindex.pl/Lunch">View</a>  <a href="http://cms..com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Lunch">Modify</a></dd></dl>
</fieldset>

<fieldset><legend>Main Meals</legend>

<dl><dt>Starters</dt><dd>
<a href="/cgi-bin/1/Meal_Menus/publicindex.pl/Starters">View</a>  <a href="http://cms..com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Starters">Modify</a></dd></dl>
<dl><dt>Main Course</dt><dd>
<a href="/cgi-bin/1/Meal_Menus/publicindex.pl/Main_Course">View</a>  <a href="http://cms..com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Main_Course">Modify</a></dd></dl>

<dl><dt>A Là Carte </dt><dd>
<a href="http://cms.m.com/cgi-bin/1/Meal_Menus/publicindex.pl/AlaCarte">View</a>  <a href="/cgi-bin/1/Meal_Menus/admin/builddb.pl/AlaCarte">Modify</a></dd></dl>

<dl><dt>Daily Special's Menu</dt><dd>
<a href="http://cms..com/cgi-bin/1/Meal_Menus/publicindex.pl/Daily_Specials">View</a>  <a href="/cgi-bin/1/Meal_Menus/admin/builddb.pl/Daily_Specials">Modify</a></dd></dl>

<dl><dt>Table d'Hôte</dt><dd>
<a href="http://cms..com/cgi-bin/1/Meal_Menus/publicindex.pl/Tabledhote">View</a>  <a href="http://cms..com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Tabledhote">Modify</a></dd></dl>
</fieldset>
</div>

<div id="mainright">
<fieldset><legend>Special Occasions Meals</legend>

<dl><dt>Christmas Fayre</dt><dd>
<a href="http://cms..com/cgi-bin/1/Meal_Menus/publicindex.pl/Christmas_Fayre">View</a>  <a href="http://cms..com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Christmas_Fayre">Modify</a></dd></dl>
<dl><dt>Easter Menu</dt><dd>
<a href="http://cms..com/cgi-bin/1/Meal_Menus/publicindex.pl/Easter">View</a>  <a href="http://cms..com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Easter">Modify</a></dd></dl>

<dl><dt>Father's Day</dt><dd>
<a href="http://cms..com/cgi-bin/1/Meal_Menus/publicindex.pl/Fathers_Day">View</a>  <a href="http://cms.m.com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Fathers_Day">Modify</a></dd></dl>

<dl><dt>Graduation Menu</dt><dd>
<a href="http://cms..com/cgi-bin/1/Meal_Menus/publicindex.pl/Graduation">View</a>  <a href="http://cms..com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Graduation">Modify</a></dd></dl>
<dl><dt>Mother's Day</dt><dd>
<a href="http://cms..com/cgi-bin/1/Meal_Menus/publicindex.pl/Mothers_Day">View</a>  <a href="http://cms.m.com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Mothers_Day">Modify</a></dd></dl>
<dl><dt>Saint Patrick's Day</dt><dd>
<a href="http://cms..com/cgi-bin/1/Meal_Menus/publicindex.pl/Saint_Patricks_Day">View</a>  <a href="http://cms..com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Saint_Patricks_Day">Modify</a></dd></dl>
<dl><dt>Thanksgiving Day</dt><dd>

<a href="http://cms..com/cgi-bin/1/Meal_Menus/publicindex.pl/Thanksgiving_Day">View</a>  <a href="http://cms..com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Thanksgiving_Day">Modify</a></dd></dl>
<dl><dt>Valentine's Day Menu</dt><dd>
<a href="http://cms..com/cgi-bin/1/Meal_Menus/publicindex.pl/Valentines_Day">View</a>  <a href="http://cms..com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Valentines_Day">Modify</a></dd></dl>
</fieldset>

<br /><br />

CSS

#centerdiv {
background-color : #eeeeee;
}

#centerdiv h2 {
margin : auto auto;
font-family : "Comic Sans MS", verdana, sans-serif, arial, helvetica;
color : #808080;
}

/*LEFT DIV*/

#mainleft {
float : left;
width : 40%;
padding : 25px;
text-align : center;
}

#mainleft legend {
font-weight : bold;
}

#mainleft fieldset {

padding : 10px;
background-color : transparent;
text-align : right;
}

#mainleft dt {
float : left;
clear : left;
}

#mainleft dl dd {
background-color : #transparent;
float :right;
text-align : right;
}

#mainleft a:link, a:visited, a:hover, a:active {
font-family : "Trebuchet ms", verdana, sans-serif, arial, helvetica;
font-weight : bold;
text-decoration : none;
color : #000;
background-color : transparent;
font-size : 1em;
}

#mainleft a:hover, #mainright a:hover {
color : #ffff80;
background-color : transparent;
}

/*RIGHT DIV*/

#mainright {
float : right;
width : 40%;
padding : 25px;
text-align : center;
}

#mainright legend {
font-weight : bold;
}

#mainright fieldset {

padding : 10px;
background-color : transparent;
}

#mainright dl {
background-color : #808080;
}

#mainright dt {
float : left;
clear : left;
}

#mainright dl dd {
background-color : transparent;
float :right;
text-align : right;
}

#mainright a:link, a:visited, a:hover, a:active {
font-family : "Trebuchet ms", verdana, sans-serif, arial, helvetica;
font-weight : bold;
text-decoration : none;
color : #000;
background-color : transparent;
font-size : 1em;
}

#mainright a:hover {
color : #ffff80;
background-color : transparent;
}

If any of you can show me the way to combine the attributes for mainleft and mainright I would be appreciative. I tried #mainleft, #mainright {} but it didn't work.

Bazz

chilipie

02-17-2005, 08:01 PM

You do realise you've forgotten <html>, </body> and </html> don't you...?

mcdougals4all

02-17-2005, 08:09 PM

You do realise you've forgotten <html>, </body> and </html> don't you...?
There were a couple of nesting errors as well. But the real problem is that you need a clearing element before closing #centerdiv.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="http://.com/globalstyle.css">
<link rel="stylesheet" href="/stylesheets/controlpanel.css" type="text/css">

</head>

<body>

<div id="header">
<img src="http:///images/strapline.gif" alt="the " title="The">
</div>

<div id="centerdiv">
<h2>Meal Menus Control Panel</h2>
<div id="mainleft">
<fieldset><legend>Breakfasts</legend>

<dl>
<dt>Breakfast Menu</dt>
<dd><a href="http://cms..com/cgi-bin/1/Meal_Menus/publicindex.pl/Breakfast">View</a>  <a href="http://cms..com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Breakfast">Modify</a></dd></dl>
<dl>
<dt>Continental Breakfast Menu</dt>

<dd><a href="http://cms..com/cgi-bin/1/Meal_Menus/publicindex.pl/Continental_Breakfast">View</a>  <a href="http://cms..com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Continental_Breakfast">Modify</a></dd></dl>

<dl><dt>Traditional Irish Breakfast</dt>
<dd><a href="http://cms..com/cgi-bin/1/Meal_Menus/publicindex.pl/Traditional_Irish_Breakfast">View</a>  <a href="http://cms..com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Traditonal_Irish_Breakfast">Modify</a></dd></dl>
</fieldset>

<fieldset><legend>Light Meals</legend>
<dl><dt>Bar Meals </dt><dd>
<a href="http://cms..com/cgi-bin/1/Meal_Menus/publicindex.pl/Bar_Meals">View</a>  <a href="http://cms..com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Bar_Meals">Modify</a></dd></dl>

<dl><dt>HighTea </dt><dd>
<a href="/cgi-bin/1/Meal_Menus/publicindex.pl/High_Tea">View</a>  <a href="/cgi-bin/1/Meal_Menus/admin/builddb.pl/High_Tea">Modify</a></dd></dl>

<dl><dt>Lunch</dt><dd>
<a href="/cgi-bin/1/Meal_Menus/publicindex.pl/Lunch">View</a>  <a href="http://cms..com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Lunch">Modify</a></dd></dl>
</fieldset>

<fieldset><legend>Main Meals</legend>

<dl><dt>Starters</dt><dd>
<a href="/cgi-bin/1/Meal_Menus/publicindex.pl/Starters">View</a>  <a href="http://cms..com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Starters">Modify</a></dd></dl>
<dl><dt>Main Course</dt><dd>
<a href="/cgi-bin/1/Meal_Menus/publicindex.pl/Main_Course">View</a>  <a href="http://cms..com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Main_Course">Modify</a></dd></dl>

<dl><dt>A Là Carte </dt><dd>
<a href="http://cms.m.com/cgi-bin/1/Meal_Menus/publicindex.pl/AlaCarte">View</a>  <a href="/cgi-bin/1/Meal_Menus/admin/builddb.pl/AlaCarte">Modify</a></dd></dl>

<dl><dt>Daily Special's Menu</dt><dd>
<a href="http://cms..com/cgi-bin/1/Meal_Menus/publicindex.pl/Daily_Specials">View</a>  <a href="/cgi-bin/1/Meal_Menus/admin/builddb.pl/Daily_Specials">Modify</a></dd></dl>

<dl><dt>Table d'Hôte</dt><dd>
<a href="http://cms..com/cgi-bin/1/Meal_Menus/publicindex.pl/Tabledhote">View</a>  <a href="http://cms..com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Tabledhote">Modify</a></dd></dl>
</fieldset>
</div>

<div id="mainright">
<fieldset><legend>Special Occasions Meals</legend>

<dl><dt>Christmas Fayre</dt><dd>
<a href="http://cms..com/cgi-bin/1/Meal_Menus/publicindex.pl/Christmas_Fayre">View</a>  <a href="http://cms..com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Christmas_Fayre">Modify</a></dd></dl>
<dl><dt>Easter Menu</dt><dd>
<a href="http://cms..com/cgi-bin/1/Meal_Menus/publicindex.pl/Easter">View</a>  <a href="http://cms..com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Easter">Modify</a></dd></dl>

<dl><dt>Father's Day</dt><dd>
<a href="http://cms..com/cgi-bin/1/Meal_Menus/publicindex.pl/Fathers_Day">View</a>  <a href="http://cms.m.com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Fathers_Day">Modify</a></dd></dl>

<dl><dt>Graduation Menu</dt><dd>
<a href="http://cms..com/cgi-bin/1/Meal_Menus/publicindex.pl/Graduation">View</a>  <a href="http://cms..com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Graduation">Modify</a></dd></dl>
<dl><dt>Mother's Day</dt><dd>
<a href="http://cms..com/cgi-bin/1/Meal_Menus/publicindex.pl/Mothers_Day">View</a>  <a href="http://cms.m.com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Mothers_Day">Modify</a></dd></dl>
<dl><dt>Saint Patrick's Day</dt><dd>
<a href="http://cms..com/cgi-bin/1/Meal_Menus/publicindex.pl/Saint_Patricks_Day">View</a>  <a href="http://cms..com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Saint_Patricks_Day">Modify</a></dd></dl>
<dl><dt>Thanksgiving Day</dt><dd>

<a href="http://cms..com/cgi-bin/1/Meal_Menus/publicindex.pl/Thanksgiving_Day">View</a>  <a href="http://cms..com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Thanksgiving_Day">Modify</a></dd></dl>
<dl><dt>Valentine's Day Menu</dt><dd>
<a href="http://cms..com/cgi-bin/1/Meal_Menus/publicindex.pl/Valentines_Day">View</a>  <a href="http://cms..com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Valentines_Day">Modify</a></dd></dl>
</fieldset>

</div>

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

</div>
</body>
</html>

chilipie

02-17-2005, 08:17 PM

Alternatively, you could do it in CSS, without adding any extra markup:

div#mainright:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

ReadMe.txt

02-17-2005, 08:24 PM

shame that'll only work in opera, might work in moz now but it didnt used to allow you to set display on :before and :after.

chilipie

02-17-2005, 08:27 PM

shame that'll only work in opera, might work in moz now but it didnt used to allow you to set display on :before and :after.
Think it does work in Moz. :confused: ... Andrew posted that for me ages ago, when I was working on a 2 columned site and it seemed to work fine in Moz.

mcdougals4all

02-17-2005, 08:37 PM

Alternatively, you could do it in CSS, without adding any extra markup:

div#mainright:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

Good tip, chilipie. I haven't used that. :thumbsup:

bazz

02-18-2005, 12:10 PM

Guys, I had forgotten the <html> as you said :o but I did have the closing body and html tags. They just got left behind when I pulled this script from the perl file.

mcdougals4all, I hadn't thought about putting a clearing element and am a bit surprised that it is necessary. I recall the days when we had to use spacer.gif all over the place and it was a workaround too wasn't it?

Anyhoo, could you elaborate on the nesting errors. I'm new to <dl><dt><dd> etc so maybe I've picked it up wrongly?

Thanks to each of you.

Bazz

chilipie

02-18-2005, 01:51 PM

A defintion list should look something like this:

<dl>
<dt>Definition Term</dt>
<dd>Definition 1</dd>
<dt>Definition Term</dt>
<dd>Definition 1</dd>
<dd>Definition 2</dd>

</dl>

http://www.w3schools.com/tags/tag_dl.asp

bazz

02-18-2005, 01:55 PM

wel I wasn't far off. I just ahve placed each item in its own <dl>. I suppose whilst a simole error it is fundamental. OK so I'm off to change that now. I hope it doesn't bust the page. Just my luck for a Friday. :eek:

bazz

mcdougals4all

02-18-2005, 01:58 PM

Anyhoo, could you elaborate on the nesting errors. I'm new to <dl><dt><dd> etc so maybe I've picked it up wrongly?

They were minor. I only mentioned it because they were the first things I noticed, and nesting errors can produce some pretty weird visual results.

I think one closing </div> was missing, and there was an extra closing </dd> on one of the items. I edited these in the revised code I posted back.

:thumbsup:

bazz

02-18-2005, 03:23 PM

Thanks.

I removed the extraneous </dl><dl> tags and the page looks exactly the smae as before - except that the closing div mentioned above makes the background cidv now show itself where it should. Interesting though, that I has to put a - in the div with the same color as the background before the div would show.

working fine now thanks. :thumbsup:

Bazz