.comment-link {margin-left:.6em;} <$BlogRSDURL$>

Monday, December 12, 2005

Safari Weirdness 

Buttons Here we see two buttons rendered in a Safari (that would be Apple's Browser for those of you not in the know) window. The one on the left was generated via regular HTML
<input type = "button" value = "Get Sample Info" onClick = "doGetSampleInfo();">
The one on the right was generated using Javascript manipulation of the DOM
var button = document.createElement("button")
button.appendChild(document.createTextNode("Edit Sample"))
sampleDiv.appendChild(button);
Do you notice anything strange about the pair of them? That's right, the first is a pretty Aqua button like you expect to see in Safari. The second is an ugly rectangle that looks goofy next to its sibling button. Firefox uses only ugly buttons so they match in that browser. Opera is smart enough to use the pretty button in both cases. C'mon Apple get with the program.

Oh and you could also notice that the text on the pretty button is set via

value = "Get Sample Info"
inside the button tag. The text on the Javascript-generated button is set something like this:
<button>Edit Sample</button>
If you try
button.setAttribute("value", "Edit Sample");
or
button.value = "Edit Sample";
which seem like they should generate the same DOM entry as the vanilla HTML, you get a miniscule button with no text. Why is that internets?

Comments: Post a Comment


This page is powered by Blogger. Isn't yours?