469,573 Members | 1,660 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,573 developers. It's quick & easy.

href="#" onclick="func(); return false;" and css class problem

Hello,
I have the following page:

...
Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2. body {
  3.     font-family: Verdana, Arial, Helvetica, sans-serif;
  4.     font-size: 12px;
  5. }
  6.  
  7. #form-tabs {
  8.     background-color: #7F8A81;
  9. }
  10. #form-tabs ul {
  11.     padding: 20px 0 3px 0;
  12.     margin-left: 0;
  13.     border-bottom: 1px solid #778;
  14.     list-style: none;
  15.     margin: 0;
  16. }
  17. #form-tabs ul li {
  18.     display: inline;
  19. }
  20. #form-tabs ul li a {
  21.     padding: 3px 10px;
  22.     margin-left: 5px;
  23.     margin-top: 10px;
  24.     border: 1px solid #CED2B6;
  25.     border-bottom: none;
  26.     background-color: #E8E9E2;
  27.     text-decoration: none;
  28. }
  29. #form-tabs ul li a:link, #form-tabs ul li a:visited { 
  30.     color: #474F49; 
  31. }
  32. #form-tabs ul li a:hover {
  33.     color: #E8E9E2;
  34.     background-color: #717A73;
  35.     border-color: #586159;
  36. }
  37. #form-tabs ul li.current a:link {
  38.     color: #474F49;
  39.     background-color: #FFFFFF;
  40.     border-color: #586159;
  41. }
  42. </style>
  43. <script src="js/jquery-1.2.6.min.js" language="javascript"></script>
  44. <script language="javascript">
  45. <!-- Begin
  46. function move_form_tab(index) {
  47.     $("#form-tabs ul li").removeClass("current");
  48.     $("#form-tabs ul li").eq(index).addClass("current");
  49.     $("#partial-forms div").css("display", "none");
  50.     switch(index) {
  51.         case 0:
  52.             $("#datos-personales").css("display", "block");
  53.             break;
  54.         case 1:
  55.             $("#datos-vivienda").css("display", "block");
  56.             break;
  57.         case 2:
  58.             $("#datos-laborales").css("display", "block");
  59.             break;
  60.         case 3:
  61.             $("#datos-financieros").css("display", "block");
  62.             break;
  63.         case 4:
  64.             $("#referencias-bancarias").css("display", "block");
  65.             break;
  66.         case 5:
  67.             $("#referencias-personales").css("display", "block");
  68.             break;
  69.         case 6:
  70.             $("#datos-conyugue").css("display", "block");
  71.             break;
  72.     }
  73. }
  74. // End -->
  75. </script>
  76. </head>
  77. <body>
  78. <div id="form-tabs">
  79.   <ul>
  80.     <li class="current"><a href="#" onclick="javascript:move_form_tab(0); return false;">Datos Personales</a></li>
  81.     <li><a href="#" onclick="javascript:move_form_tab(1); return false;">Datos de Vivienda</a></li>
  82.     <li><a href="#" onclick="javascript:move_form_tab(2); return false;">Datos Laborales</a></li>
  83.     <li><a href="#" onclick="javascript:move_form_tab(3); return false;">Datos Financieros</a></li>
  84.     <li><a href="#" onclick="javascript:move_form_tab(4); return false;">Referencias Bancarias</a></li>
  85.     <li><a href="#" onclick="javascript:move_form_tab(5); return false;">Referencias Personales</a></li>
  86.     <li><a href="#" onclick="javascript:move_form_tab(6); return false;">Datos del C&oacute;nyugue</a></li>
  87.   </ul>
  88. </div>
  89. <div id="partial-forms">
  90.   <div id="datos-personales">datos-personales</div>
  91.   <div id="datos-vivienda">datos-vivienda</div>
  92.   <div id="datos-laborales">datos-laborales</div>
  93.   <div id="datos-financieros">datos-financieros</div>
  94.   <div id="referencias-bancarias">referencias-bancarias</div>
  95.   <div id="referencias-personales">referencias-personales</div>
  96.   <div id="datos-conyugue">datos-conyugue</div>
...

The problem that I'm having is that the .current styles are not rendering well in browsers other than IE7.

Any help will be very apreciated!
Dec 20 '08 #1
5 8267
phvfl
173 Expert 100+
Have you tried validating the page using the W3C validator? Validation errors can often cause pages to render differently where different browsers make different assumptions to correct for the errors. Another issue is that IEs non-conformance to web standards cause styles to look differently in IE to other browsers. Have you included a valid DOCTYPE to force IE into standards mode instead of quirks mode?

Is the style change being applied and not looking correct or is the style change not being applied at all in any browser other than IE? Is the page visible anywhere that people can access to investigate further?
Dec 20 '08 #2
Thanks, I looked into the w3c validator and showed me that I had an error on the script tag atritues for the javascript. So it should be:

<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">

instead of:

<script src="js/jquery-1.2.6.min.js" language="javascript"></script>
<script language="javascript">
Dec 20 '08 #3
acoder
16,027 Expert Mod 8TB
Rather than just setting a:link, set all pseudo-classes or just a:
Expand|Select|Wrap|Line Numbers
  1. #form-tabs ul li.current a
Dec 23 '08 #4
Thanks... that solved the problem in Firefox.

Other browsers (Safari, Opera and IE7) rendered the page well.

Thanks again!
Dec 23 '08 #5
acoder
16,027 Expert Mod 8TB
You're welcome. Glad to help :)
Dec 23 '08 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

6 posts views Thread by Jez | last post: by
10 posts views Thread by Gernot Frisch | last post: by
2 posts views Thread by Vincent van Beveren | last post: by
6 posts views Thread by kelvlam | last post: by
5 posts views Thread by Ben | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.