A strange DIV alignment issue on IE7 and IE8

HTML & CSS
1

Hi guys I am new to this forum and this is my first post. My background is development but I’m familiar with CSS, HTML etc.

Currently I am having an issue with alignment of a DIV on web page. On IE8 it seems to display fine, but on IE7 it doesn’t. The code is below. The red line (div) should be in the same place when it viewed from IE7 and IE8 (I’m not taking into account other browsers such as Chrome, Firefox, Safari etc).

I really can’t think what the issue could be, I mean the code below is the page massively stripped down to its basics.

Note: The DIV has to be positioned absolute as it tells the current time of day.

Im running this page on IE7 on Windows XP SP3 and Windows 7 Enterpise SP1, not sure if that makes a difference.

Can anyone advise me on this or give me an example to get this to work correctly.

<html>
<head>
<title>test</title>

&lt;style type="text/css"&gt;

.diaryTimeLine 
{
    position:absolute;/*margin-left: -28px;*/
    left:600px; //313
    top:0px;
    height:426px;
    background-color: Red;
    width: 1px;
}
&lt;/style&gt;

</head>
<body style=“margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px”>
<div class=“diaryTimeLine” id=“timeline”> </div>
<table width=“100%” cellspacing=“1” border=“1” >
<tr>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td >21</td>
<td>22</td>
<td>23</td>
</tr>
</table>
</body>
</html>

2

Hi huggy54. Welcome to SitePoint. :slight_smile:

That vertical line at the moment is placed absolutely, 600px from the left of the browser window, so it appears the same in IE7 and 8. It may appear to be in a different position in relation to the other elements from browser to browser if one browser window is open wider than another. Where do you actually want the line to appear?

3

I have a stupid question: Does your document have a doctype on it? You’re example does not. Hello quirks mode.

That said, tables are NOT predictable on size or alignment cross browser, and being you only seem to have a single list of them shouldn’t that be a list with floats?

I think to say much more we’d really have to see it live on a page and/or what it is you’re trying to do… this snippet leaves more questions than answers…

Especially since the 100% width table is going to be different at every resolution, while you’re declaring the DIV’s position in PX.

Though you know, I’d consider putting a background-image on the table, pad the top of the table or the TD, and slide the background-image instead of using a separate div… kind of like what I did with starred ratings for another user… one of the few times using the STYLE attribute is justified.

4