CODEWITHSUNDEEP
htmlcssinternet-explorerfirefoxstylesheet
Glinkot
Glinkot

Reputation: 2964

Inline html style fine in Firefox, not working in IE

This is interesting. The attached very simple code gives nice 'background highlighted' text in Firefox, but displays no highlighting in IE7 (and possibly others, not yet tested).

The use of such inline elements is important because I'm using them in a grid to highlight important words etc.

Test.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="Test.css" type="text/css" />
</head>
<body>
This is <hlr>a test</hlr> of the <hlr>highlighting</hlr>
</body>
</html>

Test.css

/*RED Highlighted text.*/
hlr
{
    background-color: #FF5555;
    font-weight: bold;
    font-size:100%;
}

Bizarre! Any thoughts on how to remedy it?

Upvotes: 1

Views: 1862

Answers (3)

Jhourlad Estrella
Jhourlad Estrella

Reputation: 3670

hlr is invalid markup. Try this instead:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="Test.css" type="text/css" />
</head>
<body>
This is <span class='hlr'>a test</span> of the <span class='hlr'>highlighting</span>
</body>
</html>

then:

/*RED Highlighted text.*/
.hlr
{
    background-color: #FF5555;
    font-weight: bold;
    font-size:100%;
}

Upvotes: 2

Quentin
Quentin

Reputation: 943510

There is no hlr element in HTML. Internet Explorer doesn't make elements it doesn't recognise available to it's CSS selector engine.

The solution is to write HTML, don't make up your own elements. You should probably be using <em> or <strong> instead, possibly with a class to distinguish them from other forms of emphasis.

You can also force new elements to be recognised by the selector engine with document.createElement('element_name'), but adding a JS dependancy isn't a great idea and doesn't resolve the issue that no browser will know what semantics to apply.

Upvotes: 3

Robin Maben
Robin Maben

Reputation: 23054

You need to specify the below XHTML doctype too..

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

Upvotes: 0

Related Questions