help with parent/child css issues

Hope I have got the grasp of id and class but perhaps not.

This section of code displays in IE^ on XP nearly as intneded. The boreder around the div id=menu doesn't extend below the items of the menu. I would ask you for help with that. Also, when viewed in FF, most of the style elements are ignored. PLz help me understand why this might be.

here's the html

<div id="menu">
<div id="table">
<h1> Table d'Hôte Menu</h1>
<div class="meallayout">
<div class="titlediv"><p class="title"> <a class="textlink" href="/cgi-bin/pier36/Tester_Menu/publicdetail.pl/path=Tabledhote&action=View&base=item1"> Monkfish </a> </p></div>
<div class="pricediv"> £15.00 </div>
<div class="summarydiv"> Monkfish saltimbocca on lime risotto with macedoine of beetroot & rocket burre blanc </div>
</div>




Her's the css


body {
text-align : center;
}

div#menu {
padding : 10px;
margin : 10px;}

div#table {
margin : auto auto;
text-align : center;

background-color : transparent;
border : 1px solid #d2d2d2;
padding : 0 4%;
font-size : 1em;
}



#table h1 {

font-family : "Old English Text MT", verdana, sans-serif, helvetica;

font-weight : bold;

color : #000000;

padding-bottom : 20px;
}



#table .meallayout {
text-align : center;
margin : auto auto;
}

#table .meallayout .titlediv {
float : left;
background-color : #000000;
width : 80%;
padding : 10px 0;
}



#table .meallayout .titlediv .p {
font-family : "Trebuchet ms", verdana, sans-serif, arial, helvetica;

background-color : transparent;

text-align : center;

color : #fffffff;

padding : 0 20px;

font-size : 1em;
}

#table .meallayout .summarydiv {
float : left;
width : 80%;
clear : both;
padding : 10px 0;
background-color : #ffff80;
}

#table .meallayout .summarydiv p {
font-weight : bold;
}

#table .meallayout .pricediv {
float : right;
top : 0px;
width : 17%;
height : 25px;
background-color : #ff8080;
padding : 10px 0;
}

#table .meallayout .pricediv p {
font-weight : bold;
}


*/#table td a:link, a:visited, a:active, a:hover {
font-family : "Trebuchet ms", verdana, sans-serif, arial, helvetica;

font-weight : bold;
text-decoration : none;
color : #977F78;
background-color : transparent;
font-size : 1em;
}


#table td a:hover {
color : #BD75A0;
background-color : transparent;
}



#table td hr {
color: #004040;
}







Bazz

Do you have a link Bazz? It's easier for me to see it in action, and compared to all elements of the page...

Also, we could simplify this a bit. Your current code uses a little too many divs, we call it 'divitis' from god knows who, but the popular zeldman book makes strong use of the term. By using semantic coding, you not only simplify your code, but also your updates and how you apply styles. check it:

<div id="menu">
<h1>Table d'Hôte Menu</h1>
<h2><a href="/cgi-bin/pier36/Tester_Menu/publicdetail.pl/path=Tabledhote&action=View&base=item1">Monkfish</a></h2>
<cite> £15.00 </cite>
<p> Monkfish saltimbocca on lime risotto with macedoine of beetroot & rocket burre blanc </p>
</div>


If I see your full page, I can show you how to style it to look the same:) Either way, you can now style it appropriately:

#menu {}
#menu h1{}
#menu h2{}
#menu cite{}
#menu p{}


... on a latter note, cleaning up that code shows me you had two divs that weren't closed. That might be your problem (div menu, and div table weren't closed) - but I would seriously look into making your code 'semantic' -- look how much simpler it is!

PS - Remember to use the proper ampersand character both in your text, and in your URL's for your links:

&amp;

Thank you bradyJ I'll try what you suggest :thumbsup:

link here (http://cms.thechrissystem.com/cgi-bin/pier36/Tester_Menu/publicindex2.pl/Tabledhote)

If you look at the url and then replace Tabledhote with Bar_Snack, you'll not only see a different layout (and menu), but it's a different stylesheet, called by the perl code based on the url.

I have tried (until my brain went to mush), to think of a way of having a default css for the main stuff and then the specifics to be served by the Bar_Snack or Tabledhote css (triggered by the url). I am not asking you to do this for me but if you could help me by explaining what it is exactly that I am trying to do, then I might find it seasier to pick up the thought process again.

Bazz

PS, now I'm sure you can undertsand my sig :D

Hey Bazz,

One tip I use for serving different styles to specific pages is to assign the body an id as well:

<body id="dinner">
<ul id="menu>
<li>...</li>
</ul>
</body>

#dinner #menu {
...styles...
}

It makes it easier to cut down on the number of ids I have in the page, plus it lets me assign page specifc effects easily. Maybe it'll work for you instead of the Perl?

Whoops, beat me to it again:)

I would agree -- it's a simple common technique, and very powerful. I used this recently (http://www.bodyecologydiet.com) as a technique so that the arrow from the top menu points on the specific main page - adding a whole new CSS menu as needed per page.

Hey guys thanks. I'll have to 'digest' that inwardly before I can be sure it's suitable here. Y'see, the different menus are served by the perl file - the sole perl file - and the content added from the db's is determined by the last part of the url.

My initial response is to say that yes your suggestion is probably what I need but I need also, to interpret it to my situation with the perl. sort of like, if 'menutype' = Bar_Snack, css = Bar_Snack.css elseif menutype = Tabledhote css = Table_dHote.css etc.

Yes I am beginning to see how it can go so that ultimately, each new customer requires only the copying and pasting of one folder to give them their menus with the only configging that of colors and text styles. must cms that also. :)

Bazz
PS BradyJ - I loved that site the moment I saw it. the top banner is cool and the layout too seems well planned.

PS BradyJ - I loved that site the moment I saw it. the top banner is cool and the layout too seems well planned.

Thanks bazz :thumbsup:

still have a slight problem. If you lok at the page in FF the namne of the dish and the price should be on the same level. I can't see what is causing them not to be. Help appreciated.

Also, I have used the headings of h1, h2, cite, p. Are there any others that I can use as there are about 12 different fields in total and they are not paragraphs. I tried just naming them after their function, eg price but I got an inconsistency between IE and FF which doesnt happen when I use cite.

Bazz

As far as the menu semantics go, I'd say a definition list was made for this, or even (gasp!) a table. I posted a similar problem awhile back and it turned into a pretty good discussion (http://codingforums.com/showthread.php?t=51046). Either one would be appropriate, seeing as how you have three items that relate to each other: menu item, price, description.

<dl>
<dt>Cheetos</dt>
<dd>$1.50</dd>
<dd>A delicious crunchy puff of goodness dusted with the finest cheese powders.</dd>
</dl>

or

<table>
<thead>
<tr>
<th>Menu Item</th>
<th>Price</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cheetos</td>
<td>$1.50</td>
<td>A delicious crunchy puff of goodness dusted with the finest cheese powders.</td>
</tr>
</tbody>
</table>


As far as FF going nutso, I'll take a look right now...

OK I have run wioth the <dl> and it works ok for me.

I just have one stoopid problem that I cant fix. Its bugghin me coz I do know the answer.

What should I do to get the a href working.

dl.bands dt {
clear: right;
background: transparent;
padding: 0.25em 0.5em;
font-weight: bold;

letter-spacing: 0.5em;
text-align : left;
}
dl.bands dd {
margin: 0 0 0 0.5em;
text-align : left;
padding : 0 25px;
}
dl.bands dd.img {
float: right;
margin: 0 0 1em 1em;
width: 145px;
position: relative;
top: -1.75em;
}
dl.bands dd.img img {border: 1px solid #000;
}

dl.bands dd .a:link, a:visited, a:hover, a:active {
font-family : "Trebuchet ms", verdana, sans-serif, arial, helvetica;

font-weight : bold;
text-decoration : none;
color : #000080;
background-color : transparent;
font-size : .75em;
}


dl.bands dd .a:hover {
color : #BD75A0;
background-color : transparent;
}


It shows the hover OK and visited but not the text style unless you do hover.

Bazz

Could it just be this typo?

dl.bands dd .a:link, a:visited, a:hover, a:active {
font-family : "Trebuchet ms", verdana, sans-serif, arial, helvetica;
}

Perhaps you're right although I could swear I tried that. :rolleyes: The ISP is messing about today so my site is down :mad: I may need to find another soon as these guys are beginning to become extremely incompetent. :mad: :mad:

Bazz