Solved

Problem with closing pull quote in IE.

Posted on 2010-11-30
2
402 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
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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Swiper slider stops between pages 11 32
Adding a menu section 13 35
Login area of a page 4 19
modify h2 4 16
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

760 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now