CSS Quote Box - Gap Issue

	Home Register Search Help Login

Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

CSS Quote Box - Gap Issue

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets >> CSS Quote Box - Gap Issue

Page: [1]

mar0364

Posts: 3062
Joined: 4/5/2002
From: Florida, US
Status: offline

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;
}

Thumbnail Image

Attachment (1)

< Message edited by mar0364 -- 8/9/2007 9:06:29 >

_____________________________

Easy Web

�Stay committed to your decisions, but stay flexible in your approach.�


Tailslide Posts: 5948 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	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. _____________________________ "My strategy is so simple an idiot could have devised it" Little Blue Plane Web Design \| Blood, Sweat & Rust - A Land Rover restoration project (in reply to mar0364)


mar0364 Posts: 3062 Joined: 4/5/2002 From: Florida, US Status: offline	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. Thumbnail Image Attachment (1) _____________________________ Easy Web �Stay committed to your decisions, but stay flexible in your approach.� (in reply to Tailslide)


mar0364 Posts: 3062 Joined: 4/5/2002 From: Florida, US Status: offline	RE: CSS Quote Box - Gap Issue - 8/9/2007 9:40:08 Here is the top gif. Thumbnail Image Attachment (1) _____________________________ Easy Web �Stay committed to your decisions, but stay flexible in your approach.� (in reply to mar0364)


Tailslide Posts: 5948 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	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! < Message edited by Tailslide -- 8/9/2007 9:50:31 > _____________________________ "My strategy is so simple an idiot could have devised it" Little Blue Plane Web Design \| Blood, Sweat & Rust - A Land Rover restoration project (in reply to mar0364)


mar0364 Posts: 3062 Joined: 4/5/2002 From: Florida, US Status: offline	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; } _____________________________ Easy Web �Stay committed to your decisions, but stay flexible in your approach.� (in reply to Tailslide)

Page: [1]

All Forums >> Web Development >> Cascading Style Sheets >> CSS Quote Box - Gap Issue

Page: [1]

Jump to: 1

New Messages	No New Messages
Hot Topic w/ New Messages	Hot Topic w/o New Messages
Locked w/ New Messages	Locked w/o New Messages

Post New Thread

Reply to Message

Post New Poll

Submit Vote

Delete My Own Post

Delete My Own Thread

Rate Posts