Css problems

KJ666 · March 30, 2010

I am trying to change the font, color, size etc in product info page.

Just doing one thing at a time and cant even do the product title anyone know why ???

Out of product info.php you can see i made a td class productname.

<table>
<!-- start products name //-->
<tr><td class="productname"><?php echo $products_name; ?></td></tr>
<!-- end products name //-->


<!-- start price //-->
<tr><td><?php echo $products_price; ?></td></tr>
<!-- end price //-->

And out of the stylesheet.

//Product info
TD.productname { font-size:13px; font-weight:bold; font-color: #000066;  }

MrPhil · March 30, 2010

Well, what do you get? Are you getting the correct text in $products_name, but the styling is not correct, or are you getting no text at all? In the former case (wrong styling), if "productname" is only used here, try removing TD in the CSS and see if it's found then. In the latter case (no text), is that the correct variable name (not $product_name) and you've confirmed that it has the correct text in it?

KJ666 · March 30, 2010

I am getting the text with no styling at all.

multimixer · March 30, 2010

Make a div or a span inside the td and style it in css

KJ666 · March 30, 2010

I tried that didnt work, any other ideas ?

MrPhil · March 31, 2010

TD.productname should apply the CSS to any <td> with a class of "productname". By any chance are you using IE6 browser? I seem to recall that it didn't like that kind of notation. If the "productname" class isn't used anywhere else, so that you don't need to explicitly restrict it to <td> elements, you could try just .productname in the CSS file (instead of TD.productname).

KJ666 · March 31, 2010

Nope dont work.

Css code:

//Product info
.productname { font-size:13px; font-weight:bold; font-color: #000066;  }

Product_info.php

<?php
/*
 $Id: product_info.php 1739 2007-12-20 00:52:16Z hpdl $

 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com

 Copyright (c) 2003 osCommerce

 Released under the GNU General Public License
*/

 require('includes/application_top.php');

 require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_PRODUCT_INFO);

 $image_group = TINY_IMAGE_GROUP_SIZE; //Number of images to show per row/column
$vertical_format = (ADDITIONAL_IMAGE_FORMAT == 'vertical');
$max_title_length = 40; //Set the maximm length of popup titles before they are broken into multiple lines.
$product_info_query = tep_db_query("select p.products_id, pd.products_name, pd.products_description, p.products_model, p.products_ingredients, p.products_quantity, p.products_image, p.products_image_array, pd.products_url, p.products_price, p.products_tax_class_id, p.products_date_added, p.products_date_available, p.manufacturers_id from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'");
   $product_info = tep_db_fetch_array($product_info_query);
	$products_image_array = unserialize($product_info['products_image_array']);
   if (!is_array($products_image_array)) $products_image_array = array();

?>
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html <?php echo HTML_PARAMS; ?>>
<head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>">
<title><?php echo TITLE; ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script language="javascript"><!--
function popupWindow(url) {
 window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,copyhistory=no,width=100,height=100,screenX=150,screenY=150,top=150,left=150')
}
//--></script>
<script type="text/javascript" src="<?php echo DIR_WS_IMAGES ?>js/jquery.js"></script>
<script type="text/javascript" src="<?php echo DIR_WS_IMAGES ?>js/jquery.fancybox.js"></script>
<script type="text/javascript" src="<?php echo DIR_WS_IMAGES ?>js/jquery.easing.js"></script>
<script type="text/javascript" src="<?php echo DIR_WS_IMAGES ?>js/jquery.easydrag.handler.beta2.js"></script>
<link rel="stylesheet" href="<?php echo DIR_WS_IMAGES ?>js/fancybox.css" type="text/css" media="screen">
<script type="text/javascript">
	$(document).ready(function() {
		$("div#fancy a").fancybox({
	'zoomSpeedIn':	800, 
	'zoomSpeedOut':	700, 
	'imageScale' : true,
	'centerOnScroll': 	true,
	'hideOnContentClick' : false,
	'overlayShow':	<?php echo (DIM_BACKGROUND == 'true' ? 'true' : 'false'); ?>,
	'overlayOpacity': <?php echo (BKG_LUMA/10); ?>,
	'zoomOpacity': 	true,
	<?php if (SWING_POPUP == 'true') echo "'easingIn' : 'easeOutBack',"; ?>
	'hideOnContentClick': false

});
<?php if (DRAG_POPUP == 'true') echo '$("#fancy_outer").easydrag();'; ?>
});

</script>
<style type="text/css">
<?php if (SHOW_NAV == 'true') echo 'span#fancy_left_ico {left: 20px;}  span#fancy_right_ico {right: 20px;}';
				switch (POS_NAV) {
								case 'top':
								echo 'span.fancy_ico { top: 38px; }';
								break;
							case 'bottom':
								echo 'span.fancy_ico { bottom: 20px; }';
								break;
							default:
								echo 'span.fancy_ico { top: 50%; }';
								break;
								}		
								?>

</style>
</head>
<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
<!-- header //-->
<?php require(DIR_WS_INCLUDES . 'header.php'); ?>
<!-- header_eof //-->

<!-- body //-->
<table border="0" width="100%" cellspacing="3" cellpadding="3">
 <tr>
   <td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">
<!-- left_navigation //-->
<?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>
<!-- left_navigation_eof //-->
   </table></td>
<!-- body_text //-->
   <td width="100%" valign="top"><?php echo tep_draw_form('cart_quantity', tep_href_link(FILENAME_PRODUCT_INFO, tep_get_all_get_params(array('action')) . 'action=add_product')); ?><table border="0" width="100%" cellspacing="0" cellpadding="0">
<?php
 if (!tep_db_num_rows($product_info_query)) {
?>
     <tr>
       <td><?php new infoBox(array(array('text' => TEXT_PRODUCT_NOT_FOUND))); ?></td>
     </tr>
     <tr>
       <td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
     </tr>
     <tr>
       <td><table border="0" width="100%" cellspacing="1" cellpadding="2" class="infoBox">
         <tr class="infoBoxContents">
           <td><table border="0" width="100%" cellspacing="0" cellpadding="2">
             <tr>
               <td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
               <td align="right"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image_button('button_continue.gif', IMAGE_BUTTON_CONTINUE) . '</a>'; ?></td>
               <td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
             </tr>
           </table></td>
         </tr>
       </table></td>
     </tr>
<?php
 } else {

   tep_db_query("update " . TABLE_PRODUCTS_DESCRIPTION . " set products_viewed = products_viewed+1 where products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and language_id = '" . (int)$languages_id . "'");

   if ($new_price = tep_get_products_special_price($product_info['products_id'])) {
     $products_price = '<s>' . $currencies->display_price($product_info['products_price'], tep_get_tax_rate($product_info['products_tax_class_id'])) . '</s> <span class="productSpecialPrice">' . $currencies->display_price($new_price, tep_get_tax_rate($product_info['products_tax_class_id'])) . '</span>';
   } else {
     $products_price = $currencies->display_price($product_info['products_price'], tep_get_tax_rate($product_info['products_tax_class_id']));
   }

     $products_name = $product_info['products_name'];
?>













<table border="0" width="100%" cellspacing="0" cellpadding="0" class="productinfo">
<tr>
 <td> 
   <table> 
<!-- start product images //-->
<tr> <td>

<?php
   if (tep_not_null($product_info['products_image'])) {
?>
<div id="fancy">
			  <table border="0" cellspacing="0" cellpadding="2" align="right">
           <tr>
             <td align="center" class="smallText">

<?php if (strlen($product_info['products_name']) > $max_title_length) {  $title = wordwrap(htmlspecialchars($product_info['products_name']), $max_title_length, '<br>');
        } else { $title = htmlspecialchars($product_info['products_name']); } 
$m_source = ''; $thumb = (class_exists('oscthumb') && CFG_MASTER_SWITCH == 'On'); if ($thumb) { preg_match('/"([^"]+)"/',htmlentities ( tep_image(DIR_WS_IMAGES . $product_info['products_image'],'','','','','',5), ENT_NOQUOTES), $image);  $m_source=str_replace('&','&',$image[1]); }

//image size
 if ( $image_size = @getimagesize( DIR_WS_IMAGES . $product_info['products_image'] ) ) {
   $scale = 3.5;  // alter scale factor to suit your needs
   $width = (int)($image_size[0] * $scale);
   $height = (int)($image_size[1] * $scale);
 } else {
   $width = SMALL_IMAGE_WIDTH;
   $height = SMALL_IMAGE_HEIGHT;
 }
 echo '<a  rel="image_group" title="'.$title.'" href="' . ($m_source ? $m_source : DIR_WS_IMAGES . $product_info['products_image']) . '" alt="' . $product_info['products_name'] . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], $width, $height, 'hspace="5" vspace="5"', false, 5) . '<br /></a>';
//image size

              if(!$vertical_format) { echo ''; $row = 1; reset($products_image_array); foreach($products_image_array as $value) { 
						 if ($thumb) {					 
						 $source = ''; preg_match('/"([^"]+)"/',htmlentities ( tep_image(DIR_WS_IMAGES . $value,'','','','','',5), ENT_NOQUOTES), $image);  $source=str_replace('&','&',$image[1]); 
						 } 
						 echo '<a  rel="image_group" title="'.$title.'" href="' . ($source ? $source : DIR_WS_IMAGES . $value) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $value, $product_info['products_name'], TINY_IMAGE_WIDTH, TINY_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '</a>'; 

							++$row; if ($row > $image_group) { echo '<br />'; $row = 1; } } } 
							echo '</td>';
						 if($vertical_format) { echo '<td>'; $row = 1; reset($products_image_array); foreach($products_image_array as $value) { 
						 if ($thumb) {					 
						 $source = ''; preg_match('/"([^"]+)"/',htmlentities ( tep_image(DIR_WS_IMAGES . $value,'','','','','',5), ENT_NOQUOTES), $image);  $source=str_replace('&','&',$image[1]); 
						 } 
						 echo '<a  rel="image_group" title="'.$title.'" href="' . ($source ? $source : DIR_WS_IMAGES . $value) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $value, $product_info['products_name'], TINY_IMAGE_WIDTH, TINY_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br />' . '</a>'; 

								++$row; if ($row > $image_group) { echo '</td><td>'; $row = 1; } } echo '</td>'; } ?>


           </tr>
         </table>
				</div>
<?php
   }
?></td>
<!-- end product images //-->

<!--start tell a friend //-->
<tr><td>
<?php echo '<a href="' . tep_href_link(FILENAME_TELL_A_FRIEND, 'products_id=' . $HTTP_GET_VARS['products_id'], 'NONSSL') . '">Tell a Friend</a>'; ?> 
</td></tr>
<!-- end tell a friend //-->
</table> 


<td>
<table>
<!-- start products name //-->
<tr><td class="productname"><?php echo $products_name; ?></td></tr>
<!-- end products name //-->


<!-- start price //-->
<tr><td><?php echo $products_price; ?></td></tr>
<!-- end price //-->

<!-- start drop down boxes //-->
<tr><td><?php
   $products_attributes_query = tep_db_query("select count(*) as total from " . TABLE_PRODUCTS_OPTIONS . " popt, " . TABLE_PRODUCTS_ATTRIBUTES . " patrib where patrib.products_id='" . (int)$HTTP_GET_VARS['products_id'] . "' and patrib.options_id = popt.products_options_id and popt.language_id = '" . (int)$languages_id . "'");
   $products_attributes = tep_db_fetch_array($products_attributes_query);
   if ($products_attributes['total'] > 0) {
?>
         <table border="0" cellspacing="0" cellpadding="2">
           <tr>
             <td class="main" colspan="2"><?php echo TEXT_PRODUCT_OPTIONS; ?></td>
           </tr>
<?php
     $products_options_name_query = tep_db_query("select distinct popt.products_options_id, popt.products_options_name from " . TABLE_PRODUCTS_OPTIONS . " popt, " . TABLE_PRODUCTS_ATTRIBUTES . " patrib where patrib.products_id='" . (int)$HTTP_GET_VARS['products_id'] . "' and patrib.options_id = popt.products_options_id and popt.language_id = '" . (int)$languages_id . "' order by popt.products_options_name");
     while ($products_options_name = tep_db_fetch_array($products_options_name_query)) {
       $products_options_array = array();
       $products_options_query = tep_db_query("select pov.products_options_values_id, pov.products_options_values_name, pa.options_values_price, pa.price_prefix from " . TABLE_PRODUCTS_ATTRIBUTES . " pa, " . TABLE_PRODUCTS_OPTIONS_VALUES . " pov where pa.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pa.options_id = '" . (int)$products_options_name['products_options_id'] . "' and pa.options_values_id = pov.products_options_values_id and pov.language_id = '" . (int)$languages_id . "'");
       while ($products_options = tep_db_fetch_array($products_options_query)) {
         $products_options_array[] = array('id' => $products_options['products_options_values_id'], 'text' => $products_options['products_options_values_name']);
         if ($products_options['options_values_price'] != '0') {
           $products_options_array[sizeof($products_options_array)-1]['text'] .= ' (' . $products_options['price_prefix'] . $currencies->display_price($products_options['options_values_price'], tep_get_tax_rate($product_info['products_tax_class_id'])) .') ';
         }
       }

       if (isset($cart->contents[$HTTP_GET_VARS['products_id']]['attributes'][$products_options_name['products_options_id']])) {
         $selected_attribute = $cart->contents[$HTTP_GET_VARS['products_id']]['attributes'][$products_options_name['products_options_id']];
       } else {
         $selected_attribute = false;
       }
?> 
           <tr>
             <td class="main"><?php echo $products_options_name['products_options_name'] . ':'; ?></td>
             <td class="main"><?php echo tep_draw_pull_down_menu('id[' . $products_options_name['products_options_id'] . ']', $products_options_array, $selected_attribute); ?></td>
           </tr>
<?php
     }
?>
         </table>
<?php
   }
?></td></tr>
<!-- end drop down boxes //-->


<!-- start buy now button //-->
<tr><td class="main" align="right"><?php echo tep_draw_hidden_field('products_id', $product_info['products_id']) . tep_image_submit('button_in_cart.gif', IMAGE_BUTTON_IN_CART); ?></td></tr>
<!-- end buy now button //-->


<!-- start description //-->
<tr><td>
<p><?php echo stripslashes($product_info['products_description']); ?></p>
</td></tr>
<!-- end description //-->

<!-- Start ingredients //-->
<tr><td>
<?php 
	if (tep_not_null($product_info['products_ingredients'])) {
	echo PRODUCTS_INGREDIENTS.' '.$product_info['products_ingredients'];
	} 
	?>
</td></tr>
<!-- end ingredients //-->


</table>
</td>





<tr>
<td>
<?php
   if ((USE_CACHE == 'true') && empty($SID)) {
     echo tep_cache_also_purchased(3600);
   } else {
     include(DIR_WS_MODULES . FILENAME_ALSO_PURCHASED_PRODUCTS);
   }
 }
?>
       </td>
     </tr>
   </table></form></td>
<!-- body_text_eof //-->
   <td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">
<!-- right_navigation //-->
<?php require(DIR_WS_INCLUDES . 'column_right.php'); ?>
<!-- right_navigation_eof //-->
   </table></td>
 </tr>
</table>
<!-- body_eof //-->

<!-- footer //-->
<?php require(DIR_WS_INCLUDES . 'footer.php'); ?>
<!-- footer_eof //-->
<br>
</body>
</html>
<?php require(DIR_WS_INCLUDES . 'application_bottom.php'); ?>

spooks · March 31, 2010

download firefox and its web developer & firebug plugins, then use that to find the css of any element on a page.

It will show page elements together with any related css.

I suspect your issue is errors in the stylesheet above that class, causing that part of the sheet to be ignored. Firefox will indicate any errors in the stylesheet too.

npn2531 · March 31, 2010

When I have this sort of problem, I have always been able to solve it in one of two ways:

1) Change the 'doctype' of your document or match the case of the stlyesheet and the declaration on the page.. Note you have the 'TD' in your stylesheet in uppercase but the corresponding 'td' on the page in lower case. Some doctypes, and Mr Phil can probably quote chapter and verse on this, ignore this discrepancy and some don't.

2) Something else is overriding the CSS declaration of the TD class="productname". For example, somewhere else on your stylesheet you may have something like:

p, td, tr, table{font-size:11px; font-weight:normal; font-color: #000000; }

or some such.

npn2531 · March 31, 2010

Okay, Spooks you are just ahead of me, and better, you have indicated a more specific method to locate the overriding CSS in the stylesheet.

MrPhil · March 31, 2010

I agree that most likely, either a later CSS entry is overriding your TD.productname settings, or there is an error in your CSS file that means your TD.productname setting is not recognized. Try temporarily changing a text color or something up ahead of your entry, to see if there's some point that it stops recognizing the CSS.

I don't think it matters whether the tag is "td" or "TD" in the CSS file. HTML doesn't care, and XHTML wants "td" in the page itself. As I said before, the TD in the CSS file is unnecessary, unless you also use a productname class elsewhere (non <td>) and want to have it only apply to table cells with that class.

multimixer · March 31, 2010

Do you have a link to your site?

KJ666 · March 31, 2010

Site not online, here is the stylesheet.

/*
 $Id: stylesheet.css,v 1.56 2003/06/30 20:04:02 hpdl Exp $

 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com

 Copyright (c) 2003 osCommerce

 Released under the GNU General Public License
*/

.boxText { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.errorBox { font-family : Verdana, Arial, sans-serif; font-size : 10px; background: #ffb3b5; font-weight: bold; }
.stockWarning { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #cc0033; }
.productsNotifications { background: #f2fff7; }
.footerarea { font-family: Verdana, Arial, sans-serif; font-size: 10px; font-weight: normal; padding: 0px; text-align: center; text-color: #000000; }
.orderEdit { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #70d250; text-decoration: underline; }
.footerNavigation { color: #000000; }
.hp-products-name { font-size:13px; font-weight:bold;  }
.hp-price { font-size:17px; font-weight:bold; letter-spacing:-1px; margin-top:10px;  }


//Product info
.productname { font-size:13px; font-weight:bold; font-color: #000066;  }



BODY {
 text-align: center;
 background: #ffffff;
 color: #000000;
 margin: 0px;
}

.fixcenter {
 width: 1000px;
 border: solid; border-width: 1px;
 background: #ffffff;
 margin: auto;
 margin-top: 20px;
}

A {
 color: #000000;
 text-decoration: none;
}

A:hover {
 color: #AABBDD;
 text-decoration: underline;
}

FORM {
display: inline;
}

TR.header {
 background: #ffffff;
}

TR.headerNavigation {
 background: #bbc3d3;
}

TD.headerNavigation {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 background: #660000;
 color: #000000;
 font-weight : bold;
}


A.headerNavigation { 
 color: #FFFFFF; 
}

A.headerNavigation:hover {
 color: #ffffff;
}

TR.headerError {
 background: #ff0000;
}

TD.headerError {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 background: #ff0000;
 color: #ffffff;
 font-weight : bold;
 text-align : center;
}

TR.headerInfo {
 background: #00ff00;
}

TD.headerInfo {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 background: #00ff00;
 color: #ffffff;
 font-weight: bold;
 text-align: center;
}

TR.footer {
 background: #bbc3d3;
}

TD.footer {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 background: #bbc3d3;
 color: #ffffff;
 font-weight: bold;
}

.infoBox {
 background: transparent;
}

.infoBoxContents {
 background: transparent;
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

.infoBoxNotice {
 background: transparent;
}

.infoBoxNoticeContents {
 background: transparent;
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

TD.infoBoxHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 font-weight: bold;
 background: transparent;
 color: #000000;
}

TD.infoBox, SPAN.infoBox {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {
 background: #f8f8f9;
}

TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {
 background: #f8f8f9;
}

TABLE.productListing {
 border: 1px;
 border-style: solid;
 border-color: #b6b7cb;
 border-spacing: 1px;
}

.productListing-heading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 background: #b6b7cb;
 color: #FFFFFF;
 font-weight: bold;
}

TD.productListing-data {
width: 10%;
border:1px; 
text-align:center;
vertical-align:top; 
padding:10 10 10 10;
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 13px;
color: #009900;
}

A.pageResults {
 color: #0000FF;
}

A.pageResults:hover {
 color: #0000FF;
 background: #FFFF33;
}

TD.pageHeading, DIV.pageHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 20px;
 font-weight: bold;
 color: #9a9a9a;
}

TR.subBar {
 background: #f4f7fd;
}

TD.subBar {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 color: #000000;
}

TD.main, P.main {
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
 line-height: 1.5;
}

TD.smallText, SPAN.smallText, P.smallText {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

TD.accountCategory {
 font-family: Verdana, Arial, sans-serif;
 font-size: 13px;
 color: #aabbdd;
}

TD.fieldKey {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
 font-weight: bold;
}

TD.fieldValue {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
}

TD.tableHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
 font-weight: bold;
}

SPAN.newItemInCart {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 color: #ff0000;
}

CHECKBOX, INPUT, RADIO, SELECT {
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
}

TEXTAREA {
 width: 100%;
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
}

SPAN.greetUser {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
 color: #f0a480;
 font-weight: bold;
}

TABLE.formArea {
 background: #f1f9fe;
 border-color: #7b9ebd;
 border-style: solid;
 border-width: 1px;
}

TD.formAreaTitle {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 font-weight: bold;
}

SPAN.markProductOutOfStock {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 color: #c76170;
 font-weight: bold;
}

SPAN.productSpecialPrice {
 font-family: Verdana, Arial, sans-serif;
 color: #ff0000;
}
im not
SPAN.errorText {
 font-family: Verdana, Arial, sans-serif;
 color: #ff0000;
}

.moduleRow { }
.moduleRowOver { background-color: #D7E9F7; cursor: pointer; cursor: hand; }
.moduleRowSelected { background-color: #E9F4FC; }

.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #8c8c8c; }
.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000000; }

/* message box */

.messageBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.messageStackError, .messageStackWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #ffb3b5; }
.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #99ff00; }

/* input requirement */

.inputRequirement { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ff0000; }

.cssButton {
background: #f0f0ff;
color: #000080;
height: 20px;
vertical-align: top;
font-weight: normal;
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
cursor: pointer;
text-align: center;
text-decoration: none;
border: 1px;
border-style: solid;
border-color: #000080;
border-spacing: 1px;
line-height: 22px;
}

#thecategories a:hover {
background-color: #eeeeee;
color: #000000;
}

.catwithsubs, .catwithnosubs {
padding-right: 5px;
}

#thecategories {
position: relative;
top: -9px;
margin-bottom: -16px;
width: 140px;
}

.activelink {
display: block;
font-weight: bold;
}

#thecategories a {
display: block;
padding-bottom: 7px;
padding-top: 3px;
width: 100%;
}

/*mozilla fix*/
html>body #thecategories a {
width: auto;
}
/*end of mozilla fix*/

#topcat a {
padding-left: 5px;
}

#secondcat a {
padding-left: 20px;
}

#thirdcat a {
padding-left: 35px;
}

#fourthcat a {
padding-left: 50px;
}

#fifthcat a {
padding-left: 65px;
}

.glossymenu{
position: relative;
padding: 0 0 0 0px;
margin: 0 0 0 0;
background: url(/images/menuh_bg.gif) repeat-x; /*tab background image path*/
height: 46px;
       width: 1000px;
list-style: none;
}

.glossymenu li{
float:left;
}

.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;	
}

.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(/images/menuh_hover_left.gif) no-repeat; /*left tab image path*/
background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(/images/menuh_hover_right.gif) no-repeat right top; /*right tab image path*/
}

TR.headerNavigationB {
 background: #2572da;
 background: #660000;
}

TD.headerNavigationB {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
 background: #2572da;
 background: #660000;
 color: #ffffff;
 font-weight : bold;
}

A.headerNavigationB { 
 text-decoration:none;
 display:block;
 color: #ffffff; 
 background: #2572da;
 background: #660000;
 padding:0px 0px 0px 0px;
}

A.headerNavigationB:hover {
 text-decoration:none;
 display:block;
 color: #ffffff;
 background: #4592fa;
 padding:0px 0px 0px 0px;
}

KJ666 · March 31, 2010

download firefox and its web developer & firebug plugins, then use that to find the css of any element on a page.

It will show page elements together with any related css.

I suspect your issue is errors in the stylesheet above that class, causing that part of the sheet to be ignored. Firefox will indicate any errors in the stylesheet too.

I have firebug already and the only css element on the product name is the body tag.

KJ666 · March 31, 2010

Also i changed the doctype from

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">

to:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

And it made all the text go in the center and the breadcrumb move to right abit. Anyhelp :(

npn2531 · March 31, 2010

Try putting a 'reset' at the very top of your stylesheet. The idea is to get every back to 'zero' or 'normal' so stuff like this is avoided. Here is an example:

/* RESET */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th, table, tr, td { font-size: 1em; font-weight: normal; font-style: normal; }
/*ul,ol { list-style: none; }*/

You can also google 'stylesheet' and 'reset' and get better ones.

Then just to isolate the issue put your productname class immediately after the reset, and ALSO at the very end of the stylesheet. In other words put this after the reset and at the end:

.productname, td.productname { font-size:13px; font-weight:bold; font-color: #000066;  }

(Or better, just comment out everything but the reset and

.productname, td.productname { font-size:13px; font-weight:bold; font-color: #000066;  }

)

If it works, then you know something on the stylesheet is overriding your productname class.

KJ666 · March 31, 2010

Well what i did was just change the doc type on the product info and went though it all changing it.

Next thing i am trying to add style inside of php (no idea how to do it anyhelp ?)

<tr><td>
<?php 
	if (tep_not_null($product_info['products_ingredients'])) {
	echo '<span class="ingredients">','PRODUCTS_INGREDIENTS.' '.$product_info['products_ingredients']','</span>';
	} 
	?>
</td></tr>

spooks · March 31, 2010

//Product info is invalid!!!

KJ666 · March 31, 2010

Huh, what do you mean ???

EDIT: you mean in the stylesheet, yer thanks i have now sorted that problem trying to get CSS in the PHP now ???

npn2531 · March 31, 2010

And that comma after the opening span tag doesn't look right (nor before the closing span tag):

 echo '<span class="ingredients">','PRODUCTS_INGREDIENTS.' '.$product_info['products_ingredients']','</span>';

I would expect something like:

 echo '<span class="ingredients"> '.PRODUCTS_INGREDIENTS . $product_info['products_ingredients'].'</span>';

npn2531 · March 31, 2010

Huh, what do you mean ???

EDIT: you mean in the stylesheet, yer thanks i have now sorted that problem trying to get CSS in the PHP now ???

We are crossing comments, I'm not sure if you are responding to me or Spooks.

birdrockdesigns · April 1, 2010

KJ666 -

font-color: #000;

is not CSS

Should just be

color :#000;

KJ666 · April 1, 2010

Thanks for the help people, i have changed the doctype and changed all the css code to match thanks.

Css problems

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived