jquery app works only in FF3.5, IE8 throws errors and Chrome3 locks up!

Question

Has anybody else experienced this? I get tons of JS errors surrounding the jquery markup, such as the following line of code, works in FF but generates an error "Object doesn't support this property or method" in IE.

$("input[type=text]").css("border","1px solid grey");

Chrome doesn't give me the same error, but it locks up when I perform my autocomplete. The autocomplete works perfectly in FF.

This is very strange to me. I don't even know where to begin debugging this!

If anybody cares to see what I'm talking about, I'll provide my url.

  $("#med").autocomplete("ajax-getAllMeds.php", {
      selectFirst: false,
      autoFill: true,
      max: 20,
      minchars: 2,
      cache: 30
  });

edit: I removed the autocomplete functionality. When you click on one of the meds at the top of the page, the text loads fine in FF but not at all in IE and Chrome.

Answer 1

Sounds to me like jQuery isn't loading up in IE8. You don't happen to have any IE-specific conditional logic in your mark up do you? I'd need more code to make heads or tails out of the issues with Chrome.

Answer 2

I'd recommend you trying to split the CSS into the several border properties as I think most browsers don't directly map multi-component properties into their respective components when CSS is being set through the DOM properties in JavaScript.

My suggestion:

$("input[type=text]").css({
  "border-size": "1px",
  "border-style": "solid",
  "border-color": "grey"});