Jump to content

[SOLVED] Problem with cell alignment in IE7 only

jakeoh

By jakeoh
in CSS Help

 Share

Recommended Posts

jakeoh Member

jakeoh

Posted
Posted

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>

Link to comment
Share on other sites
jakeoh Member

jakeoh

Posted
  • Author
Posted

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?

Link to comment
Share on other sites
jakeoh Member

jakeoh

Posted
  • Author
Posted

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.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.