...

View Full Version : CSS: Uneven Vertical Alignment in Table Row



aspekt9
11-25-2011, 10:54 PM
So I have a calendar that I created in PHP and I'm displaying it in a table and I'm having trouble aligning the title and the two image arrows that go on either side of it. I'm trying to align everything vertically in the middle of the row and it seems that in Firefox, the Title is lower than the two arrows, but in Chrome and IE it seems to be right in the middle where it should. How do I solve this?


<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="cal_left_arrow">
<img src="/images/left_arrow2.jpg" width="9px" height="13px" onClick="displayCalendar(<?php echo $prevYear; ?>, <?php echo $prevMonth; ?>);" />
</td>
<td class="cal_title" colspan="5" valign="middle">
<?php echo date('F', mktime(0,0,0,$month,1,$year)).'&nbsp;&nbsp;&nbsp;'.$year; ?>
</td>
<td class="cal_right_arrow">
<img src="/images/right_arrow2.jpg" width="9px" height="13px" onClick="displayCalendar(<?php echo $nextYear; ?>, <?php echo $nextMonth; ?>);" />
</td>
</tr>



#event_calendar {
margin-top:50px;
margin-bottom:20px;
float:left;
height:auto;
width:245px;
}

.calHeaderDays {
font: bold 10px Arial, Helvetica, sans-serif;
background-color: #3F4C6B;
text-align:center;
height: 20px;
width:245px;
color: white;
overflow:visible;
/*border: 1px solid #3F4C6B;*/
}



.cal_title {
text-align: center;
font: bold 16px Arial, Helvetica, sans-serif;
color: #C79810;
height:40px;
vertical-align:middle;
}

.cal_left_arrow {
text-align:right;
height:40px;
vertical-align:middle;
}

.cal_right_arrow {
text-align:left;
height:40px;
vertical-align:middle;
}

table {
width: 245px;
font-family: Arial, Helvetica, sans-serif;
background-color: white;
border-collapse: collapse;
}

table img {
cursor: pointer;
cursor: hand;
}

.calToday {
height: 28px;
vertical-align: middle;
background-color: #3F4C6B;
color: #fff;
font-weight:bold;
text-align:center;
font-size: 10px;
}

.slDay {
height: 28px;
font-size: 10px;
width: 14%;
font-family: Arial, Helvetica, sans-serif;
vertical-align: middle;
text-align:center;
}

aspekt9
11-26-2011, 04:59 PM
When I change the vertical alignment to bottom, I can see that it's not resting completely flat on the bottom of the <td> cell. It seems firefox is adding padding or margin somewhere?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum