[SOLVED] Breaking Container Div

[scottybwoy]

Yo,

 

I have found some strange behaviour in FF3 with a div that contains some input fields (I replaced it with a fieldset and it made no difference), it breaks after a few fields without any irregular code beforehand, so some input fields fall outside the div in FF3, but in IE2 & 3 it works as it should.

 

Strange thing is in Firebug source code it does close the div prematurely but in all other source code in IE or even generated source code in firebug it shows the close div element in the correct position.

 

Any ideas why this happens?  Here's some code :

// The css
.filterlist {
display: inline-block;
margin: 4px 0;
padding: 4px;
  border: 1px solid #d5d5d5;
  font-family: Tahoma, Helvetica, Arial, sans-serif;
font-size: 0.9em; }

// the php / html
<form name="filter" action="<?php echo tep_href_link(basename($PHP_SELF),tep_get_all_get_params(array('page', 'info', 'x', 'y', 'manufacturers_id'))); ?>" method="get">
<div class="filterlist">
	<label for="pfrom" class="fieldKey"><?php echo PRICE_RANGE; ?></label>
	<?php echo tep_draw_input_field('pfrom', ENTRY_PRICE_FROM, 'class="fieldValue" style="width:5em"') . ' - ' . tep_draw_input_field('pto', ENTRY_PRICE_TO, 'class="fieldValue" style="width:5em"') ?>
	<input id="subQuery" type='text' name='keywords' value="<?php echo REDIFINE_RESULTS; ?>" class='fieldValue' style='width:42%; border:1px solid #3f547f;'>
<?php echo tep_image_submit('button_search.gif', IMAGE_BUTTON_SEARCH, 'name="subsearch"') . tep_draw_hidden_field('search_in_description', '1');

  // optional Product List Filter
  if (PRODUCT_LIST_FILTER > 0) {
    if (isset($HTTP_GET_VARS['manufacturers_id'])) {
      $filterlist_sql = "select distinct c.categories_id as id, cd.categories_name as name from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_TO_CATEGORIES . " p2c, " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where p.products_status = '1' and p.products_id = p2c.products_id and p2c.categories_id = c.categories_id and p2c.categories_id = cd.categories_id and cd.language_id = '" . (int)$languages_id . "' and p.manufacturers_id = '" . (int)$HTTP_GET_VARS['manufacturers_id'] . "' order by cd.categories_name";
    } else {
      $filterlist_sql = "select distinct m.manufacturers_id as id, m.manufacturers_name as name from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_TO_CATEGORIES . " p2c, " . TABLE_MANUFACTURERS . " m where p.products_status = '1' and p.manufacturers_id = m.manufacturers_id and p.products_id = p2c.products_id and p2c.categories_id = '" . (int)$current_category_id . "' order by m.manufacturers_name";
    }

    $filterlist_query = tep_db_query($filterlist_sql);

    if (tep_db_num_rows($filterlist_query) > 1) {

		if (isset($HTTP_GET_VARS['manufacturers_id'])) {
        echo tep_draw_hidden_field('manufacturers_id', $HTTP_GET_VARS['manufacturers_id']);
        $options = array(array('id' => '', 'text' => TEXT_ALL_CATEGORIES));
      } else {
        echo tep_draw_hidden_field('cPath', $cPath);
        $options = array(array('id' => '', 'text' => TEXT_ALL_MANUFACTURERS));
      }

      echo tep_draw_hidden_field('sort', $HTTP_GET_VARS['sort']);

      while ($filterlist = tep_db_fetch_array($filterlist_query)) {
        $options[] = array('id' => $filterlist['id'], 'text' => $filterlist['name']);
      }

      echo tep_draw_pull_down_menu('filter_id', $options, (isset($HTTP_GET_VARS['filter_id']) ? $HTTP_GET_VARS['filter_id'] : ''), 'onchange="this.form.submit()"');
    }
  }
?>
	<input type="text" size="2" name="max_pages" value="<?php echo $hold_max_pages; ?>">
	<?php echo tep_hide_session_id(); ?>
	<input class="submit" type="submit" value="GO">
</div>
</form>

[scottybwoy]

Ok if this  still doesn't make sense (cos it doesn't to me)  Here is the source for this specific part

<form name="filter" action="http://www.localhost.com/klickshopping/express-512mb-c-43_44_49.html?sort=4a&search_in_description=1&max_pages=20&filter_id=35&keywords=Redifine%20your%20results&pto=Price%20To&pfrom=Price%20From" method="get">
<div class="filterlist">
	<label for="pfrom" class="fieldKey">Price Range :</label>
	<input id="pfQry" name="pfrom" value="Price From:" class="fieldValue" style="width:5em" /> -
	<input id="ptQry" name="pto" value="Price To:" class="fieldValue" style="width:5em" />

	<input id="subQuery" type='text' name='keywords' value="Redifine your results" class='fieldValue' style='width:42%; border:1px solid #3f547f;'>
<input type="image" src="includes/languages/english/images/buttons/button_search.gif" alt="Search" title=" Search " name="subsearch" /><input type="hidden" name="search_in_description" value="1" /><input type="hidden" name="cPath" value="43_44_49" /><input type="hidden" name="sort" value="4a" /><select name="filter_id" onchange="this.form.submit()"><option value="">All Manufacturers</option><option value="31">Asus</option><option value="27">ATi</option><option value="44">BFG Tech</option><option value="32">Club-3D</option><option value="33">Gigabyte</option><option value="37">Inno 3D</option><option value="34">MSI</option><option value="35" SELECTED>NVidia</option><option value="28">PNY Technologies</option><option value="45">Point Of View</option><option value="39">Sapphire Technologies</option><option value="41">XFX Graphics</option></select>		<input type="text" size="2" name="max_pages" value="20">

			<input class="submit" type="submit" value="GO">
</div>
</form>

 

Here's the link to the screen shot

[BoltZ]

Your coding in IE2 AND 3?? Also I looked at the screenshot and I personally couldn't find the place where it "breaks". Could you do that same screenshot and point an error at the place?

[scottybwoy]

What do you mean coding in IE2 and 3?  I have amended the screen shot.  I highlighted the Div in Red.  Where I have drawn the pinkish line is where the div should go.  It works fine in IE6 & 7, but not in FF3.  As you can see from the source code the div does indeed contain the other elements, so why does it present it different on the screen?  Is this a FF Bug?

[haku]

You have some errors in your code. You are using an ID twice, you didn't declare the type of input for some of your inputs, and finally, one of two things:

 

1) If you are using an HTML doctype, you are self-closing inputs when you shouldn't. Or,

2) If you are using an XHTML doctype, you are not self-closing some inputs when you should be.

 

Fix those errors and see if it helps. If it doesn't, post a link.

[scottybwoy]

Thanks,

 

I solved it.  There was an unsuspecting table that was getting in the way.  Don't know how I missed it.  Thanks for your time.

[BoltZ]

but in IE2 & 3 it works as it should

That was what I meant.