I have the following page:
...
Expand|Select|Wrap|Line Numbers
- <style type="text/css">
- body {
- font-family: Verdana, Arial, Helvetica, sans-serif;
- font-size: 12px;
- }
- #form-tabs {
- background-color: #7F8A81;
- }
- #form-tabs ul {
- padding: 20px 0 3px 0;
- margin-left: 0;
- border-bottom: 1px solid #778;
- list-style: none;
- margin: 0;
- }
- #form-tabs ul li {
- display: inline;
- }
- #form-tabs ul li a {
- padding: 3px 10px;
- margin-left: 5px;
- margin-top: 10px;
- border: 1px solid #CED2B6;
- border-bottom: none;
- background-color: #E8E9E2;
- text-decoration: none;
- }
- #form-tabs ul li a:link, #form-tabs ul li a:visited {
- color: #474F49;
- }
- #form-tabs ul li a:hover {
- color: #E8E9E2;
- background-color: #717A73;
- border-color: #586159;
- }
- #form-tabs ul li.current a:link {
- color: #474F49;
- background-color: #FFFFFF;
- border-color: #586159;
- }
- </style>
- <script src="js/jquery-1.2.6.min.js" language="javascript"></script>
- <script language="javascript">
- <!-- Begin
- function move_form_tab(index) {
- $("#form-tabs ul li").removeClass("current");
- $("#form-tabs ul li").eq(index).addClass("current");
- $("#partial-forms div").css("display", "none");
- switch(index) {
- case 0:
- $("#datos-personales").css("display", "block");
- break;
- case 1:
- $("#datos-vivienda").css("display", "block");
- break;
- case 2:
- $("#datos-laborales").css("display", "block");
- break;
- case 3:
- $("#datos-financieros").css("display", "block");
- break;
- case 4:
- $("#referencias-bancarias").css("display", "block");
- break;
- case 5:
- $("#referencias-personales").css("display", "block");
- break;
- case 6:
- $("#datos-conyugue").css("display", "block");
- break;
- }
- }
- // End -->
- </script>
- </head>
- <body>
- <div id="form-tabs">
- <ul>
- <li class="current"><a href="#" onclick="javascript:move_form_tab(0); return false;">Datos Personales</a></li>
- <li><a href="#" onclick="javascript:move_form_tab(1); return false;">Datos de Vivienda</a></li>
- <li><a href="#" onclick="javascript:move_form_tab(2); return false;">Datos Laborales</a></li>
- <li><a href="#" onclick="javascript:move_form_tab(3); return false;">Datos Financieros</a></li>
- <li><a href="#" onclick="javascript:move_form_tab(4); return false;">Referencias Bancarias</a></li>
- <li><a href="#" onclick="javascript:move_form_tab(5); return false;">Referencias Personales</a></li>
- <li><a href="#" onclick="javascript:move_form_tab(6); return false;">Datos del Cónyugue</a></li>
- </ul>
- </div>
- <div id="partial-forms">
- <div id="datos-personales">datos-personales</div>
- <div id="datos-vivienda">datos-vivienda</div>
- <div id="datos-laborales">datos-laborales</div>
- <div id="datos-financieros">datos-financieros</div>
- <div id="referencias-bancarias">referencias-bancarias</div>
- <div id="referencias-personales">referencias-personales</div>
- <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!