[WSG] 100% table in 775px div w/overflow:auto
Certainly modern browsers (Safari, Firefox, Mozilla) handle what I'm trying to do, but IE is mucking this up. I'd post a link but this is on an internal dev server... I have a div that is 775px wide and 300px tall with overflow:auto. Inside there is a table (for tabular type data) that is 100% wide. Modern browsers show this just right...a scroll bar at the right so users can scroll through the data. div style='width:775px:height:300px;overflow:auto;' table width='100%' cellpadding='0' cellspacing='0' border='0' trtdtabular data/td/tr /table /div IE gives me a scrollbar at the bottom and the width of the table does not reduce itself for the scrollbar at the right (which is the real problem). Is there a way to get by this (using css I mean)? IE also blows out the data so that even objects that are in the hidden range are active (like an onmouseover action for instance). Do I just toss in the towel trying to deal with the issue or is there anything that can somehow be done about this. Thanks, v ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] 100% table in 775px div w/overflow:auto
IE always messes up 100% width, it doesn't subtract the padding/margin/border of the parent element from the parent elements width, it just uses the exact value of the parent elements width. Perhaps you should be using exact widths instead? On 5/26/05, Vaska. WSG [EMAIL PROTECTED] wrote: Certainly modern browsers (Safari, Firefox, Mozilla) handle what I'm trying to do, but IE is mucking this up. I'd post a link but this is on an internal dev server... I have a div that is 775px wide and 300px tall with overflow:auto. Inside there is a table (for tabular type data) that is 100% wide. Modern browsers show this just right...a scroll bar at the right so users can scroll through the data. div style='width:775px:height:300px;overflow:auto;' table width='100%' cellpadding='0' cellspacing='0' border='0' trtdtabular data/td/tr /table /div IE gives me a scrollbar at the bottom and the width of the table does not reduce itself for the scrollbar at the right (which is the real problem). Is there a way to get by this (using css I mean)? IE also blows out the data so that even objects that are in the hidden range are active (like an onmouseover action for instance). Do I just toss in the towel trying to deal with the issue or is there anything that can somehow be done about this. Thanks, v ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** -- Rowan Lewis (AKA. The Wolf) ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] 100% table in 775px div w/overflow:auto
Vaska.WSG div style='width:775px:height:300px;overflow:auto;' You have a typo after 775px, but more to the crux of the problem: table width='100%' cellpadding='0' cellspacing='0' border='0' In general, it's advisable not to mix CSS styling with width=... attributes, as it can mess things up. You may have to be very explicit with your styles (set margins and paddings explicitly to zero for the div and child table, for instance). You possibly need a little hack to feed IE a value that's slightly below 100%, to compensate for the scroll bar. (use an external stylesheet, or a proper style block in the document's head, rather than the style attribute for this) But more generally, depending on the type of data you have in your table, you may even get away with *not* specifying a width for it at all. If there's enough tabular content on each row, it will automatically fill the div nicely. So try and simply drop the width attribute, and see if that works out for you. Patrick Patrick H. Lauke Webmaster / University of Salford http://www.salford.ac.uk ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] 100% table in 775px div w/overflow:auto
Patrick, I'm sure that was just a quick example to show us what the
problem was, no need to be picky :)
Anyhow, when I come across problems like this with IE, I tend to use
something like this:
table {
width : 100% !important;
width : 95%;
}
All the good browsers use 100% width, and all the bad (IE) use 95% as
they don't understand the meaning of importance :)
On 5/26/05, Patrick Lauke [EMAIL PROTECTED] wrote:
Vaska.WSG
div style='width:775px:height:300px;overflow:auto;'
You have a typo after 775px, but more to the crux of the problem:
table width='100%' cellpadding='0' cellspacing='0' border='0'
In general, it's advisable not to mix CSS styling with width=... attributes,
as it can mess things up.
You may have to be very explicit with your styles (set margins and paddings
explicitly to zero for the div and child table, for instance).
You possibly need a little hack to feed IE a value that's slightly below 100%,
to compensate for the scroll bar. (use an external stylesheet, or a proper
style block in the document's head, rather than the style attribute for this)
But more generally, depending on the type of data you have in your table, you
may even get away with *not* specifying a width for it at all. If there's
enough
tabular content on each row, it will automatically fill the div nicely. So try
and simply drop the width attribute, and see if that works out for you.
Patrick
Patrick H. Lauke
Webmaster / University of Salford
http://www.salford.ac.uk
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
--
Rowan Lewis (AKA. The Wolf)
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] 100% table in 775px div w/overflow:auto
Yeah, the typo was from a fast typist... ;)
I think Rowan's solution will just have to do. I do make a point to
specify to users that it's highly recommended they use a 'modern'
browser - complete with a link to Firefox. So, I think that will just
have to cover this problem well enough...
Thanks for the tip...v
On May 26, 2005, at 11:55 AM, Rowan Lewis wrote:
Patrick, I'm sure that was just a quick example to show us what the
problem was, no need to be picky :)
Anyhow, when I come across problems like this with IE, I tend to use
something like this:
table {
width : 100% !important;
width : 95%;
}
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
