SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Blockquote floated margins overlap adjacent floated elements

    On this page > http://stones-alt.clickbump.com/tren...-nails-lineup/

    The blockquote that's next to the floated image is overlaying it. Any ideas how to tweak the css so that the blockquote element honors the floated image's margins?

    I want the blockquote to align the same as the text that precedes it.

    Here's the css on the blockquote element:

    HTML Code:
    blockquote{
    	line-height:1.25em;
    	border:1px solid #ccc;
    	border-width:1px 0;
    	margin:10px 0 0 0;
    	padding:0 10px 0 50px;
    	font-style:italic;
    	font-size:1.3em;
    	quotes:'\\201C''\\201C';
    	clear:left;
    	position:relative
    }
    
    blockquote:before{
    	line-height:1em !important;
    	content:open-quote;
    	font-size:5em;
    	position:absolute;
    	color:#ccc;
    	left:5px;top:10px;
    	font-family:georgia,serif;
    	font-style:normal;
    	font-weight:normal
    	}

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Try setting the blockquote to overflow: hidden;

  3. #3
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Exactly! Why didn't I think of that???

    Thanks again Ralph. Easy fix


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
  •