Forum Moderators: not2easy
Here's my problem. I need a table with all widths being based on percentages and the <th> cells need to be active links for sorting data.
I have a 100% width table and I need the content within the <th> to be a link. I also want the entire cell to be the active link so I have to specify the <th> width to be 100%. The problem is that I have a specified padding for the <th><a> which throws off the borders of the table - borders start disappearing due to overlap or something.
So the problem is I can't specify a fixed width for the table or <th>s to apply any kind of boxmodel hack that is being caused by the padding. But I also have to have the <th> width specified as 100% to make the entire cell be an active link.
One other requirement, no javascript. Suggestions?
Here's the good news ... I developing for an intranet so I only have to worry about IE6+.
Here's the good news...if you absolutely have to, you can kick IE into Quirks mode and be working with the quirky box model which has no problems with width and padding on the same element. Since you know you don't have to worry about other browsers, this may be a situation (possibly the only one I would suggest this for) in which standards mode could safely be ignored. Unless, that is, there is a danger of your intranet ever upgrading to Firefox or some other standards compliant browser that doesn't apply the quirky box model in quirks mode.
Of course, we can probably get you straightened out in Standards Mode, anyway.
so I have to specify the <th> width to be 100%
Tables are admittedly my weak area, so I'm not 100% sure how <th> tags interact with CSS, but off hand I can tell you that you don't need to specify an <a>nchor's width to 100% in order to make it fill a container. If you set it to display:block, it will automatically fill the container (note you MAY need to set it's line-height equal to the height of the cell, but an explicit width should not be necessary). There's always the chance that this works differently with table cells, but I don't believe it does. This would allow you to set the padding without having to worry about box model issues.
cEM
Thx for the response, I should have mentioned this but I already have the display:block; specified. When I remove the width:100%; only the first column works properly. All the others don't take on the block properties - leaving only the text as an active link.
All the examples I have found online are for left navs that have a specified width - allowing the box model hack. Everything else is for CSS lists which are great but not for what I need.
you don't need to specify an <a>nchor's width to 100% in order to make it fill a container.
sorry to be the bearer of bad news, I know you shouldn't have to declare a width, but you do sometimes (most times if you want to work with IE!).. ~ well maybe not a width, but any dimension, height or width should do ~ due to layout "bugs" display: block; is not enough in it's own right to make it happen.. IE(6) especially, see this thread..IE needs that dimension [webmasterworld.com] (or a layout hack of sorts)
so I only have to worry about IE6+.
To answer your intranet question.. if you're working with IE and tables then you may have certain "advantages" to help fix this situation. Code the tables and then make the links within the cells display: block; with a height: 1%; , due to IE's treatment of height as min-height this should then expand to fill the cell correctly without being affected by any padding you have declared on the link..
Just remember that any time IE needs dimension, because of a layout problem, linked above, then you can hack one in or use IE's own nuances to fool it into thinking it's dimensioned.. More compliant browsers would then need the correct CSS but because you're on an IE only intranet you don't actually have to worry about them just know it can done properly for them too if need be ;)
Suzy
