Forum Moderators: open
The content on this page is displayed within the div. Unfortunately, some of the content is in a rather (horizontally) large table. If the user were to increase the font size, the table would not fit on the screen and the user would have to scroll horizontally.
In IE 5.5 (presumable 6 as well), the div increases in size with the content.
In Opera and Mozilla, the div remains the same size and the table falls over the edge. (I assume that since both Opera and Mozilla are doing it, this is the correct browser implementation...)
Is there any way to get around this problem?
With css?
With an iframe?
Thanks for any help!
Style the table.... ;)
Nick
It's a bit hard to picture but my guess would be that you should drop the div. What's it there for?
It just looks nice.
I am not a terribly artistic person, so I have to rely on minimalist stylings.
I know I could do it with a table, but I hate nesting tables.
I may just scrap the whole design if I can't get it to work.
Nick
I think this is a bug, but this seems to work around it for the most part (except that the right margin gets hosed).
Though not likely in your case, one fairly common problem some CSS newbies have with <div>'s is assigning a width declaration without including a unit identifier.
The following style will not allow text-wrap within the div because there is no unit identifier included:
div.no-wrap {
width:600;
}
/* text will break the right margin in the above incomplete style */
For unit values greater than zero, unit identifiers MUST be included.
div.wraps-text-nicely {
width:600px;
}
/* text will now wrap nicely! */
For unit values greater than zero, unit identifiers MUST be included
I'm going to be really picky here and say that it should read: "For unit values other than zero..." You can specify negative margins, for example, and there's a difference between -10em and -10px. Negative values are also important for relative positioning. (You can also specify negative percentages and rgb values for colours, but they get adjusted to zero.)
I would have gotten back to you all sooner, but it was a long weekend here in Ontario and so I went out to nature and whatnot.
What follows is the actual code for the div, if anyone still has any interest in playing around with it. I am going to scrap the layout I think.
<div style="background-color: #fff; border: #000000 1px solid; padding: 1%;">
(I tried using 'position: relative' to no effect.)
Besides putting width attributes on the div, can you style the table with width:95%; to force wrapping inside the table when the type doesn't fit?
If the user has large text, the table still has to increase in size to fit.
The real problem I guess is that one column is made up of e-mail addresses - some of which are very long, and don't wrap.
This issue is one of overflow, which is handled in the visual effects section [w3.org] of the CSS 2 specification. Unfortunately, support for CSS2 is spotty at best, even in the most compliant and standards-supporting of browsers.
Even if browser support for overflow were perfect, one would still have issues with this because the recommendation leaves the definition of the initial containing block up to the browsers and this has implications on, for instance, how to decide what the default width of a div should be.
The developers of Opera and Mozilla seem to have decided to make the width of the initial containing block the width of the viewport, and any large child elements should just overflow. The developers of Internet Explorer, on the other hand, seem to have decided that the width of the initial containing block should be as wide as the widest rendered element in the document.
So I don't think there is a good answer to this one.
