Member Avatar for arrbug

Hi all. I'm having a problem in that I can't get the table cell text OR the background to center in IE7. Works fine in Mozilla. Text-align is set to left on one of the contianing divs but that doesn't seem to affect it.

CSS

.browseCategoryImage {
background: #FFF url( 'images/browsecategorybg.png' ) no-repeat  center center;
vertical-align:top;
height: 200px;
text-align:center;
}

PHP

<?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' ); 
mm_showMyFileName(__FILE__);

$iCol = 1;
if( !isset( $categories_per_row )) {
	$categories_per_row = 3;
}
$cellwidth = intval( 100 / $categories_per_row );

if( empty( $categories )) {
	return; // Do nothing, if there are no child categories!
}
?>
<br/>
<table width="100%" cellspacing="0" cellpadding="0">
<?php
foreach( $categories as $category ) {
	if ($iCol == 1) { // this is an indicator wether a row needs to be opened or not
		echo "<tr>\n";
	}
	?>
	
	<td class="browseCategoryImage" width="<?php echo $cellwidth ?>">
		<br />


         
	<a class="browseCategoryTitle" title="<?php echo $category["category_name"] ?>" href="<?php $sess->purl(URL."index.php?option=com_virtuemart&amp;page=shop.browse&amp;category_id=".$category["category_id"]) ?>"> 
			<?php
			if ( $category["category_thumb_image"] ) {
				echo ps_product::image_tag( $category["category_thumb_image"], "alt=\"".$category["category_name"]."\"", 0, "category");
				echo "<br /><br/>\n";
			}
			echo $category["category_name"];
			echo $category['number_of_products'];
			?>
		 </a><br/>
	</td>
	
	
	<?php
	// Do we need to close the current row now?
	if ($iCol == $categories_per_row) { // If the number of products per row has been reached
		echo "</tr>\n";
		$iCol = 1;
	}
	else {
		$iCol++;
	}
}
// Do we need a final closing row tag?
if (sizeof( $categories ) < $categories_per_row) {
	echo "</tr>\n";
}
?>
</table>
Edited by arrbug because: n/a
  • 3 Contributors
  • 2 Replies
  • 127 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Troy III

Dani AI

Generated

A few clarifications and practical checks that pick up where the replies from and left off.

The background shorthand itself is fine (so is correct); the syntax suggested by (using = and quotes as an attribute) is not valid CSS. For reference on how the shorthand works, see the MDN background docs: background on MDN.

Two very common, easily missed causes in this exact setup:

  • The generated TD width looks like an integer only. If you intended a percentage, make sure the output actually includes the percent sign (for example, 33%) or set the width in CSS. Without a percent the attribute will not behave like a percent and will change the layout enough to break positioning/centering in older IE. See the TD element notes: td on MDN.

  • IE7 quirks/hasLayout issues. If the TD isn’t getting layout in IE7, background-positioning and centering can look wrong. Try forcing layout (for testing) with an IE-only trigger such as zoom:1 on the TD, or give it an explicit width/height via CSS.

Quick troubleshooting checklist (in order):

  1. View the rendered HTML (not the PHP) and confirm the TD output contains the percent sign or explicit CSS width.
  2. Use a DOM/CSS inspector to confirm the .browseCategoryImage rule is applying and not being overridden.
  3. Ensure a standards DOCTYPE is present so IE7 runs in standards mode.
  4. Try zoom:1 on the TD (temporary) or apply text-align:center directly to the anchor inside the TD (or make the anchor block-level and center with margins) to isolate whether the issue is a layout bug or a specificity/override.
  5. For the background URL, remove odd spacing inside url(...) if you suspect parsing quirks in older IE.

If those checks don’t show the cause, post the rendered HTML of one table cell and the computed styles from the inspector (not the PHP), and that will pinpoint what IE7 is actually seeing.

Recommended Answers

All 2 Replies

Member Avatar for MidiMagic

- Alignment is not inherited from div to table. You need to apply the style to the td tags.

- The php script may be overriding the style.

- If there is any syntax error in the style, the entire style becomes invalid in some browsers. You have syntax errors, because you have attributes without parameters in the background style.

Wrong:

no-repeat

Right:

background-repeat="no-repeat"

Member Avatar for Troy III

- Alignment is not inherited from div to table. You need to apply the style to the td tags.

- The php script may be overriding the style.

- If there is any syntax error in the style, the entire style becomes invalid in some browsers. You have syntax errors, because you have attributes without parameters in the background style.

Wrong:

no-repeat

Right:

background-repeat="no-repeat"

Sorry for interference, but you'll have to correct this!

There's nothing wrong with his shorthand background css statement: background: #FFF url( 'images/browsecategorybg.png' ) no-repeat center center; In fact it is absolutely correct and how shorthand background statements work.
But, there is more than one error in your sugestion:
cite: background-repeat="no-repeat" 1. The "=" mark is not allowed as css property/value delimiter;
2. the (") quotation marks in the property value, neither.

This syntax is not allowed on html element inline style attribute declarations, either.

Edited by Troy III because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.