Jump to content
Sign in to follow this  
jamiewalden

IE Float Alignment Issue (Surprised?)

Recommended Posts

jamiewalden

Hey guys, I'm trying to tweak the subscribe form code provided by feedburner to have the input form on the left with the subscribe button immediately to the right. I tried to add float:right to the submit line, which worked in everything but IE, which unfortunately is what most of our clients use. How can I remedy this? Site: http://stage.adnpso.com Widget form code:

Enter your email address:

Any help is much appreciated. Thanks.

Share this post


Link to post
Share on other sites
Rob
Well, before we could possibly diagnose this, where is this subscribe button? In Firefox, the entire callout section has been floated right and there is no subscribe button visible. Kindly un-do the float right so we can see this and provide assistance. Thanks.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob
You may want to fix this. #callout { margin-top: -15px; }

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
jamiewalden
Removed the callout. Sorry, i tried putting another conditional tag to make the subscribe box also show up on the resources page and must have done something that made the widget completely disappear. It's back now. I put another widget with the original code from feedburner directly below the one with the float if that helps. They are on the news page here: http://stage.adnpso.com/news/ Thanks, and sorry for the mishap.

Share this post


Link to post
Share on other sites
kastelic
I'm only seeing the issue in IE7 browser mode. At any rate what I am seeing is the text input field inside a paragraph tag that is aligning center for some reason. I would try something like this: [code] form p{ text-align:left; } input[name="email"] { width:130px; } [/code]

Share this post


Link to post
Share on other sites
jamiewalden
Sorry. It only does it in compatibility mode (which i have to contend with because some of our older products require that). That worked, sorta. I added a break to get the box to extend below the button and i think i'm just going to have to settle for the button below the form. Damn IE Compatibility mode doesn't want to play nice so i have to go do the "satisfy-the-lowest-common-denominator" dance. Ef. Here's code I used: [code]

Enter your email address:


[/code] I think the issue has something to do with the CSS for the pagelines submit button because the look of it changes in IE Compatibility. Just guess, though.

Share this post


Link to post
Share on other sites
kastelic
Took another stab at it in compatibility mode and I think I hit upon the solution that will put them on the same line: [code] #text-7 input[type="text"] { width:130px !important; float; left !important; margin-rigth:10px !important; } [/code]

Share this post


Link to post
Share on other sites
jamiewalden
I tried that. I doesn't seem to be working for me. Is it on your machine? Thanks BTW Jimmy for your above-and-beyond effort. I really appreciate your, and all the other moderators', expertise. You guys are first class.

Share this post


Link to post
Share on other sites
catrina
This a variation of what Jimmy suggested: [code]#text-7 input { width:130px !important; float; left !important; margin-rigth:10px !important;}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
jamiewalden
that didn't seem to work either. Should i be used this code in conjuction with the code above?

Share this post


Link to post
Share on other sites
catrina
No, it shouldn't be used with the code Jimmy provided. Try this: [code]div#text-7 input { width:130px !important; float; left !important; margin-rigth:10px !important;}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
jamiewalden
Still no dice. I think I'm going to have to just settle for the button sitting below the form. Thanks for all you're help, though.

Share this post


Link to post
Share on other sites
Jenny
The only thing I noticed in both Jimmy and Catrina's code is a misspelling of the word "right" in margin-right as well as the use of a ';' instead of a ':'. Please try each code again, correcting the ':' and the spelling of the word "right". I've included the corrected codes for you below. Please try them one at a time. [code]#text-7 input[type="text"] { width:130px !important; float: left !important; margin-right:10px !important; }[/code] [code]#text-7 input { width:130px !important; float: left !important; margin-right:10px !important; }[/code] [code]div#text-7 input { width:130px !important; float: left !important; margin-right:10px !important; }[/code]

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
jamiewalden
Still no dice. I think it looks ok though with the button below. Thanks everyone!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×