Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Aug 2012
    Posts
    45
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Blockquote quotes in a different place across browsers

    Hi

    I have messed around with this for a good hour and eventually got my blockquotes consistent accross FF, Chrome and IE, problem is that on my mobile browser they are wrong can anyone shed any light on where I am going wrong?

    Here is a pic of what is happening:



    Here is my code:

    HTML

    Code:
    <blockquote>
    A service that doesn't cost the Earth
    </blockquote>
    CSS

    Code:
    blockquote {
    	font-family: Georgia, serif;
    	font-size: 18px;
    	font-style: italic;
    	width: 335px;
    	position: relative;
    	color: #4389ad;
    	left: 310px;
    	word-spacing: 2px;
    	margin: 0;
    	padding-top: 5px;
    	padding-right: 15px;
    	padding-bottom: 5px;
    	padding-left: 20px;
    }
    
    blockquote:before {
    	display: block;
    	content: "\201C";
    	font-size: 30px;
    	position: absolute;
    	float:left;
    	left: -5px;
    	top: -3px;
    	color: #4389ad;
    }
    
    blockquote:after {
    display: block;
    content: "\201D";
    font-size: 30px;
    position: absolute;
    left: 327px;
    top: -3px;
    color: #4389ad;
    }
    Here is the site:

    http://www.ecofrost-uk.com

    Thanks in advance, it's driving me crazy

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    327
    Thanks
    3
    Thanked 35 Times in 35 Posts
    Try this: let your CSS code be preceded by
    Code:
    blockquote:before, blockquote:after {
    	content: '';
    	content: none;
    }
    There is a chance then that the spaces will disappear in all browsers, but they look a bit funny to me anyway...
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • Users who have thanked Frankie for this post:

    mzpresto (02-07-2013)

  • #3
    New Coder
    Join Date
    Aug 2012
    Posts
    45
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Frankie View Post
    Try this: let your CSS code be preceded by
    Code:
    blockquote:before, blockquote:after {
    	content: '';
    	content: none;
    }
    There is a chance then that the spaces will disappear in all browsers, but they look a bit funny to me anyway...
    Hi Frankie, thanks for the response, I tried it but unfortunately it made no difference.

    Any other ideas? Thanks

  • #4
    New Coder
    Join Date
    Aug 2012
    Posts
    45
    Thanks
    15
    Thanked 0 Times in 0 Posts
    hmmm

    I might have to put this down to my specific phone, it seems it can't display blockquotes properly from other sites...

    It's a HTC, but I am running MIUI which is not officially supported on the Wildfire S, so this probably explains it?? sorry to have wasted your time

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Posts
    327
    Thanks
    3
    Thanked 35 Times in 35 Posts
    No worries. What kind of browser comes default with MIUI? One of the 'Gang of Five' (IE, FF, Saf, Chr, O) or one of the 'Gang of Four' (a Chinese one)?

  • #6
    New Coder
    Join Date
    Aug 2012
    Posts
    45
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Frankie View Post
    No worries. What kind of browser comes default with MIUI? One of the 'Gang of Five' (IE, FF, Saf, Chr, O) or one of the 'Gang of Four' (a Chinese one)?
    It's hard to say.. because it doesn't have the browser name anywhere in the setting, but my research suggests that it's called "Miren" which is the default Miui browser
    Last edited by mzpresto; 02-10-2013 at 12:35 PM. Reason: blah


  •  

    Posting Permissions

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