• Web Design (WordPress, Joomla, etc.)

  my jQuery or css does not work in Safari :S

  Posted by Sara Andersson on January 19, 2010 at 7:35 am

  Hi!
  I have an issue with Safari. I got this page that use jQuery to hide some information and then show it when the user clicks. It works fine in other web browers but in Safari the text gets hidden alright but when the user clicks the other text underneath does not move (unless one scrolls up and down on the page, to sort of shake it in place 😀 ).

  Is there anyone out there who recognize this problem?

  The jQuery looks like this:
  $(“.faqQuestion ul.answer”).hide();
  $(“.faqQuestion”).click(function () {
  $(this).find(“ul.answer”).slideToggle(“fast”);
  });

  And the css looks like this:
  #customerService{
  font-family: Arial Narrow, Arial, san-serif;
  font-size:14px;
  line-height:normal;
  }
  #customerService p{
  line-height:normal;
  }
  .category{
  margin-bottom:10px;
  }
  .categoryName{
  border-bottom: 10px solid #000;
  }
  .categoryDescription{
  padding-bottom:10px;
  }
  .faqQuestion{
  font-weight: bold;
  padding-bottom:5px;
  padding-left:25px;
  cursor:pointer;
  }
  .faqQuestion li{
  list-style-type: decimal;

  }
  .faqQuestion span{
  text-decoration:underline;
  }
  .answer li{
  font-weight: normal;
  list-style-type: none;
  }
  .answerFullQuestion li{
  padding-top:5px;
  font-weight: bold;
  padding-bottom:10px;
  list-style-type: none;
  }
  .answerFullQuestion ul li{
  font-weight: normal;
  padding-bottom:10px;
  padding-left:0px;
  list-style-type: none;
  }
  .answerAnswer li{
  font-weight: normal;
  padding-bottom:10px;
  font-weight: bold;
  }
  .answerAnswer ul li{
  font-weight: normal;
  list-style-type: none;
  }

  Thank you! 🙂

  beginner

  Sara Andersson replied 16 years, 7 months ago 2 Members · 3 Replies
• 3 Replies

• 

  Curtis Thompson

  January 19, 2010 at 3:03 pm

  hello…

  do you happen to have an example online? hard to debug w/ just the provided info…

  sitruc
• 

  Sara Andersson

  January 20, 2010 at 1:11 am

  Hi! Thank you for answering 🙂 I do not have it online now, but I will try to get it later today 🙂

  beginner
• 

  Sara Andersson

  January 20, 2010 at 4:12 am

  Hi! 😀 I have “solved” it, do not understad how though.

  We are developing a page through remote desktop and I went through the process of copying code and trying it on the computer directly, and it worked fine in Safari. Did not understand anything at all. Then I started looking through it and saw this:

  .categoryName{
  border-bottom: 3px solid #000;
  font-weight: bold;
  /*padding-left:10px;*/
  /*padding-top:2px;*/
  padding-bottom:2px;
  margin-bottom:10px;*/
  /*font-size:120%;*/
  /*background-color:#000;*/
  /*color:#fff;*/
  }

  My dear colleague doing the css had an extra */ after the margin-bottom row. Just asked her to take it away and now it also works through remote desktop. Do you understand why?

  So glad it works!! 😀

  beginner

Reply to this Discussion! Login or Sign Up