Solved

Problem with closing pull quote in IE.

Posted on 2010-11-30
2
408 Views
Last Modified: 2012-05-10
I'm having problems in IE with a pull quote method I found on the web. The problem is, if the quote is more than 2 lines, the closing quote will disappear in IE. Everything remains ok in Firefox, Chrome, and Safari. Just not in IE.

I have pasted the page below. Or you can see it here: http://greddin.com/pullquotes.html.

The first quote should look ok, but the second longer quote will not display the closing quote. Can anyone help me modify my code to fix this?

Thank you,
-Greg
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Pullquotes</title>
<style type="text/css">
blockquote {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	width: 18em;
	margin: 10em auto 2em auto;
	text-align: left;
	text-indent: 25px;
	background: url(quotes1.png);
	background-position: 0 2px;
	background-repeat: no-repeat;
}

blockquote p {
	line-height: 1.8;
	margin: 0;
	display: inline;
	padding-right: 24px;
	background: url(quotes2.png);
	background-position: bottom right;
	background-repeat: no-repeat;
}

</style>
 </head>

<body>
<blockquote cite="cite1"><p>Shoot for the moon. Even if you miss, you'll land among the stars.</p></blockquote>
<br/>
<blockquote cite="cite2"><p>Shoot for the moon. Even if you miss, you'll land among the stars. Shoot for the moon. Even if you miss, you'll land among the stars.</p></blockquote>
</body>
</html>

Open in new window

0
Comment
Question by:greddin
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 17

Accepted Solution

by:
GreatGerm earned 500 total points
ID: 34242660
Why not just use something like this?  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Pullquotes</title>
<style type="text/css">
blockquote {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	width: 18em;
	margin: 10em auto 2em auto;
	text-align: left;
	background: url(quotes2.png) no-repeat bottom right;
	padding: 2px 15px 2px 2px;
}

blockquote:first-letter {
	background: url(quotes1.png) no-repeat left top;
	padding: 10px 2px 10px 25px;
}

</style>
 </head>

<body>
<blockquote cite="cite1">Shoot for the moon. Even if you miss, you'll land among the stars.</blockquote>
<br/>
<blockquote cite="cite2">Shoot for the moon. Even if you miss, you'll land among the stars. Shoot for the moon. Even if you miss, you'll land among the stars.</blockquote>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:greddin
ID: 34251457
Thank you for the help. Works great.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question