SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast peterkp's Avatar
    Join Date
    Mar 2009
    Location
    Auckland, NZ
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    layout problem with a block quote

    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...

    HTML Code:
    <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>
    Code CSS:
    blockquote {
    	position:relative;
    	width:60&#37;;
    	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;
    	}

  2. #2
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    an url would help

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't use relative positioning for this. Use automatic margins instead:
    Code CSS:
    blockquote {
        width:60&#37;;
        margin-left:auto;
        margin-right:auto;
        line-height:90%;
        border-top:3pt solid #090;
        border-bottom:3pt solid #090;
        padding:0;
    }
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Enthusiast peterkp's Avatar
    Join Date
    Mar 2009
    Location
    Auckland, NZ
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by peterkp View Post
    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?
    Birnam wood is come to Dunsinane


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •