Forum Moderators: not2easy
However, the table hanging out of the "template" is not. You'll never know the width as it varies. I have two monitors here; in the below code if I "stretch" the window wide enough to encompass the table, the main div will enclose it, but if not, it just goes 100% of viewport and the table hangs out. Ugly.
Is there a solution here? I've never really looked at it and couldn't locate a positive solution via searches. I'm aware nowrap is deprecated, but used to exemplify.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
#main { margin:auto; border: 2px solid #000000; }
</style>
</head>
<body>
<div id="main">
<table border="1">
<tr>
<td nowrap>Valid table data</td>
<td nowrap>Valid table data</td>
<td nowrap>Valid table data</td>
<td nowrap>Valid table data</td>
<td nowrap>Valid table data</td>
<td nowrap>Valid table data</td>
<td nowrap>Valid table data</td>
<td nowrap>Valid table data</td>
<td nowrap>Valid table data</td>
<td nowrap>Valid table data</td>
<td nowrap>Valid table data</td>
<td nowrap>Valid table data</td>
<td nowrap>Valid table data</td>
<td nowrap>Valid table data</td>
<td nowrap>Valid table data</td>
<td nowrap>Valid table data</td>
</tr>
</table>
</div>
</body>
</html>
Easiest solution is to tell your main div to display like a table, so it stretches to hold it's content, like a table.. however IE doesn't play ball with that
an 'inline-block' will also do it but IE needs a wee bit of help applying inline-block to a block level element at least in 6&7, I think 8's OK now
so:
#main {display: inline-block;}
#main {display: inline;}
#main {display: table;}
In that order, and in separate rules, should probably work, that should also work going forward with IE8 too as it supports
display: table;or you could put the first two rules (still separate) into a LTE7 conditionally commented sheet
disclaimer: not fully tested so let us now if it's stable in IE6 & 7 for you
Did you play with overflow-x on a wrapper around your huge table?
Not until . . . just now. :-) You mean "main" in the example? auto and scroll scrolls like an iframe, hidden . . well . . . you know. Visible does the same thing, table hangs out of the box (note the doctype, it may be that.)
Good to see you around Suzy. Yes, that worked - so I get my head around it, the ordering of those selectors is "overwritten" from top to bottom so any flailing browsers will ignore the unsupported ones, correct? (As close to a hack as I want to get. :-) )
or you could put the first two rules (still separate) into a LTE7 conditionally commented sheet
Not if I can help it I won't. :-)
I'll get it on my IE6 machine later today, thank you both! This only ever occurs in logged - in admin areas where a "spreadsheet" display is required, but still it's always bugged me.
Good to see you around Suzy. Yes, that worked - so I get my head around it, the ordering of those selectors is "overwritten" from top to bottom so any flailing browsers will ignore the unsupported ones, correct? (As close to a hack as I want to get. :-) )
Thanks & basically yes it's a cascade workaround, IE6&7 just ignore the 3rd rule as they don't understand it, the good browsers overwrite the first two rules with the last as per rules of the cascade
the first two rules *should* only need to be one - display: inline-block; IE supports inline-block and always has done, *but* it only does it naturally, on inline elements - it needs the first two rules in that order as a kind of tripswitch to apply the property to block elements (in this case your div). Putting the first two rules in the same ruleset doesn't flip the switch though which is why I suggest keeping them all separate.
Keeping them all separate should also work to point out that it's a workaround, especially if you comment them.. anyway in all it should be perfectly safe to use in the main admin stylesheet.
The only point to note which won't matter if it's conditional or not is that IE8 will also now use display:table; and I'm not 100% up on if IE8 has got over it's buggy support of display: table yet, or even if the problems it had (wrongly inheriting other styles) would even be an issue in this simple use case - I would imagine it has been fixed or at least will be before it becomes an issue to worry about..
Not if I can help it I won't. :-)
