jakeoh Posted November 6, 2007 Share Posted November 6, 2007 Hi, No idea what I'm doing wrong, but look at this calendar: http://www.shlak.ca/test_calendar.htm (There are broken links and functions, since I only pasted the relevant code on the test page) Can anyone explain why the name of the month in the header is not centered when using IE7? It works fine with FF and IE6. <html> <head> <title>Test Calendar</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> .calendar { /** configure the width **/ width:510px; background-color: #ffffe3; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; margin:0px; padding:0px; text-align:center; } /*Jours de la semaine*/ .calendar th { background-color: #4f6621; color: #ffffe3; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; text-align:center; width: 58px; height: 19px; padding: 4px; } .calendar .day_box { background-color: #ddddbd; color: #35490b; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; /*border: 1px solid #000000;*/ text-align:left; width: 62px; height: 62px; padding: 4px; background-image: url(Images/calendar_box.gif); } .calendar .header { background-color: #ffffe3; font-weight: bold; height: 24px; color: #35490b; text-align: center; } .calendar .footer { background-color: #4f6621; font-weight: bold; font-size:10px; color: #ffffe3; width:100%; } .calendar td { width: 22px; height: 20px; text-align: center; font-size:0.9em; /*padding: 1px;*/ } .calendar .today { background-color: #FAD2DA; color: #35490b; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; text-align:left; width: 62px; height: 62px; padding: 4px; background-image: url(Images/calendar_today.gif); } .calendar .link { background-color: #D4C9EF; color: #35490b; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; text-align:left; width: 62px; height: 62px; padding: 4px; background-image: url(Images/calendar_birthday.gif); } .calendar .birthday { float:right; font-size: 8px; } .calendar a, .calendar a:link, .calendar a:hover { font-weight: bold; text-decoration: underline; color: #000000; } .calendar a.headerNav, .calendar a:link.headerNav, .calendar a:hover.headerNav { background-color: #ffffe3; color: #35490b; } .calendar a.footerNav, .calendar a:link.footerNav, .calendar a:hover.footerNav { width: 100%; background-color: #4f6621; color: #ffffe3; } </style> </head> <body> <div id='quickCalender'><table cellspacing='0' cellpadding='0' class='calendar'> <tr> <th class='header'> <a href="javascript:;" onclick="displayQCalendar('11','2006')" class='headerNav' title='Prev Year'><<</a></th> <th class='header'> <a href="javascript:;" onclick="displayQCalendar('10','2007')" class='headerNav' title='Prev Month'><</a></th> <th colspan='3' class='header' >Nov 2007</th> <th class='header'><a href="javascript:;" onclick="displayQCalendar('12','2007')" class='headerNav' title='Next Month'>></a> </th> <th class='header'> <a href="javascript:;" onclick="displayQCalendar('11','2008')" class='headerNav' title='Next Year'>>></a></th> </tr><tr><th>Dim</th><th>Lun</th><th>Mar</th><th>Mer</th><th>Jeu</th><th>Ven</th><th>Sam</th></tr><tr><td><div class='day_box'></div></td><td><div class='day_box'></div></td><td><div class='day_box'></div></td><td><div class='day_box'></div></td><td><div class='link'>1<br><a href='userinfo.php?user=Parara\'><img class='birthday' src='Images/cake.gif' width='39' height='35' border='0' title='Anniversaire de Parara!!!'></a></div></td><td><div class='link'>2<br><a href='userinfo.php?user=Robbie\'><img class='birthday' src='Images/cake.gif' width='39' height='35' border='0' title='Anniversaire de Robbie!!!'></a></div></td><td><div class='day_box'>3</div></td></tr><tr><td><div class='day_box'>4</div></td><td><div class='link'>5<br><a href='userinfo.php?user=Jokolito\'><img class='birthday' src='Images/cake.gif' width='39' height='35' border='0' title='Anniversaire de Jokolito!!!'></a></div></td><td><div class='today'>6</div></td><td><div class='day_box'>7</div></td><td><div class='day_box'>8</div></td><td><div class='day_box'>9</div></td><td><div class='day_box'>10</div></td></tr><tr><td><div class='day_box'>11</div></td><td><div class='day_box'>12</div></td><td><div class='day_box'>13</div></td><td><div class='day_box'>14</div></td><td><div class='day_box'>15</div></td><td><div class='day_box'>16</div></td><td><div class='link'>17<br><a href='userinfo.php?user=papou\'><img class='birthday' src='Images/cake.gif' width='39' height='35' border='0' title='Anniversaire de papou!!!'></a></div></td></tr><tr><td><div class='day_box'>18</div></td><td><div class='day_box'>19</div></td><td><div class='day_box'>20</div></td><td><div class='day_box'>21</div></td><td><div class='day_box'>22</div></td><td><div class='day_box'>23</div></td><td><div class='day_box'>24</div></td></tr><tr><td><div class='day_box'>25</div></td><td><div class='day_box'>26</div></td><td><div class='day_box'>27</div></td><td><div class='link'>28<br><a href='userinfo.php?user=Patouille\'><img class='birthday' src='Images/cake.gif' width='39' height='35' border='0' title='Anniversaire de Patouille!!!'></a></div></td><td><div class='link'>29<br><a href='userinfo.php?user=ggrasdur\'><img class='birthday' src='Images/cake.gif' width='39' height='35' border='0' title='Anniversaire de ggrasdur!!!'></a></div></td><td><div class='day_box'>30</div></td><td><div class='day_box'></div></td></tr><tr><td colspan='7' class='footer'><a href="javascript:;" onclick="displayQCalendar('11','2007')" class='footerNav'>Nous sommes aujourd'hui le 6 Nov 2007</a></td></tr></table></div></div> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/76218-solved-problem-with-cell-alignment-in-ie7-only/ Share on other sites More sharing options...
sKunKbad Posted November 6, 2007 Share Posted November 6, 2007 try #quickCalendar tr th { text-align:center; } by the way, where are your table tags? Quote Link to comment https://forums.phpfreaks.com/topic/76218-solved-problem-with-cell-alignment-in-ie7-only/#findComment-385832 Share on other sites More sharing options...
jakeoh Posted November 6, 2007 Author Share Posted November 6, 2007 Doesn't seem to work... it looks like IE7 effectively centers the month but forgets that it should center it at the center of the 3 merged cells (colspan='3')... It just centers it in the middle of the first column. Look at this new even simpler example: http://www.shlak.ca/test_table.htm This is caused by the "width:100;" attribute of the td. If I remove this line, it is centered OK. As I see it, FF and IE6 override this attribute when they see "colspan='3'", but not IE7. Now, how do I fix this? Quote Link to comment https://forums.phpfreaks.com/topic/76218-solved-problem-with-cell-alignment-in-ie7-only/#findComment-385852 Share on other sites More sharing options...
jakeoh Posted November 6, 2007 Author Share Posted November 6, 2007 This seems to work now: www.shlak.ca/test_table_2.htm Needed to create an additionnal style: <html> <head> <title>Test Table IE7</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> td { background-color: #4f6621; color: #ffffe3; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; text-align:center; width:100; } .overrideWidth{ width:300; } </style> </head> <body> <table border="1"> <tr> <td>Hello</td> <td colspan='3' class='overrideWidth'>Hello</td> <td>Hello</td> </tr> <tr> <td>Hello</td> <td>Hello</td> <td>Hello</td> <td>Hello</td> <td>Hello</td> </tr> </table> </body> </html> However it is still not centered perfectly in IE7. But at least it tries now. Quote Link to comment https://forums.phpfreaks.com/topic/76218-solved-problem-with-cell-alignment-in-ie7-only/#findComment-385867 Share on other sites More sharing options...
sKunKbad Posted November 6, 2007 Share Posted November 6, 2007 try giving each th a class and then apply your style through the stylesheet <th class="myTableHeader"> Quote Link to comment https://forums.phpfreaks.com/topic/76218-solved-problem-with-cell-alignment-in-ie7-only/#findComment-385993 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.