Previous Message
Next Message

format a <p> within a <td>

Sent by Adam Kuehn on 23 January 2004 20:08


Andrew Peterson wrote:
><TD id="meetingDates" class="meetingDates">
>	<DIV id="meetingDates">
>		<p>I can feel you running through me.</p>
>	</DIV>
></TD>

>Here's my css - it's equally entertaining:
>
>meetingDates{font-family: Verdana, sans-serif;  font-size: 8px; }
>p.meetingDates{font-family: Verdana, sans-serif;  font-size: 8px; }
>td.meetingDates{font-family: Verdana, sans-serif;  font-size: 8px; }
>#meetingDates{font-family: Verdana, sans-serif;  font-size: 8px; }
>td.p.meetingDates{font-family: Verdana, sans-serif;  font-size: 8px; }

The first, second, and last of these declarations will not match any 
element you have here.  The first one matches any HTML element 
<meetingDates>, of which there are none.  The second matches any 
paragraph of class "meetingDates".  The paragraph has no class 
attribute.  The third element would match any td which is both class 
"p" and class "meetingDates".  There is no class "p" defined.

The third element would apply to loose text with a td of class 
"meetingDates".  However, because you defined the same attributes 
directly for paragraph elements, that specific declaration will 
"win".  Similarly, the fourth declaration applies to any element with 
an ID of "meetingDates", but again the specific declarations for the 
paragraph element would override that.

The selector #meetingDates p will do what you need in most browsers 
with no change to the markup.  However, you *should* change the 
markup.  You are violating the spec.  A given ID may be used only 
once per document.  Here you have both the td and the div with the 
same ID, which is forbidden.  While some browsers may forgive you, 
results may be unpredictable.  Similarly, while the spec does not 
specifically prohibit you from having an ID and a class with the same 
name, this is a bad idea.

It sounds to me like you need the div to have a class, and nothing 
else.  I would use this:

<td>
   <div class="meetingDates">
     <p>blah</p>
   </div>
</td>

..meetingDates p { /*declarations*/ }

This selects any paragraph inside any element of class "meetingDates".

You may want to spend some time with the selectOracle:

http://gallery.theopalgroup.com/selectoracle/

HTH,
-- 

-Adam Kuehn
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Possibly related: