PDA

View Full Version : IE not taking notice of set widths



spa8ts
Apr 12th, 2007, 03:45 AM
I am working with a notice board sort of thing. I have a table with the cols set to certain widths that the notice information is displayed in. You are able to click on a notice subject which toggles a table that displays the notice content (tried to attach image but it's an intranet so i can't).

The problem is when i click on the notice subject to display the content, STUPID IE 7 ignores all widths and makes a right mess of it. FF is perfect yet again.



<tr bgcolor="#BBE2F9">
<td width="20px" class="tdPadding" align="center">&nbsp;</td>
<td width="270px" class="tdPadding" align="center">
<b><a href='index.php?sort=userNotes.noteSubject&order=ASC&limit=10&order=ASC' title="Sort Ascending or Descending">Note Subject</a></b> <img src="/smart-html/images/sortspacer.gif" title="Spacer" border='0' />
</td>
<td width="110px" class="tdPadding" align="center" width="110px"><b><a href='index.php?sort=userNotes.noteDate&order=ASC&limit=10&order=ASC' title="Sort Ascending or Descending">Last Modified</a></b> <img src="/smart-html/images/sortspacer.gif" title="Spacer" border='0' />
</td>
<td width="110px" class="tdPadding" align="center" bgcolor="#c0cbe7"><i><b><a href='index.php?sort=notesFolder.folderName&order=ASC&limit=10&order=ASC' title="Sorted ascending">Folder</a><img src='/smart-html/images/sortasc.gif' border="0" title="Sorted ascending"></b></i>
</td>
<td width="40px">&nbsp;</td>
</tr>

<tr bgcolor="#ebecf6">
<td class="tdPadding" align="center" width="20px">
<input type="checkbox" name="check" value="6" onclick="getchecks(document.notes);">
<input type="hidden" name="noteID" value="6">
</td>
<td width="270px" class="tdPadding"><a href="javascript:toggle('NotesContent6');">Winter Sports</a>
</td>

<td width="110px" class="tdPadding" align="center">12-04-2007</td>
<td width="110px" class="tdPadding" align="center">General</td>
<td class="tdPadding" align="center" width="40px"><img src="/smart-html/images/edit.gif" border="0" title="Modify Note" onclick="show('editNote'); show('en'); hide('addNote'); setnoteID('6'); setnoteSubject('Winter Sports'); setnoteContent('If you are in the winter exchange, please give your $5 for the bus to your coach before friday 10am. Please met at the rec centre at 2.30pm with all your gear'); setfolderID('2');"><a href="del_note.php?noteID=6&userID=sysadmin&sort=notesFolder.folderName&order=ASC"><img src="/smart-html/images/delete.gif" border="0" title="Delete Note" onclick="return confirm('Do you really want to delete this note titled\n `Winter Sports`?');"></a>
</td>
</tr>
<tr>
<td colspan="5">
<table id="NotesContent6" style="display:none" class="contenttd">
<tr align="left">
<td valign="top"><img src="/smart-html/images/arrow-bullet.gif" /></td>
<td width="100%" align="left">If you are in the winter exchange, please give your $5 for the bus to your coach before friday 10am. Please met at the rec centre at 2.30pm with all your gear</td>
</tr>
</table>
</td>
</tr>


Not sure if that helps. Even thought the style="display:none" for the id NotesContent6 thats for something else and doesn't seem to change anything if it gets commented out.

If anyone has had this problem before and found the perfect solution your help will be much appreciated.

Cheers

koyama
Apr 12th, 2007, 04:39 AM
I'm not sure we can blame IE in this case. I will have to dig into this to know for sure. The widths for cells are suggestive widths. When you start nesting tables it becomes more complicated what the final values should be.

You may have to put in a width attribute for your table elements to remove such ambiguity. See if this solves the problem.

I believe that one should really leave out the px unit in the width attribute. For example width="200" instead of width="200px". Moreover, it is not necessary to specify the width for the cells in each row. It should suffice to only do this for the first row.

Even better would probably be to separate content and presentation. You could instead specify table and alignment properties in a style sheet.

spa8ts
Apr 12th, 2007, 05:13 AM
Cheers for your reply,
removing px doesn't seem to make much difference. There is a table width set in the style, thats not a problem its just the width of the cells.

We almost have it working... a work in progress

Thanks

koyama
Apr 12th, 2007, 05:33 AM
removing px doesn't seem to make much difference. There is a table width set in the style, thats not a problem its just the width of the cells.

Since we only have a part of the code, it is not possible for us to reproduce the problem hence hard to tell what the problem is. A link would be preferable or at least a complete code example.

Maybe you could also tell us whether it is the JavaScript that is causing the problem or not. (Does it display the way that you want in IE when you remove display: none ?)