Inspiring

Answered

Problem with quote in quote box

Forum|Forum|8 years ago
July 29, 2017
1 reply
626 views

I set up the quotes and quote box. In IE all of them show the large quote before the words but in Chrome the first one shows two but the ones after that show one.

You can see the code here:

Quote box problem.html - Google Drive

See screen shots. #1 is IE and #2 is Chrome - thanks and any help is appreciated.

PS - I no longer have web hosting so that is why I had to post the HTML file on Google Drive

This topic has been closed for replies.

Correct answer Nancy OShea

OK. Try this instead.

!doctype html>

<head>

<title>Untitled Document</title>

<style>

.myQuote {

font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";

font-size: 18px;

background: #f9f9f9;

border-left: 10px solid #ccc;

margin: 1.5em 10px;

padding: 0.5em 10px;

quotes: "\201C""\201D""\2018""\2019";

}

.myQuote:before {

color: #ccc;

content: open-quote;

font-size: 4em;

line-height: 0.1em;

margin-right: 0.25em;

vertical-align: -0.4em;

}

.myQuote:after {content: close-quote}

.myQuote p {display: inline;}

</style>

</head>

<body>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, quisquam, iure. Nihil necessitatibus maiores nisi et architecto autem, quidem perferendis, aliquam eligendi voluptatum, officiis quas quis, perspiciatis obcaecati dolorem voluptates.</p>

</blockquote>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, quisquam, iure. Nihil necessitatibus maiores nisi et architecto autem, quidem perferendis, aliquam eligendi voluptatum, officiis quas quis, perspiciatis obcaecati dolorem voluptates.</p>

</blockquote>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, quisquam, iure. Nihil necessitatibus maiores nisi et architecto autem, quidem perferendis, aliquam eligendi voluptatum, officiis quas quis, perspiciatis obcaecati dolorem voluptates.</p>

</blockquote>

</body>

</html>

Nancy OShea

Community Expert

Which font are you using? This works for me in FF & Chrome.

<!doctype html>

<head>

<title>Untitled Document</title>

<style>

blockquote {

font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";

font-size: 18px;

background: #f9f9f9;

border-left: 10px solid #ccc;

margin: 1.5em 10px;

padding: 0.5em 10px;

quotes: "\201C""\201D""\2018""\2019";

}

blockquote:before {

color: #ccc;

content: open-quote;

font-size: 4em;

line-height: 0.1em;

margin-right: 0.25em;

vertical-align: -0.4em;

}

blockquote p {

display: inline;

}

</style>

</head>

<body>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, quisquam, iure. Nihil necessitatibus maiores nisi et architecto autem, quidem perferendis, aliquam eligendi voluptatum, officiis quas quis, perspiciatis obcaecati dolorem voluptates.</p>

</blockquote>

</body>

</html>

Nancy O'Shea— Product User & Community Expert

Deaf_GuyAuthor

Inspiring

Nancy thanks can you please not use the <blockquote> and only use the code in my Drive file? I cannot use <blockquote> because their system is already using it for something else so I have to use a work around by creating the blue quote box CSS with the code i'm using.

I used your font family:

font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";

And it does the same thing that you see in my previous images - in Chrome it shows both quote marks in the first one but only one after that and then in IE it works for all like it's supposed to.

Nancy OShea

Correct answer

Community Expert

OK. Try this instead.

!doctype html>

<head>

<title>Untitled Document</title>

<style>

.myQuote {

font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";

font-size: 18px;

background: #f9f9f9;

border-left: 10px solid #ccc;

margin: 1.5em 10px;

padding: 0.5em 10px;

quotes: "\201C""\201D""\2018""\2019";

}

.myQuote:before {

color: #ccc;

content: open-quote;

font-size: 4em;

line-height: 0.1em;

margin-right: 0.25em;

vertical-align: -0.4em;

}

.myQuote:after {content: close-quote}

.myQuote p {display: inline;}

</style>

</head>

<body>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, quisquam, iure. Nihil necessitatibus maiores nisi et architecto autem, quidem perferendis, aliquam eligendi voluptatum, officiis quas quis, perspiciatis obcaecati dolorem voluptates.</p>

</blockquote>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, quisquam, iure. Nihil necessitatibus maiores nisi et architecto autem, quidem perferendis, aliquam eligendi voluptatum, officiis quas quis, perspiciatis obcaecati dolorem voluptates.</p>

</blockquote>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, quisquam, iure. Nihil necessitatibus maiores nisi et architecto autem, quidem perferendis, aliquam eligendi voluptatum, officiis quas quis, perspiciatis obcaecati dolorem voluptates.</p>

</blockquote>

</body>

</html>

Nancy O'Shea— Product User & Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded