?
Solved

IE 6 and the CSS dot notation

Posted on 2003-03-19
5
Medium Priority
?
936 Views
Last Modified: 2012-05-04
I have this code:

CSS
---
p {color:#583000; font-family:arial; font-size:14pt}
p.italic {color:black; font-family:arial; font-style:italic; font-size:10pt;}

JavaScript
----------
function test(theId){
  oInp = document.getElementById(theId);

  pItal = document.createElement("p");
  pItal.setAttribute("class","italic");
  oInp.parentNode.replaceChild(pItal, oInp);
       
  text = 'Just A Test';
  textNode = document.createTextNode(text);
  pItal.appendChild(textNode);
}

HTML
----
<form>
 <input type="text" name="textName" onBlur="test('x')" id="x">
</form>

In NN 6 this works fine, the text is displayed using the "p.italic" style. In IE 6 the text is displayed using the "p" style, not the "p.italic" as intended. I can't tell you how annoyed I am. I'm trying to avoid having two separate CSS's. Why doesn't IE recognize the CSS dot notation? I even checked that IE wasn't ignoring the setAttribute method using:

alert(pItal.getAttribute("class"));

and both browsers returned

italic

although IE isn't actually using the "p.italic" style. Short of having to set each individual "p.italic" attribute using JavaScript, what can I do to get IE to cooperate?

bmh
0
Comment
Question by:bmh777
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 4

Expert Comment

by:BChan
ID: 8185140
replace
 pItal.setAttribute("class","italic");
with
 pItal.setAttribute("className","italic");

BChan
0
 

Author Comment

by:bmh777
ID: 8188825
Thanks for the answer. I actually found the answer myself shortly after posting this question and was in the process of trying retract it. Please accept my apologies.

bmh
0
 

Author Comment

by:bmh777
ID: 8188830
That should be, "trying to retract it."
0
 
LVL 4

Expert Comment

by:BChan
ID: 8192548
bmh777 ,
no problem, happy coding!
BChan
0
 
LVL 5

Accepted Solution

by:
Netminder earned 0 total points
ID: 8200719
Points refunded and question closed; user resolved.

Netminder
EE Admin
0

Featured Post

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I had to do a bit of research to find the answer to this question so I thought I'd share my results.  Due to our outdated mainframe systems, we need to downgrade IE9 to IE8 in order to stay compatible.  We also needed to downgrade Java.  In order to…
This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
Suggested Courses
Course of the Month9 days, 13 hours left to enroll

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question