<div> problem in Firefox - HTML Forums

eliboone · 11-29-2004, 03:49 PM

I have the search box on the following page displaying with a div tag. http://www.ferretdepot.com/Merchant2...e=ToysPlaytime
It looks fine in IE 6.0 but displays at the top left hand side of the page in Firefox and Mozilla. I know from reading other posts that my code must be incorrect for the search box to display like this in Firefox. Here is a link to my css. http://www.ferretdepot.com/main.css Could someone please take a look. I have tried everything that I can think of.

thanks, eli

johnnyM · 11-29-2004, 09:45 PM

So as someone who's only got Firefox/Mozilla/gecko rendering engine to surf with currently... I see the page and I see the text box.. and I see that it is in the top - left... so how exactly is it supposed to be showing up?

Is this a positioning issue then? I'm just trying to get more of a feel for this.

eliboone · 11-29-2004, 10:17 PM

Hi johnnyM,

Sorry I completely forgot to include the link to the page that displays the search box correctly.

Here is a link. http://www.ferretdepot.com/newitems.shtml

thanks, eli

johnnyM · 12-01-2004, 12:29 PM

OK. I see how it is intended to appear. In the first page (where it's not showing up as intended) could you maybe indent some on the code? I do hope this doesn't seem like a strange request but it's very hard to read markup that's all smushed together.

AaronCampbell · 12-01-2004, 05:44 PM

It looks almost like they used a code optimizer...it's impossible to read!

Well, I didn't go through and indent everything, but a few quick sed commands later, I have one file where I inserted a new line before open tag, but it was still pretty hard to read, so I had it put a newline before every tag (open or close). It's a little better...I'll upload em both for someone to look at...they're still not indented though.

scoutt · 12-01-2004, 06:09 PM

IE has it wrong.

seems to me you closed the div container before the form has ended. plus you don't have form tags around you input boxes.

scoutt · 12-02-2004, 10:17 AM

did the software do the site that works?

software is generally not that bad in creating code. I am sure you can edit the code someplace

eliboone · 12-02-2004, 10:28 AM

Thanks for checking the code out everyone. Unfortunately the code is produced by my shopping cart (Miva Merchant). I don't know why it produces the code in this way. There is no way for me to change the way it is layed out.

thanks, eli

eliboone · 02-02-2005, 01:39 PM

Well after giving up on this problem in early December I am back at it again.

I have an html file for the header that appears on all pages on the site that I place in my shopping carts directory on our webserver. The shopping cart 'grabs' this html file to create the header that appears on every page. Something in this file is causing the problem with the search box being in the incorrect location when viewing the site with Firefox or Mozilla. Below are the contents of the file if anyone wants to look. Here is a link to one of the pages where the Search box is incorrectly placed in the top left corner of the page.
http://www.ferretdepot.com/Merchant2/merchant.mvc
I would like the search box to appear in the same area of the page that it does here.
http://www.ferretdepot.com/specials.shtml

file contents:

<div style="position:absolute; top:10px; left: 95px;"><a href="/index.html"><img src="/img/logo.jpg" alt="Go Home!"></a></div>

<div id="topright">
<div id="top2">
<a href="/Merchant2/merchant.mvc?Screen=SACNT">My Account</a><br />
<a href="/Merchant2/merchant.mvc?Screen=BASK">Basket Contents</a><br />
<a href="/Merchant2/merchant.mvc?Screen=SOINF">Checkout</a><br />

</div>
<a href="/custservice.shtml">Help</a><br>
<a href="/contact.shtml">Contact Us</a><br />
<a href="/flyerrequest.shtml">Flyer Request</a><br />
</div>

<div style="position:absolute; top:140px; left:70px;">
<img src="/img/slogan.gif" alt="The Fast Track For all Your Ferret Needs!" width="407" height="28">
</div>

<div style="position:absolute; top:168px; left:560px;">
<form METHOD="post" ACTION="http://www.ferretdepot.com/Merchant2/merchant.mvc?">
<span style="position:relative; top: 4px;"><input type="IMAGE" name="Add button" src="/Merchant2/graphics/00000001/search.gif" alt="Search Ferret Depot"></span> 
<input TYPE="text" NAME="Search_search" SIZE="15" VALUE="" valign="top">
<input TYPE="hidden" NAME="Store_Code" VALUE="fd">
<input TYPE="hidden" NAME="Screen" VALUE="SRCHM">
<INPUT TYPE="hidden" NAME="Search_desc" VALUE="1">
<INPUT TYPE="hidden" NAME="Search_ctgy" VALUE="1">
<INPUT TYPE="hidden" NAME="Search_keys" VALUE="1">
<INPUT TYPE="hidden" NAME="Search_and" VALUE="1">
<INPUT TYPE="hidden" NAME="Search_name" VALUE="1">
<INPUT TYPE="hidden" NAME="Search_code" VALUE="1">
<INPUT TYPE="hidden" NAME="SearchAdd_1" VALUE="1">
<INPUT TYPE="hidden" NAME="SearchAdd_2" VALUE="1">
<INPUT TYPE="hidden" NAME ="BrokSearch_Have_List_Fields" VALUE="1">
</form>
</div>
<div style="position:relative; top:197px; left:10px; padding:1px;">

<a href="/Merchant2/merchant.mvc"><img src="/img/shoppingnav.gif" alt="Shopping" width="100" height="30"></a><a href="/Merchant2/merchant.mvc?Screen=CTGY&Category_Code=FoodTreats"><img src="/img/foodtreatsnav.gif" alt="Food & Treats" width="82" height="30"></a><a href="/Merchant2/merchant.mvc?Screen=CTGY&Category_Code=HomesCarriers"><img src="/img/homescarriersnav.gif" alt="Homes and Carriers" width="82" height="30"></a><a href="/Merchant2/merchant.mvc?Screen=CTGY&Category_Code=LitterAcc"><img src="/img/litternav.gif" alt="Ferret Litter" width="82" height="30"></a><a href="/Merchant2/merchant.mvc?Screen=CTGY&Category_Code=ToysPlaytime" accesskey="t"><img src="/img/toysnav.gif" alt="Ferret Toys" width="82" height="30"></a><a href="/Merchant2/merchant.mvc?Screen=CTGY&Category_Code=HealthCare"><img src="/img/healthcarenav.gif" alt="Ferret Health Care" width="82" height="30"></a><a href="/Merchant2/merchant.mvc?Screen=CTGY&Category_Code=Cleaning" accesskey="c"><img src="/img/cleaningnav.gif" alt="Ferret Cleaning Products" width="82" height="30"></a><a href="/Merchant2/merchant.mvc?Screen=CTGY&Category_Code=CollarsWearables"><img src="/img/clothingnav.gif" alt="Ferret Wearables" width="82" height="30"></a><a href="/Merchant2/merchant.mvc"><img src="/img/morenav.gif" alt="More Ferret Depot Supplies." width="82" height="30"></a>
</div>
<div style="position:relative; top:197px; left:10px;">
<a href="/specials.shtml"><img src="/img/rednavbar.gif" alt="Ferret Depot Specials" height="20" width="770"></a>
</div>
<div style="position:relative; top:200px;left:2px;">

end of file:

thanks, eli

scoutt · 02-02-2005, 02:01 PM

I am still sticking to what I said last time. in firefox it shows something totally different than what you have there. I do not see a form tag one and the div tag is closed before the search box is placed in it.

does the software have a browser checker in it? this is what I see when I save it to my hard drive

Code:

<div style="position: absolute; top: 168px; left: 560px;"></div>
<span style="position: relative; top: 4px;">
<input alt="Search Ferret Depot" src="merchant.mvc_files/search.gif" name="Add button" type="image"></span>&nbsp;
<input valign="top" value="" size="15" name="Search_search" type="text">
<input value="fd" name="Store_Code" type="hidden">
<input value="SRCHM" name="Screen" type="hidden">
<input value="1" name="Search_desc" type="hidden">
<input value="1" name="Search_ctgy" type="hidden">
<input value="1" name="Search_keys" type="hidden">
<input value="1" name="Search_and" type="hidden">
<input value="1" name="Search_name" type="hidden">
<input value="1" name="Search_code" type="hidden">
<input value="1" name="SearchAdd_1" type="hidden">
<input value="1" name="SearchAdd_2" type="hidden">
<input value="1" name="BrokSearch_Have_List_Fields" type="hidden">
<div style="padding: 1px; position: relative; top: 197px; left: 10px;">

eliboone · 02-02-2005, 02:31 PM

Hi scoutt,

When I open up any of the shopping cart pages and view source the source looks exactly the same on all three pages whether I am using IE 6, Firefox 0.9.2, or Mozilla 1.7.1.

This is exactly what the snippett you posted looks like to me when I view page source in all 3 browsers, and it also looks like this in the file I am uploading to my shopping cart directory to create the header.

<div style="position:absolute; top:168px; left:560px;">
<form METHOD="post" ACTION="http://www.ferretdepot.com/Merchant2/merchant.mvc?">

<span style="position:relative; top: 4px;"><input type="IMAGE" name="Add button" src="/Merchant2/graphics/00000001/search.gif" alt="Search Ferret Depot"></span> 

<input TYPE="text" NAME="Search_search" SIZE="15" VALUE="" valign="top">
<input TYPE="hidden" NAME="Store_Code" VALUE="fd">
<input TYPE="hidden" NAME="Screen" VALUE="SRCHM">
<INPUT TYPE="hidden" NAME="Search_desc" VALUE="1">
<INPUT TYPE="hidden" NAME="Search_ctgy" VALUE="1">
<INPUT TYPE="hidden" NAME="Search_keys" VALUE="1">
<INPUT TYPE="hidden" NAME="Search_and" VALUE="1">
<INPUT TYPE="hidden" NAME="Search_name" VALUE="1">
<INPUT TYPE="hidden" NAME="Search_code" VALUE="1">
<INPUT TYPE="hidden" NAME="SearchAdd_1" VALUE="1">
<INPUT TYPE="hidden" NAME="SearchAdd_2" VALUE="1">
<INPUT TYPE="hidden" NAME ="BrokSearch_Have_List_Fields" VALUE="1">
</form>
</div>
<div style="position:relative; top:197px; left:10px; padding:1px;">

Not sure why the code is funky when you look at it.

eli

scoutt · 02-02-2005, 03:02 PM

yeah it is weird. I can view the source and it is fine, but once I save it the form tag goes away.

your problem is the table that follows the body. take it out and put it right above the starting <tr> tag.

all your div stuff and form is in the table but sort of illigally. you have this

<body>
<table>
<div></div>
<tr>

that is wrong.

eliboone · 02-02-2005, 03:54 PM

Ya, my cart system automatically puts everything in tables so I tried putting this code at the beginning of my html file. <table width="770"><tr><td>search box code and I did not close the table, row, or cell and the search box is displaying properly now. The only bad thing is that the s. cart still puts the extra <table> tag, etc so the code is not really valid. Maybe I should just scrap the css for the header and try to lay it all out with tables.

Thanks for all of the help once again scoutt.

eli