Menu
I'm styling a page with a series of quotes. Each quote is of the form:
<blockquote>
<span class="ldquo">“</span>The quote<span class="rdquo">”</span>
<cite>The author</cite>
</blockquote>
The quote should be blocked off by a large quotation mark at the left top (ldquo, absolutely positioned) and a large one at the bottom right (rdquo, floated then relatively positioned). The text in the quote is text-indent-ed so that the top left quotation mark does not overlap the text. In Firefox (3.6) and Chromium (8) this works fine, but in IE (8) when I change the font-size on ldquo it seems that the text-indent gets upgraded from the size it would be based on the font-size of the container to the size of ldquo (the first element in the container).
I've found that if I add an empty <span /> before ldquo and update its left offset to match the text-indent at the container font-size it works in IE but this breaks in Firefox and Chromium which are expecting the left offset as a fraction of ldquo's font-size. Not that that as a "fix" would be particularly pleasing anyway.
Some code that recreates the problem follows:
<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 20em;
}
blockquote {
margin :0 0 2em 0;
position:relative;
text-indent: 2em;
font-size:0.7em;
text-align:justify;
}
.ldquo, .rdquo {
color: #EC008C;
font-size:3em;
height:0;
top: -0.15em;
}
.ldquo {
position:absolute;
left: -0.6em;
}
.rdquo {
float:right;
position:relative;
left: 0.05em;
}
blockquote cite {
display:block;
font-weight:bold;
text-indent:0;
}
</style>
</head>
<body>
<div id="container">
<blockquote>
<span class="ldquo">“</span>A quote. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<span class="rdquo">”</span>
<cite>A. Author</cite>
</blockquote>
<blockquote>
<span class="ldquo">“</span>Another quote. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<span class="rdquo">”</span>
<cite>A. N. Other Author</cite>
</blockquote>
<!-- more quotes -->
</div>
</div>
</body>
</html>
Has anyone seen this before and can help me with a fix? Thanks.
854
Ok. I think I found a solution to fix the layout, unfortunately not the bug.
I removed the text-indent and instead added an appropriate right margin to ldquo which i then floated left. Since the height of ldquo was zero this just brought me back to the original situation with the text sitting on top of the quotation mark. But adding a minimal 1px height, fixes that, and fingers crossed it seems to work.
Here is the final CSS.
#container {
width: 20em;
}
blockquote {
margin :0 0 2em 0;
position:relative;
font-size:0.7em;
text-align:justify;
}
.ldquo, .rdquo {
color: #EC008C;
font-size:3em;
height:1px;
top: -0.15em;
position:relative;
}
.ldquo {
float:left;
margin-right:0.14em;
}
.rdquo {
float:right;
left: 0.05em;
}
blockquote cite {
display:block;
font-weight:bold;
text-indent:0;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With