CSS tech support

Psst. A little CSS help? If anybody can tell me why the top line, with the email form, is breaking in IE7… I will immortalize your name forever in the HTML source. <!-- Seriously. -->

5 Responses

David says:
November 8, 2009 at 4:11 pm
I believe .signupform-extra needs an explicit height or at least an explicit line-height, to match the form. Try giving it a height and a line-height of 45px.
Reply
David says:
November 8, 2009 at 5:24 pm
Err, didn’t realize that div was set to inline. Browser’s never agree on line-heights, and IE is especially fickle with block-level elements being set to inline. Floating is easier in this case. Replace 
.signupform-extra {
display: inline;
}
form#mc-embedded-subscribe-form {
display: inline;
} 
with
.signupform-extra {
float: left;
line-height: 47px;
}
.signup form input {
float: left;
} 
You can see it working here:
http://clients.sleepoversf.com/robinsloan/
And here it is in IE7:
http://clients.sleepoversf.com/robinsloan/ie7.png
Reply
David says:
November 8, 2009 at 5:25 pm
Nooo! An unnecessary apostrophe slipped into that last comment!
Reply
Robin says:
November 8, 2009 at 7:14 pm
P-E-R-F-E-C-T.
Thank you. I really appreciate it.
Reply
Saheli says:
November 9, 2009 at 12:29 pm
Damn, Robin, I forgot you also have a separate blog. Nice design!
Reply