Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts

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

    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
    Code:
    <!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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<a href="http://cms..com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Main_Course">Modify</a></dd></dl>
    
    <dl><dt>A L&agrave; Carte </dt><dd>
    <a href="http://cms.m.com/cgi-bin/1/Meal_Menus/publicindex.pl/AlaCarte">View</a>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<a href="http://cms..com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Valentines_Day">Modify</a></dd></dl>
    </fieldset>
    
    
    
    <br /><br />
    CSS

    Code:
    #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
    Last edited by bazz; 02-17-2005 at 08:18 PM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #2
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You do realise you've forgotten <html>, </body> and </html> don't you...?

  • #3
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Chilipie
    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.

    Code:
    <!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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<a href="http://cms..com/cgi-bin/1/Meal_Menus/admin/builddb.pl/Main_Course">Modify</a></dd></dl>
    
    <dl><dt>A L&agrave; Carte </dt><dd>
    <a href="http://cms.m.com/cgi-bin/1/Meal_Menus/publicindex.pl/AlaCarte">View</a>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #4
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Alternatively, you could do it in CSS, without adding any extra markup:
    Code:
    div#mainright:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Sheffield, UK
    Posts
    552
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    "To be successful in IT you don't need to know everything - just where to find it in under 30 seconds"

    (Me Me Me Me Me Me Me Me Me)

  • #6
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ReadMe.txt
    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. ... Andrew posted that for me ages ago, when I was working on a 2 columned site and it seemed to work fine in Moz.

  • #7
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by chilipie
    Alternatively, you could do it in CSS, without adding any extra markup:

    Code:
    div#mainright:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }
    Good tip, chilipie. I haven't used that.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #8
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Guys, I had forgotten the <html> as you said 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
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #9
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    A defintion list should look something like this:
    Code:
    <dl>
         <dt>Definition Term</dt>
              <dd>Definition 1</dd>
         <dt>Definition Term</dt>
              <dd>Definition 1</dd>
              <dd>Definition 2</dd>
         <!-- Etc. -->
    </dl>
    http://www.w3schools.com/tags/tag_dl.asp

  • #10
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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.

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #11
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bazz
    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.

    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #12
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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.

    Bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •