SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist
    Join Date
    May 2003
    Posts
    590
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What happens when a class doesn't exist ?

    Hi,

    I'm trying to understand what is happening with some classes. The snippet of the stylesheet is:

    Code:
     A.buybothPrice {
     	font-family: Palatino Linotype;
     	font-size: 18px;
     /*	color: b2d524; */
     	color: #59118E;
     }
     A.buybothHeading {
     	font-family: Palatino Linotype;
     	font-size: 18px;
     /*	color: b2d524; */
     	color: #59118E;
     }
     .buybothText {
     	font-family: Verdana, Arial, sans-serif;
     	font-size: 11px;
     	color: #506b00;
     }
    The html source code as follows:

    Code:
     <table border="0" width="100%" cellspacing="0" cellpadding="0">
     <tr>
     <td colspan="5" align="left" class="buybothText"><a class="buybothHeading">Special Bundling Offer (add fragrance selections to comments box)</a><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="5">Buy 		<script language="javascript"><!--
     		    document.write('<a class="ProductInfoImage" href="javascript:popupWindow(\'http://example.com/popup_image.php/pID/23\')"><b>Champagne Gel Candles</a></b>');
     		//--></script>
     
     		<noscript>
     		<a class="ProductInfoImage" href="http://example.com/images/champagne_candles_tn.jpg"><b>Champagne Gel Candles</a></b>	    </noscript>
    Now, the string "Special Bundling Offer (add fragrance selections to comments box)" is displaying as per class "buybothHeading" , as expected, that's okay.

    But the problem I can't understand is down further, the string "Champagne Gel Candles", appears to be displaying in the class "buybothText". Now, all I can assume is because the class "ProductInfoImage" is not defined (it is definitely now where in the stylesheet, and not even in any file on the website), that it has used the class "buybothText" , because that is the class defined for the "td".

    Is that how it works, or more the point, are my assumptions correct ??

    Btw, the reason why the (PHP) code has the class "ProductInfoImage" defined, is because I'm using an osCommerce contribution, which comes from another website, and yes, _that_ class is on _that_ website.

    I'm basically needing to understand how classes get turned on/off (no doubt by a new class statement), and what happens when a class is specified that doesn't exist.

    Also, what happens when there is a 'class within a class', which one is used ??

    Thanks,

    Peter

  2. #2
    Are You There? KDesigns's Avatar
    Join Date
    Oct 2003
    Location
    Your Monitor
    Posts
    1,147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When that class isn't found it will either display the default settings or the class style of it's parent element -- As in this case with it taking the class style of the <td>

    Also, not exactly sure what you mean by a 'class within a class'. Are you talking about trying to apply 2 classes to one element? If that is the case, I believe the first class takes precedence.
    ChooseDaily.com - Follow on Twitter
    Top Resources for Web Designers and Developers Every Day!

  3. #3
    SitePoint Evangelist
    Join Date
    May 2003
    Posts
    590
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Quote Originally Posted by KDesigns
    When that class isn't found it will either display the default settings or the class style of it's parent element -- As in this case with it taking the class style of the <td>
    Okay, thanks, so that explains it.

    Quote Originally Posted by KDesigns
    Also, not exactly sure what you mean by a 'class within a class'. Are you talking about trying to apply 2 classes to one element? If that is the case, I believe the first class takes precedence.
    I didn't explain too well, I just meant with this type of coding:

    Code:
    <td colspan="5" align="left" class="buybothText"><a class="buybothHeading">
    to me, it's like a 'class within a class', but it's not is it, as you say the parent is "buybothText", and the class "buybothHeading" will no doubt 'end' with a "</a>", and then the class will rivert back to the parent - "buybothText"

    I assume this rule follows throughout, when the "</td>" appears, the class will be either one dfined for the row, or if that isn't present, the class for the table, and if that isn't present, the default.

    Hopefully I'm beginning to understand this a bit.

    Thanks,

    Peter

  4. #4
    SitePoint Evangelist
    Join Date
    May 2003
    Posts
    590
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I have been able to get the desired effect, in regards to the styles changing, the code as follows, using the same stylesheet:

    Code:
       <table border="0" width="100%" cellspacing="0" cellpadding="0">
         <tr>
       	<td colspan="5" align="left" class="buybothText">
       	  <a class="buybothHeading">Special Bundling Offer</a>
     	 <a class="buybothText"><b> (add fragrance selections to comments box)</b></a>
     	 <img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="5">Buy 	<script language="javascript"><!--
       		document.write('<a class="ProductInfoImage" href="javascript:popupWindow(\'http://example.com/popup_image.php/pID/23\')"><b>Champagne Gel Candles</a></b>');
       		//--></script>
       
       		<noscript>
     		<a class="ProductInfoImage" href="http://example.com/images/champagne_candles_tn.jpg"><b>Champagne Gel Candles</a></b>
       		</noscript>
    but I think it is 'messy', for a start the class "buybothText" isn't defined as:

    Code:
    A.buybothText {
    but I didn't know how else to get the string to appear as:

    Special Bundling Offer (add fragrance selections to comments box)
    The words inside the brackets need to be a different colour, size and font, to the words "Special Bundling Offer", and they are appearing as needed, but I'm sure there is a better way to do this, seems too much like a hack to me.

    Peter


Bookmarks

Posting Permissions

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