Member Avatar for felonee63

Here's my problem :)

I'm working on some stuff for our website, that is about 900 pages in Word, and having to code it in HTML. To make it faster for myself, I've created two text styles <command> and <order>
Here's my stylesheet:

command {
    color: c30000;
    font-style: italic;
}

order {
    color: c30000;
    font-style: bold;
}

Here's my html:

<li>Facings to the right or left will be executed in one <i>time</i>, or pause. 

The instructor will
    command:<br><br>
 1. <command>Squad</command>. 2. <command>Right (or left)</command><order> - 

FACE</order>.</li><br><br>

Firefox is interpreting all of this correctly. IE is not showing the italics, OR the colors, OR the bolding.

Can someone please assist?

I've tried changing my CSS to:

command {
    color: #c30000;
    font-style: italic;
}

order {
    color: #c30000;
    font-style: bold;
}

This still does not work. The page in question is at if anyone wants to see the page in question.

Thanks in advance!

  • 2 Contributors
  • 2 Replies
  • 116 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by felonee63

Dani AI

Generated

This thread shows a very common cross-browser gotcha: Firefox will often style unknown element names, while older Internet Explorer versions will ignore them. correctly steered the discussion toward using classes, and confirmed that switching to spans fixed the problem. The underlying cause and a few robust solutions are summarized below.

Why it failed: arbitrary tags (like the custom command and order used here) are not part of HTML4/XHTML, so IE6/7/8 do not create DOM elements that accept CSS for those names. Firefox is forgiving and treats unknown tags as inline elements, so the same markup appeared styled there but not in IE. Also remember that italic is controlled by font-style and bold by font-weight or semantic tags — mixing those up prevents the expected result.

Practical fixes:

  • Prefer valid inline elements with classes or semantic elements (span, em, strong) and style the classes in the stylesheet. Example markup and CSS (uses class selectors, not the custom tag names):

    <span class="cmd">Squad</span>
<span class="ord">FACE</span>

.cmd { color: #c30000; font-style: italic; }
.ord { color: #c30000; font-weight: 700; }

  • If keeping legacy custom tags, enable IE styling by creating those element names in the DOM before CSS runs (place this before the stylesheet link, or inside an IE conditional comment for IE8 and older):

    <script>
document.createElement('command');
document.createElement('order');
</script>

Other checks: ensure a standards doctype to avoid quirks mode, verify the stylesheet is actually loaded in IE (F12 developer tools -> Network/DOM/Computed style), and prefer semantic markup for accessibility. For modern projects, consider HTML5/Web Components (properly registered custom elements) rather than unregistered tags.

Recommended Answers

All 2 Replies

Member Avatar for Member #114696

the first problem with that is that u r not using correct css property
so use

command {
    color: #c30000;
    font-style: italic;
}

order {
    color: #c30000;
    font-weight: bold;  // for making text bold
}

however u must use classes ans id's instead. since the tags u using are not valid html tags, they could be ignored by the browser.

Member Avatar for felonee63

Thanks for taking the time to respond. Your response didn't give me the answer that I needed, but it did spark a memory of having this issue before.

I forgot about using <span class=""> and my problem is corrected now!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.