SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    2 Browser Compatibility Problems

    Hey Guys,

    I was really hoping that someone could help me sort out two minor problems which I'm experiencing with by JavaScript and two browsers. (FireFox and Safari)

    1. Safari doesn't support style="background:#CCCCCC;"
    I use the following JS code to change the background color of my select boxes.

    HTML Code:
    var backcolor = "#CCCCCC";
    document.getElementById('operatings').style.background = backcolor;
    Unfortunately Safari doesn't support this. I could use the following :

    HTML Code:
    var backcolor = "#CCCCCC";
    document.getElementById('operatings').style.background-color = backcolor;
    ...but it doesn't work. Probably because the JS reads the dash ( - ) as a syntax error. What alternative is there to this?

    2. FireFox doesn't support 'value="";'
    I use the following code to reset the selection of a <select> drop down :

    HTML Code:
    document.getElementById('operatings').value = "";
    ...but FireFox doesn't seem to support this.
    What alterative is there to unselecting the selected the option in a <select> dropdown? I know about the reset button, but unfortunately I cannot use this.

    It will be GREATLY appreciated if someone could help me with this.

    Regards,
    Antonie
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software

  2. #2
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I think I've managed to sort the background color problem in Safari.

    Instead of :

    HTML Code:
    document.getElementById('operatings').style.background-color = "#CCCCCC";
    ...I used :

    HTML Code:
    document.getElementById('operatings').style.backgroundColor = "#CCCCCC";
    which seems to solve the problem.

    1 down...1 to go...

    All help will be greatly appreciated!

    All the best,
    Antonie
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software

  3. #3
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) As you just found out, in JavaScript you remove the hyphen in CSS property names and make the character that followed it upper-case. There is also the special case of the float property. Since float is a reserved keyword in JavaScript, you can't use it. Some browsers use "cssFloat" while others use "styleFloat". You should use both for cross-browser compatibility.

    2) Set the select element's selectedIndex property to -1.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  4. #4
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz
    1) As you just found out, in JavaScript you remove the hyphen in CSS property names and make the character that followed it upper-case. There is also the special case of the float property. Since float is a reserved keyword in JavaScript, you can't use it. Some browsers use "cssFloat" while others use "styleFloat". You should use both for cross-browser compatibility.

    2) Set the select element's selectedIndex property to -1.
    Hi there,

    Thanks for #2
    You are the BEST!!!

    All the best,
    Antonie
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Kravvitz
    There is also the special case of the float property. Since float is a reserved keyword in JavaScript, you can't use it. Some browsers use "cssFloat" while others use "styleFloat". You should use both for cross-browser compatibility.
    The two other exceptions are htmlFor and className.

    float, for, and class are all Javascript reserved words, hence the alternative names.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Those aren't CSS properties though -- they are X/HTML attributes -- so I didn't bother to mention them.

    Quote Originally Posted by Contrid
    Thanks for #2
    You are the BEST!!!
    The best? I doubt if I'm the best, but I am better than what seems to be the majority. Anyway, you're welcome

    And yes, I do tend to take things very literally.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •