layout problem with a block quote

[peterkp]

I have a <blockquote> element in my page footer, and I'm having trouble displaying it the way I want - centered, with a short divider underneath. It shows correctly in FF. However in IE it displays with the blockquote element right justified on the page.

Any advice / improvements is welcome.

This is what i have so far...

<div id="footer">
	<blockquote id="quotation">
		<p class="quote">Any problem you can't solve with a guitar is either insoluble or it isn't a problem</p>
		<p class="source">Anonymous</p>
	</blockquote>
	<div id=housekeeping">
		<p>other stuff...</p>
	</div>
</div>

blockquote {
	position:relative;
	width:60%;
	left:20%;
	line-height:90%;
	border-top:3pt solid #009900;
	border-bottom:3pt solid #009900;
	padding:0;
}
	.quote {
		font-family:"Comic Sans MS", sans-serif;
		font-size:12pt;
		padding:0;
		margin:6pt;
	}
	.source {
		font-family:"Times New Roman", serif;
		font-style:italic;
		padding:0;
		margin:4pt;
		font-size:10pt;
	}

[Dr John]

an url would help

[AutisticCuckoo]

Don't use relative positioning for this. Use automatic margins instead:

blockquote {
    width:60%;
    margin-left:auto;
    margin-right:auto;
    line-height:90%;
    border-top:3pt solid #090;
    border-bottom:3pt solid #090;
    padding:0;
}

[peterkp]

Thanks, using auto has fixed the problem perfectly. Another tool added to my skill set!

By the way, you changed the color references from #009900 to #090. Is that just personal preference or are there technical issues that I should know about?

[AutisticCuckoo]

By the way, you changed the color references from #009900 to #090. Is that just personal preference or are there technical issues that I should know about?

You noticed, eh?

Just a personal preference. Why write six digits when three will do the job?