CODEWITHSUNDEEP
cssinternet-explorerinternet-explorer-8
user4956265
user4956265

Reputation:

Styling Text Elements in Internet Explorer 8

.title {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 800;
    color: #1e1e1e;
    font-size: 24pt;
}

https://jsfiddle.net/pa3ztdwt/

The above fiddle works fine in Google Chrome, but does not work in Internet Explorer 8. It seems that the font-weight property is not rendering properly in Internet Explorer 8.

Do we have any solution for this?

Upvotes: 1

Views: 72

Answers (2)

Sampson
Sampson

Reputation: 268462

The HTML Standard does not define a <text> element. Scalable Vector Graphics (SVG) defines one, but you're not using this within the context of an SVG element. Let's look at why this works in Chrome, but not Internet Explorer 8 though, and how (if we wanted to) we could "fix" it.

First, neither Chrome nor Internet Explorer 8 see this as a known element. In Chrome we can create an instance, and check its constructor:

document.createElement( "text" ).constructor; // function HTMLUnknownElement()

Although Chrome doesn't recognize this as a known element, it permits styling in spite of that fact. Internet Explorer 8 treats a generic <text> element (sans SVG context) in a similar way:

console.log( document.createElement( "text" ) ); // LOG: [object HTMLGenericElement]

Internet Explorer handles this as a generic element, much in the same way it treats modern elements like <section>, <article>, and <canvas>. These valid elements suffered in the same way <text> does in that they were difficult to style in older versions of Internet Explorer.

One interesting thing we learned in trying to deliver - anachronistically - modern support to antiquated browsers, is that if you create the element with JavaScript, styling magically begins working:

<script>document.createElement( "text" );</script>
<text>This element can now be styled in Internet Explorer 8.</text>
<text>This element can also be styled, because of the effect line 1 has.</text>

While all of this is interesting, and fun to study, you should avoid doing this. While it's okay to use custom elements, you should avoid creating ambiguity. As mentioned earlier, the <text> element belongs to SVG, and should be reserved for those contexts.

If you wish to target an entire block of text or a group of elements, use Grouping Elements. If you would instead like to target a few sentences or words, consider using Text-level semantics.

I hope this has been helpful.

Upvotes: 2

czer
czer

Reputation: 471

The text tag is no defined standard. To add a paragraph use the p tag please. I did inspect the tag in IE 8 and as it seems is the tag directly closed without text within. So you just need to use an allowed tag like p

<p class='boldText title'>
    sometitle
</p>

Here's the fiddle: http://jsfiddle.net/bd5Lrkjn/embedded/result/

Upvotes: 0

Related Questions