Blockquotes Look Different on Different Computers (6 posts)

  1. bricklayer.payne
    Posted 1 year ago #

    I organized my block quotes the way I liked them via the CSS stylesheet, but I've seen my website on my girlfriend's and my mom's computer, and they look entirely different. Normally the blockquote is just set apart with quotes around it, but on other computers, it's got weird colored blocks around it, and the text within the blocks are surrounded by another color.

    If that sounds confusing, just take a look at my website: http://www.trialofthecentury.net. If the block quotes look ugly to you, you're seeing it!

    Is there any way I can make my CSS changes apply to the website on both my computer and other peoples' computers?

  2. Andrew
    Forum moderator
    Posted 1 year ago #

    What are the differences in the computers? E.g. operating system, browsers, browser versions?

    Exactly what CSS have you used for the blockquotes?

    Are you using valid HTML?

  3. bricklayer.payne
    Posted 1 year ago #

    Actually, all the computers are the same---Macs, either Firefox or Google Chrome. Operating systems are either 10.8x, 10.9x or 10.6x.

    Here's the CSS for the blockquotes:

    blockquote {
    display: block;
    background: #fff;
    padding: 10px 10px 7px 50px;
    margin: 0 0 15px;
    position: center;
    font-family: Georgia, serif;
    font-size: 16px;
    line-height: 1.2;
    color: #000000;
    text-align: justify;
    font-style: italic;

    Forgive me for being a total doofus, but I do not know what Valid HTML is!

  4. martcol
    Posted 1 year ago #

    What happens if you add:

    background: none;

    to that rule?

  5. bricklayer.payne
    Posted 1 year ago #

    I'll give that a shot---thank you. Any other tips anyone has would be eternally appreciated!

  6. martcol
    Posted 1 year ago #

    That rule makes the blockquote background the same color as the paragraphs within it and the rest of the site. The alternative might be to set a background color on the paragraph:

    blockquote p {
        background-color: #FFF;

Topic Closed

This topic has been closed to new replies.

About this Topic