/    Sign up×
Community /Pin to ProfileBookmark

IE problem with css

Copy linkTweet thisAlerts:
May 10.2007

I have a page where elements are dynamically created. I’ve run into problems with IE recognizing the classes for these elements that are defined in CSS. Namely, it doesn’t. (Firefox does).
The specific elements I’m referring to (and I’m sure the problem would apply to others) are <div> and <td>.

If the element was hard coded in, IE, recognizes its css class; it only gives problems if the element is created dynamically. I’ve found that the css is recognized by IE if it is defined by an id (div#(theID)) opposed to a class (div.(className)). This requires me to recopy all my css classes into css id definitions (which seems like bad practice) and to add ids to all my elements (which is also bad practice because an id is supposed to be specific to one element, right?)

Any thoughts on solving this IE problem in the best manner would be appreciated.

Thanks,
Vinay

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@Sunny_GMay 10.2007 — Perhaps if you posted your code, that would help?

But if it is anything, IE gives us all problems
Copy linkTweet thisAlerts:
@WebJoelMay 11.2007 — Hey I like your avatar!

IE: "Weeeeee! ....Weeeeeee! hahahaaa ....Weeeeeee!..."

Firefox: "Shut up!"

(Silence...)
Copy linkTweet thisAlerts:
@vinays84authorMay 11.2007 — I've provided a small example to illustrate the problem. Feel free to try the code in both browsers.

[CODE]<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>

<STYLE TYPE="text/css">
td.boldCell {
font-weight: bold;
}
td#cellB {
font-weight: bold;
}
</STYLE>

<script type="text/javascript">
function addTable() {
var mainDiv=document.getElementById("mainDiv");
var newTable=document.createElement("table");
newTable.setAttribute("border","1");
var newCellA=newTable.insertRow(0).insertCell(0);
newCellA.setAttribute("class","boldCell");
newCellA.appendChild(
document.createTextNode("This text should be bold, but IE won't reconize the css linked from its class.")
);
var newCellB=newTable.insertRow(-1).insertCell(-1);
newCellB.setAttribute("id","cellB");
newCellB.appendChild(
document.createTextNode("This text will be bold in both browsers because IE recognizes the css linked via its id.")
);

mainDiv.appendChild(newTable);
}
</script>

<body>

<div id="mainDiv">
<script type="text/javascript">addTable();</script>

</body>
</html>[/CODE]


An additional (non-css) problem I've noticed is that IE doesn't recognize event handling when they are added with setAttribute:
[CODE]newCellA.setAttribute("onclick","alert(this.firstChild.data)")[/CODE]
I know you can use the attachEvent method (IE only) to attach a function..but how do you specify the function to the data unique to the element (e.g. make the function alert the elements id)?
×

Success!

Help @vinays84 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...