CODEWITHSUNDEEP
htmlcss
JMK
JMK

Reputation: 28059

Why does my custom CSS tag place quotes when I apply it to some text

Ok so I am very new to CSS and HTML. Basically I have the below code:

<html>
<head>
<style type="text/css">
p
{
    font-family:Calibri, Arial, Helvetica, sans-serif;
}

q
{
    color:#698B22;
}
</style>
</head>

<body>
<p>
Foo Bar Foo bar.
<br /><br />
Foo <a href="http://www.stackoverflow.com/">Bar</a> Foo Bar.
<br /><br />
Foo <a href="http://www.stackoverflow.com/">Bar <q>Foo</q> Bar</a> Foo Bar.
<br /><br />
</p>
</body>
</html>

When I view this in my Browser, it looks like so:

HTML Rendered by browser

What I want to know is, why, on the third line, is there quotes around the word Foo inside the link (in the most recent versions of Chrome and Firefox, this is not present in IE9)? Also, how do I get shot of the quotes?

Thanks

Upvotes: 0

Views: 228

Answers (7)

Simon Arnold
Simon Arnold

Reputation: 16177

Since <q> Tag mean quote, some browsers will automatically add quotation marks around the content.
In this particular case, I suggest you use another tag, like: <em> instead.

More: http://www.w3.org/wiki/HTML/Elements/q

Upvotes: 0

JoeJ
JoeJ

Reputation: 940

Use <span>Foo</span> around a word to give it specific CSS styles.

Upvotes: 0

Andrew
Andrew

Reputation: 13853

Browsers have default style sheets, the one you are using probably adds them, you can override it though,

q {
   quotes: none;
}
q:before, q:after {
  content: "";
  content: none;
}

Upvotes: 0

allen213
allen213

Reputation: 2277

The tags are telling the browser to put quotes around the word Foo

Upvotes: 1

Dave Mroz
Dave Mroz

Reputation: 1489

You have added the HTML short quote tag to your link. Remove the q part and the quotes will go away. http://www.w3schools.com/tags/tag_q.asp

If you wanted to do what you're doing in CSS: Foo <a href="http://www.stackoverflow.com/">Bar <span class="q">Foo</span> Bar</a> Foo Bar.

and change your CSS to: .q { color:#698B22; }

Note that you can't create new HTML elements in CSS - you can override the deafult settings or create new classes or IDs.

Upvotes: 0

chadpeppers
chadpeppers

Reputation: 2057

works in IE9 so I would probably guess you are not declaring a doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324640

q is not a custom tag, it already exists.

Upvotes: 5

Related Questions