Table borderline alignment problem...

[HHawk]

For some odd reason, I cannot get the lines perfect inside my order form. While it looks perfect in Internet Explorer 7, Mozilla Firefox ruins it for some reason. It's not a life threatening situation, but I want it to look perfect.

 

Take a look at the following 2 screenshots.

 

http://www.mvdl.info/csshelp/ie7.jpg

 

Look at the lines next to the red line and you will notice it lines up beneath each other perfectly.

 

http://www.mvdl.info/csshelp/firefox.jpg

 

As you can see, in Firefox it does not align perfectly.

 

Changing the size of the box e.g. with 1 px ruins it for both browsers. So I am pretty clueless on what to do here.

 

Here is the CSS code which is used for the form, or at least the part which is relevant.

 

.slabeltop { 
font: 10px Verdana, Geneva, Arial, Helvetica, sans-serif; 
color: #3670A7;
background-color: #F2F7FB; 
text-align: center; 
margin-right: 5px; 
padding-right: 5px;
height: 25px;
}

.slabelcell { 
font: 10px Verdana, Geneva, Arial, Helvetica, sans-serif; 
color: #3670A7; 
background-color: transparent; 
width: 100px; 
} 

.sfieldcell { 
font: 10px Verdana, Geneva, Arial, Helvetica, sans-serif; 
color: #3670A7;
background-color: #F2F7FB; 
text-align: right; 
margin-right: 5px; 
padding-right: 5px;
width: 360px;
height: 30px;
}

.sradiocell { 
font: 10px Verdana, Geneva, Arial, Helvetica, sans-serif; 
color: #3670A7;
background-color: #F2F7FB; 
text-align: right; 
margin-right: 5px; 
padding-right: 5px;
width: 20px;
height: 30px;
}

.sqmcell { 
font: 10px Verdana, Geneva, Arial, Helvetica, sans-serif; 
color: #3670A7; 
background-color: transparent;
text-align: center; 
width: 20px; 
}

.dlabelcell { 
font: 10px Verdana, Geneva, Arial, Helvetica, sans-serif; 
color: #3670A7; 
background-color: transparent; 
width: 100px; 
} 

.dfieldcell { 
font: 10px Verdana, Geneva, Arial, Helvetica, sans-serif; 
color: #3670A7;
background-color: #F2F7FB; 
text-align: right; 
margin-right: 5px; 
padding-right: 5px;
width: 381px;
height: 30px;
}

.dfieldcell input { 
width: 175px; 
font: 10px Verdana, Geneva, Arial, Helvetica, sans-serif; 
background-color: #D7E5F2; 
color: #102132; 
border: 1px solid #284279; 
margin-right: 5px;
text-align: right;  
}

.dfieldcell select { 
font: 10px Verdana, Geneva, Arial, Helvetica, sans-serif; 
background-color: #D7E5F2; 
color: #102132; 
border: 1px solid #284279;
margin-right: 5px; 
padding-right: 0px; 
}

.d2fieldcell { 
font: 10px Verdana, Geneva, Arial, Helvetica, sans-serif; 
color: #3670A7;
background-color: #F2F7FB; 
text-align: right; 
margin-right: 5px; 
padding-right: 5px;
width: 381px;
height: 30px;
}

.dqmcell { 
font: 10px Verdana, Geneva, Arial, Helvetica, sans-serif; 
color: #3670A7; 
background-color: transparent;
text-align: center; 
width: 20px; 
}

 

.s is for the top 2 boxes .d is for the last box...

 

Hope anyone has the solution for me, cause this is driving me nuts. :S

[mainewoods]

when you do things like this:

padding-right: 5px;
width: 360px;

that 'activates' the ie box model problem.  The problem is that when you specify a width attribute, ie will use the content area + padding + borders to total the width, whereas ff will just use the contents. 

 

However, it looks like the width of the left column on the first 2 boxes is determined by the content in those columns: 'Gekozen server'.  Since the content in the 3rd box is shorter, it would use your actual css setting instead. 

[HHawk]

Ah okay, thanks. I will look into it.