Fieldset and legend on IE6 and Firefox

Take a look at this simple css and html code, here's the css code:

fieldset{
background-color: #c0c0c0;
}

and here's the HTML part:

<fieldset>
<legend>Legend</legend>
<label for="something">something</label>
<input name="something" type="text">
</fieldset>

On firefox, it will be viewed like this:

While on IE6, it will be viewed like this:

And that's quite irritating. I don't know about other browser like safari and opera, but so far, here's a a quick code to solve the problem. You only need to change the css code.

fieldset {
display: block;
background-color: #c0c0c0;
position: relative;
}

legend {
padding: 0;
position: relative;
/* this works for IE6, to move up the legend */
top: -0.7em;
}

/* Hide this rule from IE */
legend {
/* on Gecko based browser we move the legend up with this */
margin-bottom: .3em;
}

The result is like this in Firefox:

And in IE6:

Finally, the background color in IE6 is not exceeded the top border, you can adjust the position of the content by adjusting the number yourself, I'm sure everybody is quite familiar with that.

SetAttribute on IE6 and firefox

Say, you want to create an element using javascript with code like

<div class="myClass" onClick="myFunction()">inner HTML</div>

Now, the way to do it in firefox is by simply using javascript setAttribute like this:

<script language="javaScript">
element = document.createElement("div");
 element.appendChild(document.createTextNode("inner HTML"));
 element.setAttribute("class", myClass");
 element.setAttribute("onClick", "myFunction()");
</script>

But on Internet Explorer, that code won't work. It's broken. The class part should be written className on IE, so instead of >element.setAttribute("class", myClass"); it should be >element.setAttribute("className", myClass");, and what if you have many element attributes that you don't know whether they're applied the same way on IE and firefox ? like >style, id, name, on{Change, MouseOver, etc} ?

So far, here's the quick solution to do it, it's only a try catch block actually :

>
<script language="javaScript">
try {
   element = document.createElement("<div class=\"myClass\" onclick=\"myFunction()\">");
   element.appendChild(document.createTextNode("inner HTML"));
 } catch (e) {
   element = document.createElement("div");
 element.appendChild(document.createTextNode("inner HTML"));
 element.setAttribute("class", myClass");
 element.setAttribute("onClick", "myFunction()");
 }
</script>

Quite quick, eh ?