Hello,
I have an align problem with a template I made.
Basically, this template has 5 rows with 4 columns each one.
This part of the code:
Quote:
<table class="tabla01">
<tr>
<td class="tabla01_C01"><a name="Top" id="Top"></a></td>
<td class="tabla01_C02"></td>
<td class="tabla01_C03"><?php mosLoadModules ( 'top' ); ?></td>
<td class="tabla01_C04"><?php mosLoadModules ( 'user2' ); ?></td>
<td class="tabla01_C05"><?php mosLoadModules ( 'user3' ); ?></td>
</tr>
</table>
<table class="tabla02">
<tr>
<td class="tabla02_C01"></td>
<td class="tabla02_C02"><?php mosPathWay(); ?></td>
<td class="tabla02_C03"></td>
<td class="tabla02_C04"></td>
</tr>
</table>
<table class="tabla03">
<tr>
<td class="tabla03_C01"></td>
<td class="tabla03_C02"><?php mosMainBody(); ?></td>
<td align="center" valign="top" class="tabla03_C03"><?php mosLoadModules ( 'left' ); ?></td>
<td align="center" valign="top" class="tabla03_C04"><?php mosLoadModules ( 'right' ); ?></td>
</tr>
</table>
<table class="tabla04">
<tr>
<td class="tabla04_C01"></td>
<td align="right" class="tabla04_C02"><a href="#Top"><img src="<?php echo $mosConfig_live_site;?>/templates/sefip04/images/top.png" alt="Top" width="16" height="16"/></a></td>
<td class="tabla04_C03"></td>
<td class="tabla04_C04"></td>
</tr>
</table>
|
between the cell 3 and 4 of each row there is a border with 5px width.
As you can see on the code, in the cell 3 of some rows there are a php module.
The problem is the 5px border is not align with the cells that surrounded it.
For example, right now the border is align in the frontpage, but when I go to a different section/categorie/component the border of the cell 3 (row 2 and 4) is not align with the border of the cell 3, row 3.
This is the image:
where you can see the cell 3 and 4 of the rows 2 and 3.
I thought this was a problem with the width of some section/categorie/component. But even changing the actual width of the cell 3 (480px) the problem remains...
This is part of the css wich is responsable of the problem:
Quote:
table {
margin : 0px;
padding : 0px;
border-collapse : collapse;
}
td {
margin : 0px;
padding : 0px;
}
.tabla00 {
width: 900px;
height: 10px;
}
.tabla00_C01 {
}
.tabla01 {
width: 900px;
height: 120px;
margin: 0px;
padding: 0px;
}
.tabla01_C01 {
width: 120px;
background: #909090;
border-left: 5px solid #FFFFFF;
border-top: 5px solid #FFFFFF;
border-right: 5px solid #FFFFFF;
}
.tabla01_C02 {
width: 410px;
background: #909090;
padding-bottom: 3px;
padding-top: 5px;
border-top: 5px solid #FFFFFF;
border-right: 5px solid #FFFFFF;
/*border-left: 1px solid #FFFFFF;*/
}
.tabla01_C03 {
width: 123px;
background: #909090;
/*border-right: 5px solid #FFFFFF;*/
border-top: 5px solid #FFFFFF;
/*border-left: 1px solid #FFFFFF;*/
}
.tabla01_C04 {
width: 123px;
background: #909090;
/*border-right: 5px solid #FFFFFF;*/
border-top: 5px solid #FFFFFF;
/*border-left: 1px solid #FFFFFF;*/
}
.tabla01_C05 {
width: 124px;
background: #909090;
border-right: 5px solid #FFFFFF;
border-top: 5px solid #FFFFFF;
/*border-left: 1px solid #FFFFFF;*/
}
.tabla02 {
width: 900px;
height: 30px;
margin: 0px;
padding: 0px;
}
.tabla02_C01 {
width: 20px;
background: #FFB731;
border-left: 5px solid #FFFFFF;
border-top: 5px solid #FFFFFF;
}
.tabla02_C02 {
width: 480px;
background: #FFB731;
border-top: 5px solid #FFFFFF;
}
.tabla02_C03 {
width: 115px;
background: #FFB731;
border-top: 5px solid #FFFFFF;
border-right: 5px solid #FFFFFF;
}
.tabla02_C04 {
width: 285px;
background: #999900;
/*border-left: 5px solid #FFFFFF;*/
border-top: 5px solid #FFFFFF;
border-right: 5px solid #FFFFFF;
}
.tabla03 {
width: 900px;
margin: 0px;
padding: 0px;
}
.tabla03_C01 {
width: 20px;
border-left: 5px solid #FFFFFF;
background: #FFB731;
}
.tabla03_C02 {
width: 480px;
border: 1px solid #FFFFFF;
background: #EE9B00;
}
.tabla03_C03 {
width: 115px;
border-right: 5px solid #FFFFFF;
background: #FFB731;
}
.tabla03_C04 {
vertical-align: top;
width: 285px;
background: #999900;
/*border-left: 5px solid #FFFFFF;*/
border-right: 5px solid #FFFFFF;
}
.tabla04 {
width: 900px;
height: 30px;
margin: 0px;
padding: 0px;
}
.tabla04_C01 {
height: 30px;
width: 20px;
background: #FFB731;
border-left: 5px solid #FFFFFF;
}
.tabla04_C02 {
height: 30px;
width: 480px;
background: #FFB731;
}
.tabla04_C03 {
height: 30px;
width: 115px;
background: #FFB731;
border-right: 5px solid #FFFFFF;
}
.tabla04_C04 {
height: 30px;
width: 285px;
background: #999900;
border-right: 5px solid #FFFFFF;
/*border-left: 5px solid #FFFFFF;*/
}
.tabla05 {
width: 900px;
height: 50px;
margin: 0px;
padding: 0px;
}
.tabla05_C01 {
width: 20px;
background: #828282;
border-top: 5px solid #FFFFFF;
border-bottom: 5px solid #FFFFFF;
border-left: 5px solid #FFFFFF;
}
.tabla05_C02 {
width: 480px;
background: #828282;
border-top: 5px solid #FFFFFF;
border-bottom: 5px solid #FFFFFF;
}
.tabla05_C03 {
width: 115px;
background: #828282;
border-top: 5px solid #FFFFFF;
border-bottom: 5px solid #FFFFFF;
border-right: 5px solid #FFFFFF;
}
.tabla05_C04 {
width: 285px;
background: #909090;
border-bottom: 5px solid #FFFFFF;
border-left: 5px solid #FFFFFF;
border-right: 5px solid #FFFFFF;
border-top: 5px solid #FFFFFF;
}
.tabla06 {
width: 900px;
height: 10px;
}
.tabla06_C01 {
}
|
The problem is checked with IE6, Opera 8 and Firefox 1.0.3.
If you need it, send me a PM and I'll send you the entire template.
Thank you !
problem with border align 
Linear Mode
