[SOLVED] Div height + background-color change

[FireDrake]

Hey all,

 

I have three different div's, they look like this:

 

<div onclick="PreviousPage()" id="LinkPg" class="SwitchForm">
<a href="javascript:void(0);">Persoonsgegevens</a>
</div>

<div onclick="NextPage()" id="LinkLb" class="SwitchForm">
<a href="javascript:void(0);">Lichaamsbouw</a>
</div>

<div onclick="PreComplete()" id="LinkVt" class="SwitchForm">
<a href="javascript:void(0);">Voltooien</a>
</div>

 

These three different div's makes an horizontal menu of a form.

The css part below:

 

.SwitchForm{
   border: black 1px solid;
   border-bottom: 0;
   margin: 0px;
   width: 200px;
   float: left;
   padding: 4px;
   position: relative;
}

#LinkPg{
   z-index: 3;
   background-color: #676767;
   text-align: center;
   height: 25px;
}
#LinkLb{
   z-index: 2;
   right: 50px;
   background-color: #1F1F1F;
   text-align: center;
   height: 20px;
   top: 5px;
}
#LinkVt{
   z-index: 1;
   right: 100px;
   background-color: #1F1F1F;
   text-align: center;
   height: 20px;
   top: 5px;
}

.SwitchForm a:link{
   color: white;
}
.SwitchForm a:visited{
   color: white;
}
.SwitchForm a:hover{
   color: white;
   text-decoration: underline;
}

.SwitchForm a:active{
   color: white;
}

 

Whenever someone clicks one of the three div's, JavaScript will make sure that other content will be visible, and the old content wil be hidden.

 

The JavaScript part for each div looks like this:

 

function NextPage() {
   var PersoonsGegevens = document.getElementById("TablePersoonsGegevens");
   var LinkPg = document.getElementById("LinkPg");
   var Lichaamsbouw = document.getElementById("TableLichaamsbouw");
   var LinkLb = document.getElementById("LinkLb");
   var PreComplete = document.getElementById("PreComplete");
   var LinkVt = document.getElementById("LinkVt");
   
   PersoonsGegevens.style.display = 'none';
   Lichaamsbouw.style.display = '';
   PreComplete.style.display = 'none';
   
   LinkPg.style.zIndex = '2';
   LinkLb.style.zIndex = '3';
   LinkVt.style.zIndex = '1';
   
   LinkPg.style.height = '20px';
   LinkLb.style.height = '25px';
   LinkVt.style.height = '20px';
   
   LinkPg.style.top = '5px';
   LinkLb.style.top = '0px';
   LinkVt.style.top = '5px';
   
   LinkPg.style.backgroundColor = '#1F1F1F';
   LinkLb.style.backgroundColor = '#676767';
   LinkVt.style.backgroundColor = '#1F1F1F';
}

 

This works in FF, but IE has some problems with the padding, or height.

 

Example below:

 

*link removed by request of poster*

 

Does anyone know how to make this ie-compatible?

Thanks!

 

 

 

[BoltZ]

Well sometimes having a depreciated script tag can attribute to IE not working.

 

if you use language in your script tag take it out and use this

<script type="text/javascript">

[FireDrake]

I had both <script language="javascript" type="text/javascript">, and deleted the language one. It didn't work though.

I always try to use validated HTML, so it shouldn't be something like that.

The Doctype is defined, so it can't be anything with that either.

 

Any other suggestions please?

[BoltZ]

Can you give me your link?

[FireDrake]

Can you give me your link?

 

It's at the bottom of my first post

 

EDIT:

I requested a mod to remove the link, so I'll send you a PM

[FireDrake]

Solved.

 

It's some solution I didn't want to use, but okay..

 

Changed code for the CSS:

 

.SwitchForm {
border: black 1px solid;
border-bottom: 0;
margin: 0px;
width: 200px;
float: left;
/*padding: 4px;*/
position: relative;
}

#LinkPg {
z-index: 3;
background-color: #676767;
text-align: center;
height: 25px;
_top: 5px;
}
#LinkLb {
z-index: 2;
right: 40px;
background-color: #1F1F1F;
text-align: center;
height: 20px;
top: 5px;
_top: 10px;
}
#LinkVt {
z-index: 1;
right: 80px;
background-color: #1F1F1F;
text-align: center;
height: 20px;
top: 5px;
_top: 10px;
}

.SwitchForm a:link {
color: white;
}
.SwitchForm a:visited {
color: white;
}
.SwitchForm a:hover {
color: white;
text-decoration: underline;
}

.SwitchForm a:active {
color: white;
}

 

Changed JavaScript part:

var PersoonsGegevens;
var LinkPg;
var Lichaamsbouw;
var LinkLb;
var TableComplete;
var LinkVt;
var ie = 0;
if (document.all){
ie = 1;
}

function NextPage() {
PersoonsGegevens = document.getElementById("TablePersoonsGegevens");
LinkPg = document.getElementById("LinkPg");
Lichaamsbouw = document.getElementById("TableLichaamsbouw");
LinkLb = document.getElementById("LinkLb");
TableComplete = document.getElementById("TableComplete");
LinkVt = document.getElementById("LinkVt");

PersoonsGegevens.style.display = 'none';
Lichaamsbouw.style.display = '';
TableComplete.style.display = 'none';

LinkPg.style.zIndex = '2';
LinkLb.style.zIndex = '3';
LinkVt.style.zIndex = '1';

LinkPg.style.height = '20px';
LinkLb.style.height = '25px';
LinkVt.style.height = '20px';

if (ie == 1){
	LinkPg.style.top = '10px';
	LinkLb.style.top = '5px';
	LinkVt.style.top = '10px';
}
else {
	LinkPg.style.top = '5px';
	LinkLb.style.top = '0px';
	LinkVt.style.top = '5px';
}

LinkPg.style.backgroundColor = '#1F1F1F';
LinkLb.style.backgroundColor = '#676767';
LinkVt.style.backgroundColor = '#1F1F1F';
}