Perhaps you could wrap that span in another span, and IE will only affect those.
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.
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
Just for IE (I recommend a conditional comment):
span.quote { vertical-align: -20px; }
Seemed to fix it as far as I could tell.
Serious enthusiast with this blog, a lot of your writes have definitely helped me out. Awaiting improvements!
About The Author
I'm a graphic designer and sometimes writer living in Anderson, South Carolina. I serve as the Design Director for NewSpring Church. I love Jesus, my wife, Levi's Jeans, good Tex-Mex, and 8oz glass bottle Coca-Cola Classic. On good days I love them roughly in that order. Email me.
Internet Explorer Vertical Align Bug
Tue 11/06/07
The span class I’m using on the big quotation marks in quote posts has a
vertical-align: -20px;on it to pull it in line with the line-heights of the smaller text. Internet Explorer pulls the whole first line, instead of just the contents of the span. Any thoughts?