[css-d] Table extending past 100% of browser window width
hello, I am having problems with tables that are too wide for a browser window. The client has existing html code that they cannot change in the near future and so I have to work with whats already there, and whats there is very very ugly. Here is the example: http://www.un-identified.com/ipa/example.html The containing div doesnt wrap around the whole table in both FF2 and IE7. Been banging my head on this all day. Hopefully someone can help. Note: There are validation errors, but I dont think they are critical. They are there mainly because someone who didn't know much about html coded this whole application and I purposefully kept those errors in there, because i want to be able just apply this design right over what they already have and fix the code as I go. Thanks, Parag __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Table extending past 100% of browser window width
Does anyone have any ideas? I have scoured the internet for a solution and the only one I found close to helping me is this: http://blog.gilluminate.com/2005/10/12/large-tables-inside-of-css-two-column-layout-causes-problems Applying the solutions means adding more scroll bars. I would definitely like to avoid more scroll bars as having even two or three similar tables would make the page very confusing. You COULD add just one div for the whole page and scroll it, but I wouldn't want to try to find where that div would fit best for every page. Thanks, Parag __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Table extending past 100% of browser window width
Philippe,
I tried what you suggested:
I added float:left; to
div#mainContainer{
float:left;
position:relative;
text-align:left;
min-width:800px;
height:100%;
}
In FF, it seemed to work, but it didnt extend all the way to contain the
whole table.
For IE7, the content area jumped underneath the left menu area so it didnt
help at all.
I think the hardest part about this problem is that the browsers are doing
what they are supposed to and there is no way to change the table sizes, so
I think I am stuck with it.
The good news is that yesterday I was able to make the basic background
image repeat in the body section so that there is no abrupt change in
colors, so even if the table jumps outside the legal area of the browser,
the user will never notice but will see a scroll bar. The only thing that
now looks ugly are the footer and (of course) the scroll bars, which I can't
help. Since you can only make one background image repeat in the body
section and the footer always changes vertical position, I cant make the
footer a background image. So now the footer always ends pretty much where
it used to and doesnt look correct.
Parag
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Table extending past 100% of browser window width
On Jul 25, 2007, at 4:42 AM, Parag Jagdale wrote:
> am having problems with tables that are too wide for a browser
> window.
> The client has existing html code that they cannot change in the
> near future
> and so I have to work with whats already there,
> and whats there is very very ugly.
>
> Here is the example: http://www.un-identified.com/ipa/example.html
>
> The containing div doesnt wrap around the whole table in both FF2
> and IE7.
IE 6 is saved by its own stupidity here.
Other browsers do what the specs say, and in this case it has an
unfortunately side effect...
I suppose you want the both the blue band and the white box
containing the table to extend to the right when the table is very
large.
A solution could be: wrap the whole page (including the footer,
depending on the styling you want there) in a div, and float that div
(div {float:left}). Do _not_ set a width on that div. But you might
need to set a min-width:100% to make sure it fills the viewport when
there is little content (avoiding shrink-wrapping).
(warning: untested, but should work well in most modern browsers.
please report back :-))
Philippe
---
Philippe Wittenbergh
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
