Form select not working in IE

Question

maniator 0 Newbie Poster

18 Years Ago

I set up this form on our website for people to select categories of what they want from us. for some reason, in Firefox it works fine, but in IE it gets all stretched out...
here is the code:

<div><div id="search_box" class="sideBoxContent centeredContent"><div style="text-align: center;">
<form name="RefineSearchForm" action="/SearchResults.asp" method="get" type="hidden">
	<h2 style="font-family: Arial Black; text-decoration: underline; color: rgb(0, 0, 205);"><span style="font-size: 12pt;">Search By Category Here:</span></h2>
                       <input name="Extensive_Search" value="Y" type="hidden">
            <input id="search_field" name="Search" value="" type="text"><br>  	
           <select name="cat" onchange="" class="findnavb">
                <option value="246">Search Category</option>
                <option value="217">Baskets</option>
                <option value="221">Beverages</option>
                 <option value="216">Bottles</option>
                 <option value="202">Boullion</option>
                 <option value="197">Bowls</option>
                 <option value="220">Caddies</option>
                 <option value="239">Covers</option>
                 <option value="241">Choppers</option>
                 <option value="213">Crocks</option>
                 <option value="203">Cups</option>
                 <option value="192">Dishes</option>
                 <option value="237">Dishers</option>
                 <option value="222">Drinkware</option>
                 <option value="236">Forks</option>
                 <option value="224">High                Chairs</option>
                 <option value="214">Insert Pans</option>
                 <option value="211">Jars</option>
                 <option value="240">Kettles</option>
                 <option value="235">Knives</option>
                 <option value="208">Ladles</option>
                 <option value="209">Lids</option>
                 <option value="195">Mugs</option>
                 <option value="251">Pans</option>
                 <option value="244">Pastry Utensils</option>
                 <option value="212">Pedestals</option>
                 <option value="210">Pitchers</option>
                 <option value="207">Plate                Covers</option>
                 <option value="193">Plates</option>
                 <option value="199">Platters</option>
                 <option value="238">Racks</option>
                 <option value="205">Ramekins</option>
                 <option value="204">Saucers</option>
                 <option value="243">Servers</option>
                 <option value="242">Shakers</option>
                 <option value="223">Skillets</option>
                 <option value="206">Spatulas</option>
                 <option value="200">Spoons</option>
                 <option value="215">Tile                Pans</option>
                 <option value="219">Tongs</option>
                 <option value="218">Tray                Stands</option>
                <option value="201">Trays</option>
                <option value="196">Tumblers</option>
                <option value="198">Turners</option>
                       </select><br>
           <select name="RefineBy_Manufacturer" onchange="" class="findnavr">
                <option value="">Search Manufacturer</option>
                <option value="Adcraft">Adcraft</option>
                <option value="CAC China">CAC China</option>
                 <option value="Cambro">Cambro</option>
                 <option value="Dexter Russel">Dexter Russel</option>
                 <option value="G.E.T.">G.E.T.</option>
                 <option value="Kosher Cook">Kosher Cook</option>
                 <option value="Vollrath">Vollrath</option>
            </select>
                       <br><input id="search_button" name="Search" src="/Config_ImagesFolder/buttons/btn_go.gif" border="0" type="image">  
	                             </form></div>		            
              </div></div>

here is the code in action on the left side of our page:

does anyone have any idea on how i can fix this?

~Neal

user-interface web-design

4 Contributors
6 Replies
130 Views
6 Days Discussion Span
Latest Post 18 Years Ago Latest Post by wdesign_new

Dani AI

Generated 9 Months Ago

reported a select that looks fine in Firefox but becomes “stretched” inside the site sidebar in IE7/8. saw it render normally in their IE7, and was right to point at CSS as the most likely fix. The problem is almost always caused by either a conflicting stylesheet rule from the page template or malformed HTML that makes IE enter a different layout path.

Quick diagnostic checklist:

Inspect the select with IE’s developer tools (F12 in IE8+, or the Microsoft IE Developer Toolbar for older IE) and note the computed width, display and the stylesheet rule that sets them.
Load the form in a bare test page (standalone) and then reintroduce the site CSS incrementally to find the offending rule. A single global rule like select { width:100% } or a container rule can cause the select to expand in IE but not in Firefox.
Validate the HTML (W3C Markup Validation Service) — invalid attributes on form elements or stray markup can make IE behave oddly.

A simple, cross-browser CSS fix to force consistent sizing:

.findnavb, .findnavr {
  display: inline-block;
  vertical-align: middle;
  width: 160px;     /* pick the desired width */
  max-width: 100%;
  box-sizing: border-box;
  zoom: 1;          /* helps older IE (hasLayout) */
}

Notes and cautions: older IE versions react to invalid markup and “hasLayout” differences, so remove any stray/invalid attributes on form elements and ensure a proper doctype. If the select must align with the text input, give both elements explicit widths or a shared container rule so all browsers render them the same.

All 6 Replies

sreein1986 0 Posting Whiz

18 Years Ago

it's working IE also fine

please check it ...

sreein1986 0 Posting Whiz

18 Years Ago

which IE are you using, it seems that it is the most messed up in IE 7 and IE 8

Here i'm using IE verison 7.0

Reply to this topic

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.

maniator 0 Newbie Poster · Answer 1 · 2008-07-31T21:42:52+00:00

it's working IE also fine
please check it ...

which IE are you using, it seems that it is the most messed up in IE 7 and IE 8

maniator 0 Newbie Poster · Answer 2 · 2008-08-04T21:09:01+00:00

Here i'm using IE verison 7.0

did you see how it looks messed up on my site?

somehow it works fine on its own, but it messed up in the right side bar of the site

rexibit 5 Junior Poster in Training · Answer 3 · 2008-08-06T02:45:38+00:00

You can style your form elements in CSS. Perhaps your browser has different default settings than others, or perhaps you have a larger default text size.

The only semi-guaranteed way to ensure that things display correctly is to use a CSS styling of the element.

If you don't want to style them, you can define how many characters are to show in each list. That would be HTML markup.

wdesign_new 0 Newbie Poster · Answer 4 · 2008-08-06T12:54:16+00:00

Hi maniator,
It's working, there is no problem in your coding. Whatever, you can also check it in Mozilla Firefox. Overall your coding is right.

All the best!

Richard
<URL SNIPPED>

Form select not working in IE

Dani AI

Recommended Answers Collapse Answers

All 6 Replies

Recommended Answers