Error with fieldset on contact page only effecting IE, cannot figure it out at all

[nigelt74]

Hi all

I made a few changes to the contact form, basically moving the contact details to the left of the form instead of above it

On this page

http://sweetbrucies.com/index.php?main_page=contact_us

IE displays a small rectangle next to the contact form, and i cannot work out how to get rid of it, it doesn't appear in any other browsers, Just IE

You are going to ask for this so i will put it here, these are the changes i made to

includes/templates/mytemplate/templates/tpl_contact_us_default.php

<?php
/**
 * Page Template
 *
 * Loaded automatically by index.php?main_page=contact_us.<br />
 * Displays contact us page form.
 *
 * @package templateSystem
 * @copyright Copyright 2003-2009 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_contact_us_default.php 16307 2010-05-21 21:50:06Z wilt $
 */
?>
<div class="centerColumn" id="contactUsDefault">

<?php echo zen_draw_form('contact_us', zen_href_link(FILENAME_CONTACT_US, 'action=send')); ?>


<?php
  if (isset($_GET['action']) && ($_GET['action'] == 'success')) {
?>

<div class="mainContent success"><?php echo TEXT_SUCCESS; ?></div>

<div class="buttonRow"><?php echo zen_back_link() . zen_image_button(BUTTON_IMAGE_BACK, BUTTON_BACK_ALT) . '</a>'; ?></div>

<?php
  } else {
?>

	<?php if (DEFINE_CONTACT_US_STATUS >= '1' and DEFINE_CONTACT_US_STATUS <= '2') { ?>
		<div id="contactUsNoticeContent" class="content">
		<?php
		/**
		 * require html_define for the contact_us page
		 */
		  require($define_page);
		?>
		</div>
	<?php } ?>
	<div class="address2">
		<?php if (CONTACT_US_STORE_NAME_ADDRESS== '1') { ?>
		<address><?php echo nl2br(STORE_NAME_ADDRESS); ?></address>
		<?php } ?>
	</div>
		<?php if ($messageStack->size('contact') > 0) echo $messageStack->output('contact'); ?>

<fieldset id="contactUsForm">
<legend><?php echo HEADING_TITLE; ?></legend>
<div class="alert forward"><?php echo FORM_REQUIRED_INFORMATION; ?></div>
<br class="clearBoth" />

	<?php
	// show dropdown if set
		if (CONTACT_US_LIST !=''){
	?>
	<label class="inputLabel" for="send-to"><?php echo SEND_TO_TEXT; ?></label>
	<?php echo zen_draw_pull_down_menu('send_to',  $send_to_array, 0, 'id="send-to"') . '<span class="alert">' . ENTRY_REQUIRED_SYMBOL . '</span>'; ?>
	<br class="clearBoth" />
	<?php
		}
	?>

	<label class="inputLabel" for="contactname"><?php echo ENTRY_NAME; ?></label>
	<?php echo zen_draw_input_field('contactname', $name, ' size="40" id="contactname"') . '<span class="alert">' . ENTRY_REQUIRED_SYMBOL . '</span>'; ?>
	<br class="clearBoth" />
	
	<label class="inputLabel" for="email-address"><?php echo ENTRY_EMAIL; ?></label>
	<?php echo zen_draw_input_field('email', ($email_address), ' size="40" id="email-address"') . '<span class="alert">' . ENTRY_REQUIRED_SYMBOL . '</span>'; ?>
	<br class="clearBoth" />
	
	<label for="enquiry"><?php echo ENTRY_ENQUIRY . '<span class="alert">' . ENTRY_REQUIRED_SYMBOL . '</span>'; ?></label>
	<?php echo zen_draw_textarea_field('enquiry', '30', '7', $enquiry, 'id="enquiry"'); ?>
	


	<div class="buttonRow forward"><?php echo zen_image_submit(BUTTON_IMAGE_SEND, BUTTON_SEND_ALT); ?></div>
<!-- <div class="buttonRow back">< ?php echo zen_back_link() . zen_image_button(BUTTON_IMAGE_BACK, BUTTON_BACK_ALT) . '</a>'; ?> --></div>
</fieldset>
<?php
  }
?>

</form>
</div>

Any help would be appreciated

[kuroi]

Your page structure is broken.

99% of these cross browser discrepancies nowadays are because there's something wrong with the page structure taking browsers into unknown territory to which they respond differently.

A good way to find them is to validate the page and them fix the errors that are reported.

In this case many of them have a common cause, the closing div at the end of this line

<!-- <div class="buttonRow back">< ?php echo zen_back_link() . zen_image_button(BUTTON_IMAGE_BACK, BUTTON_BACK_ALT) . '</a>'; ?> --></div>

that's closing the main div prematurely and forcing browsers to close a number of the other structures, including your fieldset that are inside it.

When IE comes across the real fieldset closure tag, it treats it as a new but empty fieldset and displays it with a border, i.e. that box you're seeing on the screen.

[nigelt74]

Thanks for that

Normally i run a validate, but just thought i knew better this time, that'll teach me,

anyway page now validates as much as it can, the only errors are zencart generated <br> instead of <br />, but thats hardly a problem