Comments on: Internet Explorer Vertical Align Bug

By: Julia

Julia — Fri, 25 Nov 2011 06:12:08 +0000

Serious enthusiast with this blog, a lot of your writes have definitely helped me out. Awaiting improvements!

By: Josh Hughes

Josh Hughes — Wed, 07 Nov 2007 03:41:55 +0000

Just for IE (I recommend a conditional comment):

span.quote { vertical-align: -20px; }

Seemed to fix it as far as I could tell.

By: Grant

Grant — Tue, 06 Nov 2007 19:37:02 +0000

one idea might be to allow IE to degrade gracefully by putting vertical-align back to 0px in a conditional css – it wouldn’t make the quotation as pretty in IE, but it would keep the whole line from looking messed up

the other idea – and this is just conjecture, i didn’t try it out -iI wonder if, instead of using “spans”, you tagged the quotation mark as an “h4″ or something random like that, put the the quote text itself in a “p” tag and then used floats/margins to create the visual effect you’re looking for – it’s not as simple of a method (and you still might need to use conditional css to get the correct margins/padding for IE) but I think it would give you more granular control

By: Cameron

Cameron — Tue, 06 Nov 2007 18:30:37 +0000

Dirty solution: Simulate the quote indent by position:absolute left:0 top:0 the quote, and then throwing a handful of before the body text to push it over. Or maybe first-line would work for that.

By: Kyle

Kyle — Tue, 06 Nov 2007 15:56:48 +0000

Perhaps you could wrap that span in another span, and IE will only affect those.