Jump to content

[SOLVED] Breaking Container Div


scottybwoy

Recommended Posts

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>

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.