Jump to content
  • Checkout
  • Login
  • Get in touch


The e-commerce.

Bug or Something everyone should be aware of


Recommended Posts

I have been formatting my site with the StyleSheet and after a hour of hair pulling I found what I think may be a design problem in some of the boxes.


I had been changing all my font sizes to 'em' so that users who wished to change the size of the text (view) could do so. More in line with accessibility standards.


As many would know with CSS a style can be inherited from a parent. That means that if the body starts of with 1em; being the default browser font size of 16px, and an item (Lets say a <div class="level1">) inheriting from body had a font size of 0.75em then font size would be 12px.


The problem is if you want another Div (say <div class="level2") to sit within the first div (level1) with a font size also of 12px then you must set it size as 1em as it inherits its size from the 1st div (level1) already at 12px. If you had set the size of the second div (level2) to 0.8em, then it would be 0.8em of 12px or 9.6px (rounded to nearest supported)


Note: 1em = 100%, 0.8em = 80%


Now - in many of the boxes two styles are used. Where ".infoBoxContents" is normally the parent of ".boxtext", but in some cases ".infoBoxContents" has been used as a child of ".boxtext" or ".infoBoxContents" is used by itself. This can cause numerous problems if CSS is to be used correctly.


Looking at the source of index, more specifically at the bestsellers box

    <td><table border="0" width="100%" cellspacing="0" cellpadding="3" class="infoBoxContents">
   <td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="1"></td>

   <td class="boxText">
<table border="0" width="100%" cellspacing="0" cellpadding="1"><tr><td class="infoBoxContents" valign="top">01.</td>

<td class="infoBoxContents"><a href="http:url/product_info.php?products_id=28">product</a></td></tr><tr>

<td class="infoBoxContents" valign="top">02.</td>

<td class="infoBoxContents"><a href="http://url/product_info.php?products_id=29">product</a></td></tr><tr>

<td class="infoBoxContents" valign="top">03.</td>

<td class="infoBoxContents"><a href="http://url/product_info.php?products_id=34">product</a></td></tr></table></td>

you can see that infoboxcontent is first a parent and then becomes a child of boxtext. due to tables browser is confused and both parents are ignored and the last infoboxcontent takes on a role of parent inheriting from the body.


Taken from the bestsellers.php box -


      $bestsellers_list .= '<tr><td class="infoBoxContents" valign="top">' . tep_row_number_format($rows) . '.</td><td class="infoBoxContents"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $best_sellers['products_id']) . '">' . $best_sellers['products_name'] . '</a></td></tr>';


Changed to


      $bestsellers_list .= '<tr><td class="boxtext" valign="top">' . tep_row_number_format($rows) . '.</td><td class="boxtext"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $best_sellers['products_id']) . '">' . $best_sellers['products_name'] . '</a></td></tr>';


And problem goes away. Although having a parent and child of same name is unusual. In pure CSS the child would inherit from the parent even if same name and text marked as 0.8em would continue to reduce in size for each level. But tables have also had some inheritence problems. Quite often do not inherit, and they seem to ignore the parent if same name.


This may have come about as different developers worked on different boxes. Please keep in mind the flow and inheritence of html and CSS, but probably more to the point, the style parent child relationships already used by others in the project.


hope the above helps everyone.


Note: If you use fixed fonts then this does not affect you.




Link to comment
Share on other sites

Just too many differnt cases where it works on one page but not another - have gone back to fixed fonts for boxes :(


Unless anyone knows of another solution, than rewriting all. Just don't have time for that one as yet.




Link to comment
Share on other sites


This topic is now archived and is closed to further replies.

  • Create New...