problem with IE displaying form

[valarcher]

Hi - does anyone know how - in a form - I can get IE to place the submit button *under* the "enter email" so it looks like it does in FF?

http://www.greensmoothie.com/test/main.php

I tried <p class="rgt"><input type="submit"...

.rgt {text-align:right}

but that doesn't work.

thanks! - Val

[vinpkl]

hi

try adding

width:160px or near to this value to submit button style css

vineet

Originally Posted by valarcher

Hi - does anyone know how - in a form - I can get IE to place the submit button *under* the "enter email" so it looks like it does in FF?

http://www.greensmoothie.com/test/main.php

I tried <p class="rgt"><input type="submit"...

.rgt {text-align:right}

but that doesn't work.

thanks! - Val

[valarcher]

Hi - can I place a div in the middle of a <form>? The form uses specific script from mail list s/ware. In fact I'm in process of switching from dada to icontact.com - I can't see them allowing a div in the middle of their code? This is the old dada code:

<div class="ebk rc15">
<h2>FREE - RAW Recipes!</h2>
<div class="recip"><img src="<?php echo $select; ?>" alt="raw recipes" title="raw recipes" width="100px" height="100px" />
</div>
<p>Snacks, Main Meals, Salads, Desserts, Drinks, <span class="red2">Color Photos</span>, Kitchen Tour + Inspiring <span class="red2">Testimonials!</span></p>
<form action="http://www.eatsprouts.com/cgi-bin/dada/mail.cgi">
<input type="hidden" name="flavor" value="subscribe" />
<input type="hidden" name="list" value="health" />
<input type="text" name="email" value="enter email--strict privacy" size="24" />
<p><input type="submit" name="sub" value="Send my Free eBook =&gt;" /></p>
</form>
</div>

this is the new icontact code:

<form method=post action="https://app.icontact.com/icp/signup.php" name="icpsignup" id="icpsignup2190" accept-charset="UTF-8" onsubmit="return verifyRequired2190();" >
<input type=hidden name=redirect value="http://www.greensmoothie.com/ic-thanku.html" />
<input type=hidden name=errorredirect value="http://www.greensmoothie.com/ic-thanku.html" />
<input type=text name="fields_email" value="enter email--strict privacy" size="30">
<input type=hidden name="listid" value="27784"><input type=hidden name="specialid:27784" value="EWV0">
<input type=hidden name=clientid value="572523"><input type=hidden name=formid value="2190">
<input type=hidden name=reallistid value="1"><input type=hidden name=doubleopt value="1">
<input type="submit" name="Submit" value="Send my eBook =>"></form>

it's with the last line of both forms that IE is giving me a problem. But the name="sub" (dada) and name="Submit" (icontact) are part of their scripts, I can't see it listening to me trying to over-ride their script?

But I'll try throwing a div in there

thanks, Val

[RyanReese]

Hi, in regards to your first post, add an ID to the <p> so we can target it in Css

<input id="submit" type="submit" name="sub" value="Send my Free 

eBook =&gt;" />

Notice I got rid of the <p>
Then give it a width

#submit{width:170px;}

[valarcher]

thank you! That looks like it'll work. I'll try it with a class over the weekend. I never knew you could put an id/class= inside an <input> because I thought input is an inline element and id/class is a block element and you can't put a block inside an inline.

[ralph.m]

Originally Posted by valarcher

I can't see them allowing a div in the middle of their code?

It's fine to do that. Indeed, a Strict DOCTYPE will not validate unless you wrap your form inputs in block-level elements like a <div> or a <p>. That will also keep the submit button underneath the email input.

[RyanReese]

Originally Posted by valarcher

thank you! That looks like it'll work. I'll try it with a class over the weekend. I never knew you could put an id/class= inside an <input> because I thought input is an inline element and id/class is a block element and you can't put a block inside an inline.

ID/class is an attribute and you can have it on any element you want .

It will work .

[valarcher]

Hi - thank you. vinpkl + Ryan's solution works. I didn't understand what vinpkl was saying, but with Ryan's actual code, I saw what to do. The problem was that IE was making the submit button too wide, so it was forced under the pic. Soon as I limited its size to 170px, it was able to fit under the "enter email".

It's lovely to know I can control the width of a submit button!

Wrapping the <form> in a div or p didn't work because the problem of IE making the button too wide was still there. So I could right-align the div, but this ended up with huge space under the "enter email" because the submit button was still moving to below the pic (whether left or right aligned).

thanks! - Val

[RyanReese]

Originally Posted by valarcher

Hi - thank you. vinpkl + Ryan's solution works. I didn't understand what vinpkl was saying, but with Ryan's actual code, I saw what to do. The problem was that IE was making the submit button too wide, so it was forced under the pic. Soon as I limited its size to 170px, it was able to fit under the "enter email".

Yep I saw that from the beginning once I made hte input go to the right side it was too wide, probably due to whitespace nodes

It's lovely to know I can control the width of a submit button!

Yep it's a replaced inline element so it's sorta like inline-block in that sense

Glad it worked anyway and if you have anymore questions feel free to ask .

[rx125]

Now you should try the same thing on IE8 which is really better than previous version like IE6 and IE7. Checkout the details.

[multipool]

yeah the new version of internet explorer has some bugs instead of previous version

[robaljoo]

I find that Firefox has a more advanced inherent comprehension for the DOM than good ole' Explorer.

When an object is obviously left open Firefox is able to interpret the logical next step.