Columns Collapsing in NN vs. IE

DJR999 · Mar 9, 2005

What can I do to force <td>'s to render to a desired width in NN (I have NN 6.2) For example, if I want a black vertical bar in a table - if I use

Code:

<td style={width:1px;background-color:black}></td>

this works fine in IE, but in NN it does not dispay it since there is nothing else in the td. If I put a character inside the <td> tags, then it displays a black bar, but it is wider than I want since it is the width of a character.

Similary, if I want to center a table in a <td> and I use something like:

Code:

<td style={width:150mm} align=center><table>.....</table></td>

This works fine in IE, it makes the column 150mm wide and centers the table in the middle of it. But in NN, it just collapses the column to the width of the table - the column is only as wide as the table is, no whitespace on either side. (except for what I have defined for padding) I've tried using min-width instead of width, but same result.

Thanks,

Doug

cLFlaVA · Mar 9, 2005

Code:

<td style=[red]"[/red]width: 1px; background-color: black;[red]"[/red]>

*cLFlaVA
----------------------------
[tt]the hand behind this pen relives a failure every day...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

Vragabond · Mar 9, 2005

Why use 1px wide columns with black background instead of 1px black border? There is a css property called [tt]empty-cells[/tt] which has values of hide|show which might be what you're looking for.

Regarding the centering. IE wrongly tries to center block level elements when align="center" (or text-align: center

is present. This is incorrect behaviour. Other browsers do it correctly and you can do it by adding css property [tt]margin: 0 auto;[/tt] to the block element you want centered.

DJR999 · Mar 9, 2005

Vragabond -

Thanks for the border vs. td tip - this is now working fine in both NN an IE. But centering the table using margin: 0 auto still doesn't work. The table is still all the way to the left of the <td> in NN. And if I remove the align=center property, it does that in IE as well. I've tried it in the CSS as well as putting it inline. Tried it in the <td> element as well as the <table> element (that I am trying to center) nested inside it. No luck though. Any other suggestions?

Thanks,

Doug

Vragabond · Mar 9, 2005

This works for me in IE6, Mozilla and Opera 7. To make it work in IE pre 6 version, keep the align.

Code:

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]


<table width="100%" border="1">
 <tr>
  <td>
   <table style="margin: 0 auto;" border="1">
    <tr>
      <td>Cell 1</td>
      <td>Cell 1</td>
      <td>Cell 1</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 1</td>
      <td>Cell 1</td>
    </tr>
   </table>
  </td>
 </tr>
</table>

DJR999 · Mar 9, 2005

Vragabond -

Thanks for the tips. Found a couple of things. First of all, I didn't have that <!DOCTYPE node in my page. Not sure what that does (I'm new at this) but I assume it makes it adhere to some HTML standards. When I took that out of your code, yours did the same thing mine did. (table went to the left of the cell) So I added it to mine, but it still didn't work. Turns out I had my width of 100% for the outer table defined in my style sheet and had it as width : "100%". I took the quotes off and now works. It centers fine in IE without the align=center property. Have to try it at home with NN (don't have it here). Thanks for your help though.

Doug

Vragabond · Mar 9, 2005

You're right in assuming the role of doctype. I use it instinctively in every page, because the presence of a complete and valid doctype enables the best cross-browser compatibility because it shifts the behaviour from quirks to standards mode. You might not see much difference in NN (beacuse it actually follows the standards on its own) but in IE6 the difference is huge. IE versions before 6 do not render in standards mode ever. Some people like to leave out the doctype because that way they can mutilate IE through incorrect code to perform tasks that are otherwise difficult to achieve.

You're again right in having most of the layout properties in the stylesheet. I left my example like that because of ease of typing. And you were right to correct your css syntax by removing the quotes around the value. You should always validate html and css to correct mistakes like that.

Regarding the align="center" property. You could keep it to support IE5 and IE5.5 for Windows, which struggle with the other (correct) kind of centering elements.

Last but not least, think if you need tables anyway. My example definitely did not call for the outer table and were it my page, I would never have used it. But since we were talking about tables, I did an example like that. Think about it -- is it tabular data (table is the correct solution) or is it a layout issue (divs and css solution is prefered).

DJR999 · Mar 9, 2005

Well actually I have 2 columns in the outer table. Basically a link bar taking up the left couple inches or so of the screen, and then the main pane that I was talking about that contained the table I am trying to center. So I set it up as a two column table. I'm sure there's a better way to do it, but I tried with DIV's and it wasn't working. Got the left column, then the main pain started below that column at the left edge of the screen, so I tried the table route, and it worked (save for these bugs I'm trying to work out)

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Columns Collapsing in NN vs. IE

DJR999

Programmer

cLFlaVA

Programmer

Vragabond

Programmer

DJR999

Programmer

Vragabond

Programmer

DJR999

Programmer

Vragabond

Programmer

DJR999

Programmer

Similar threads

Part and Inventory Search

Sponsor