6

I'm styling a page with a series of quotes. Each quote is of the form:

<blockquote>
<span class="ldquo">&ldquo;</span>The quote<span class="rdquo">&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">&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">&rdquo;</span>
    <cite>A. Author</cite>
    </blockquote>

    <blockquote>
    <span class="ldquo">&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">&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.

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
tjm
  • 7,500
  • 2
  • 32
  • 53
  • I haven't read all the code but I get the feeling that, just as you have used `float: right` on the quote at the end, `float: left` should work on the first one. This way the text would wrap around the quote spans. Just a thought. Let me know if it works and I will put it as an answer for you to mark. – ClarkeyBoy Dec 15 '10 at 14:45
  • @ClarkeyBoy. Thanks for your input. Yeah I've just hit upon a solution with `float:left;` that I think should do it. I had tried some before and it wasn't working but I think maybe I left something else in that I shouldn't have that was breaking it. Anyway, I'm currently at home and the only windows machine in the house is occupied so I can't check it just yet, but I'll get back to you when I have done. – tjm Dec 15 '10 at 16:03
  • It could just be that you are using a naff browser of course! :) I mean IE... I would state the versions but I think "all of them" should cover it lol. I think FF 2 is pretty out dated now, and Opera prior to 9. Chrome I believe tends to auto-update anyway so you are pretty safe there. Can't say I've ever tried any others. – ClarkeyBoy Dec 15 '10 at 16:14
  • 1
    @ClarkeyBoy. I agree about IE. The problem though is not that I'm using a naff browser, but that a hell of a lot of other people are and, unfortunate as it is, we've got to support them. – tjm Dec 15 '10 at 16:20
  • Well said. But according to http://www.w3schools.com/browsers/browsers_stats.asp we won't have to support it much longer. In the last 3 years IE has gone down by 8% per year. At that rate it will reach 0 by 2015. Ok so saying that is not realistic, because IE will never go out of use. I know its mostly web developers that those statistics are based on, but this could still be a good sign. It could be that more and more developers are getting so fed up with IE that they are no longer supporting it! Thats what I **hope** it means anyway. I may just follow their lead soon! – ClarkeyBoy Dec 15 '10 at 16:28
  • @ClarkeyBoy. I don't know if I'm as optimistic as you but I did make a conscious decision that IE6 at least was officially unsupported in my current project, and seeing [this](http://stackoverflow.com/questions/4450853/ive-decided-not-to-cater-for-ie6-what-tasty-css-treats-can-i-use) a few hours ago it seems that at least a number of others are in agreement. Anyway, back to the problem. `float:left` on its own didn't work. It floats to the `text-indent`, which is still increased in IE, and so relative positioning afterwards doesn't work. I think I have a solution but it's a bit hacky so ... – tjm Dec 15 '10 at 18:21
  • ... just trying to clean it up a bit before posting. – tjm Dec 15 '10 at 18:21
  • You should be able to just specify `float: left` on the image, put a few `

    ` tags, end with an image set to `float: right` and then finish with a `

    `. Forget about applying `text-indent`. I'll just give it a go.     – ClarkeyBoy Dec 15 '10 at 18:34
  • I've added an answer for you - think it does what you want it to but, as I said in the answer, haven't tested it in IE. – ClarkeyBoy Dec 15 '10 at 18:54

3 Answers3

1

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;
}
tjm
  • 7,500
  • 2
  • 32
  • 53
0

Have you tried padding-left instead of text-indent? For your blockquote, use a padding-left of 1em and change the .ldquo to have "left" of only -0.2em

electrichead
  • 1,124
  • 8
  • 20
  • Thankyou. Yeah, it doesn't exhibit the same problematic behaviour with padding, unfortunately it also doesn't provide the effect I'm looking for, I really just want that first line indented. It may be a compromise I'll have to make though if I can't find another solution. While it might not be ideal at least it's uniform. – tjm Dec 15 '10 at 13:06
0

Try the following. Not sure that it works cross-browser - may require the odd tweak for IE (I mean what doesn't, right?) but it works fine in Chrome so should work in Opera and FF perfectly. You may want to adjust widths etc. but it does what you want it to.

New solution (no indent under quote)

<div style="position: relative;">
    <span style="float: left; width: 20px; height: 20px; font-size: 3em; margin-top: -0.25em; margin-left: 0; margin-right: 5px;">&ldquo;</span>
    <p style="text-align: justify;">
        fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf
    </p>
    <span style="float: right; width: 20px; height: 20px; font-size: 3em; margin-top: -0.9em;">&rdquo;</span>
    <div style="clear: both;"></div>
</div>

Old solution

<div style="position: relative;">
    <span style="float: left; width: 20px; height: 20px; font-size: 3em; margin-top: -0.25em; margin-left: 0; margin-right: 5px;">&ldquo;</span>
    <p style="margin-left: 25px; margin-right: 25px; text-align: justify;">
        fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf
    </p>
    <span style="float: right; width: 20px; height: 20px; font-size: 3em; margin-top: -1em;">&rdquo;</span>
    <div style="clear: both;"></div>
</div>
ClarkeyBoy
  • 4,934
  • 12
  • 49
  • 64
  • Thanks for all your efforts. Unfortunately that seems to have the same issues as the padding-left solution. What I was looking for was the top-left quotation mark at the start of the line, not to the left of it, so following lines would align under the left quotation mark. I think I've got a solution though, and have posted it below. – tjm Dec 15 '10 at 19:04
  • ah ok thats easy - I went via that in the first place. Give me a moment and I will edit it. Will comment here again when I've done it. – ClarkeyBoy Dec 15 '10 at 19:08
  • Ok done that. Use the new solution. I have left the old solution in case anyone comes across it in the future and wants to achieve the original effect. – ClarkeyBoy Dec 15 '10 at 19:10