The murmur of the snarkmatrix…

August § The Common Test / 2016-02-16 21:04:46
Robin § Unforgotten / 2016-01-08 21:19:16
MsFitNZ § Towards A Theory of Secondary Literacy / 2015-11-03 21:23:21
Jon Schultz § Bless the toolmakers / 2015-05-04 18:39:56
Jon Schultz § Bless the toolmakers / 2015-05-04 16:32:50
Matt § A leaky rocketship / 2014-11-05 01:49:12
Greg Linch § A leaky rocketship / 2014-11-04 18:05:52
Robin § A leaky rocketship / 2014-11-04 05:11:02
P. Renaud § A leaky rocketship / 2014-11-04 04:13:09
Jay H § Matching cuts / 2014-10-02 02:41:13

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 comments

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.

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

Nooo! An unnecessary apostrophe slipped into that last comment!

P-E-R-F-E-C-T.

Thank you. I really appreciate it.

Damn, Robin, I forgot you also have a separate blog. Nice design!

The snarkmatrix awaits you

Below, you can use basic HTML tags and/or Markdown syntax.