Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2006
    Posts
    42
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS: Uneven Vertical Alignment in Table Row

    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?

    Code:
    <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>
    Code:
    #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;
    }
    Last edited by aspekt9; 11-25-2011 at 10:03 PM.

  • #2
    New Coder
    Join Date
    Dec 2006
    Posts
    42
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •