CSS Quote Box - Gap Issue

CSS Quote Box - Gap Issue (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets

Message

mar0364 -> CSS Quote Box - Gap Issue (8/9/2007 8:59:53)

After 4 or 5 hours of struggling I've decided to ask for help. So please help.
This is my not so cute little quote box (bottom of page for image). As you can see it is a bit wide on the right.

This is the HTML for it:

<blockquote>
      <p>No, sir, when a man is tired of London he is tired of life.</p>
      <p id="quote_attrib">Samuel Johnson 1777</p>
</blockquote>

This is the my attempt at CSS:

blockquote {
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #FFFFFF;
	background-color: #999999;
	margin: 10px;
	padding: 0;
	background-image: url(images/top_quote.gif);
	background-repeat: no-repeat;
	background-position: left top;
}
blockquote p {
	margin: 10px 0px 0px 10px;
	padding: 10px 10px 0px;
	text-indent: 20px;
}
#quote_attrib {
	font-size: 70%;
	background-image: url(images/btm_quote.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
	text-align: right;
	text-indent: 0px;
	margin-top: 0px;
	padding-bottom: 30px;
}

[image]local://upfiles/5085/DF84CBA6FDDB4BFE8F09A0C336D09CCA.jpg[/image]

Tailslide -> RE: CSS Quote Box - Gap Issue (8/9/2007 9:34:02)
Can you give us the actual link or the graphics so that we can mess with them - makes it easier.

mar0364 -> RE: CSS Quote Box - Gap Issue (8/9/2007 9:39:17)
Thank You. I don't have it live. But here is the bottom gif. [image]local://upfiles/5085/E6AF3D1458CF4029BF47E30F4CCA6DBD.gif[/image]

mar0364 -> RE: CSS Quote Box - Gap Issue (8/9/2007 9:40:08)
Here is the top gif. [image]local://upfiles/5085/BD119B091820445797FF1D0F5A86019D.gif[/image]

Tailslide -> RE: CSS Quote Box - Gap Issue (8/9/2007 9:40:29)
Ta - give me a while I'll see if I can figure it out! Edit: Rich - it's working for me with everything else just plain on the page so it must be something else on the page interfering with it: Test Page Probably not much help really!

mar0364 -> RE: CSS Quote Box - Gap Issue (8/9/2007 14:01:26)
I finally got it to work by adding this #quote_attrib { font-size: 70%; background-image: url(images/btm_quote.gif); background-repeat: no-repeat; background-position: right bottom; text-align: right; text-indent: 0px; margin-top: 0px; margin-right 0px padding-bottom: 30px; }

Page: [1]

0.046875