I have a page that works fine with IE8+ and most other browsers. But at one point i have problems with IE7.
This is what i have and it works fine in IE8 and most other browsers:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <div style="width:50%;height:200px;background:#f00;overflow:auto;"> <div style="margin:10px;"> <table style="width:100%;background:#0f0;"> <tr><td>A</td></tr> <tr><td>A</td></tr> <tr><td>A</td></tr> </table> </div> </div> <br/> <div style="width:50%;height:50px;background:#f00;"> </div>
It is used to fit a table into a div with a margin of 10 and scroll over the height of the table. the width should fill the div with margin 10.
But when the table gets higher than the div, IE7 seems to ignore the scrollbar for the width calculation, which results in a horizontal scrollbar.
Is there a way to fix this? So the width is div-width - scrollbar - margin? Thanks for any help.
I tried it on my IE7 and changed the container div style as follows:
It does not account for the margin before the scrollbar but maybe it helps you get there.
Does it work for you?