Button appears wrong

Hey,

Take a look at this page in IE7,

http://kidsunlimi2.eweb102.discountasp.net/newsletter.aspx

Why does the “Go” button (Top right) appear below the textbox and in firefox it looks perfect?

Can i fix this?

Regards
Billy

Hi Billy, the problem is the inheriting margin on form elements bug. The parent needs haslayout.

Dunno if IE6 is behaving like that since I didn’t check, but giving #inner min-height:0; will give it haslayout and fix it :slight_smile:

As Ryan said, it is the IE inherited margin bug that is adding the 20px margin from #inner to the input. The bug is caused by the hasLayout on the parent of the inputs.

Because the width of #find-school div its hasLayout can’t be avoided, so here the best solution would be to wrap the two inputs in an unstyled paragraph: (I removed the inline css in the first input tag.)

[COLOR="Red"]<p>[/COLOR]
    <input name="ctl00$TextBox1" type="text" id="ctl00_TextBox1" />
    <input type="submit" name="ctl00$Button1" value="" id="ctl00_Button1" class="find_go" />
[COLOR="Red"]</p>[/COLOR]

Also, the inputs are better aligned by vertical-align than margin:


#find-school input{ margin:0; border:1px solid black; width:197px; [COLOR="Red"]vertical-align:middle;[/COLOR]}
#find-school .find_go{ border:0; width:65px; height:23px; background-image:url('images/find_go.png'); cursor:pointer;}

Hey,

I just used Ryans method and its worked like a charm :slight_smile:

But thanks for the responses…

Regards

You’re welcome :-).