PDA

Click to See Complete Forum and Search --> : Error in IE6 with 100% width Table inside a div

Migrate
11-17-2004, 08:46 AM
Good afternoon!
I'm trying to create a table inside a div that so it occupies all div width and scrolls vertically when it's height is greater than the div's height. This work fine in Mozilla Firefox but in IE6 a horizontal scroll appears and the table width is larger than the div's width.
I saw that if I change the doc type from strict mode to loose (transitional) mode the problem is solved, but I need to maintain the doctype in strict mode because because other parts of the page need it.
Can anyone help me?

Here is the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Table</title>
<style>

* {
margin: 0px;
padding: 0px;
}

html,body {

width: 100%;
height: 100%;

}
#left {

width: 200px;
height: 300px;
float: left;
border: 1px dashed Black;
}

#center {

width: 500px;
height: 300px;
float: left;
overflow: auto;
}

#center table {
width: 100%;
}

</style>
</head>
<body>

<div id="left">
<br>
<br>
<h3>Navigation</h3>
<br>
<br>
<br>
</div>

<div id="center">

<table>
<thead><th>H1</th><th>H2</th><th>H3</th><th>H4</th><th>H5</th><th>H6</th><th>H7</th></thead>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
</tbody>
</table>

</div>

</body>
</html>



Thanks in advance,
Migrate
LeeU
11-17-2004, 10:20 AM
I am a little confused here. I tried it both ways (strict and transitional) and it looks the same except there is a vertical bar in Firefox. It doesn't stretch across the page in either browser. The font is smaller in IE6 also.

What is it on the page that requires the strict mode?

Lee
Migrate
11-17-2004, 10:57 AM
Hello again.

Lee, I changed the doctype in IE6 and not in Mozilla. Do you see the same result in IE6 and Mozilla?

To ilustrate better what my problem is I will attach what I see in IE6.

As you can see in the attached file an extra horizontal toolbar appears although I set table width to 100%.

To be honest I want the strict mode because I have some javascript in the page, so elements in it can be expanded or contracted depending on the browser size and monitor resolution. I don't want to have to change the code all over again "just" because I need to change the doctype.

Best Regards,
Migrate
LeeU
11-17-2004, 11:05 AM
Now I understand. I see the vertical bar in Firefox, but not in IE6 when I am using 1024 x 768. However, I do see it like you do in 800 x 600.

Lee
toicontien
11-17-2004, 02:44 PM
It appears to be a combination of things in IE.

1) The DIV isn't tall enough to display the whole table and scroll bars are needed.

2) When scroll bars are placed on screen, IE seems to be placing vertical scroll bars and horizontal scroll bars. If you set the DIV height to 600 pixels, the scroll bars disappear.

Then, just for the heck of it, I added cellspacing="0" to the table tag and the scroll bars disappeared with your existing CSS. I took the attribute out and added

#center td,
#center th { margin: 0; }

in CSS and the scroll bars reappeared. Looks like IE places cell spacing on table cells that's not controllable with CSS, or at least you can't set the cell spacing to 0 using margins. Add cellspacing="0" to the table tag to fix this. Below is the code that I used. I corrected a few errors like unclosed BR tags (minor) and added a set of TR tags to encase your table header cells.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Table</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
<!--
* {
margin: 0px;
padding: 0px;
}

html,body {

width: 100%;
height: 100%;

}

#left {

width: 200px;
height: 300px;
float: left;
border: 1px dashed Black;
}

#center {

width: 500px;
height: 300px;
float: left;
overflow: auto;
}

#center table {
width: 100%;
}

#center td,
#center th { margin: 0; }
-->
</style>
</head>
<body>

<div id="left">
<br />
<br />
<h3>Navigation</h3>
<br />
<br />
<br />
</div>

<div id="center">

<table cellspacing="0">
<thead>
<tr>
<th>H1</th><th>H2</th><th>H3</th><th>H4</th><th>H5</th><th>H6</th><th>H7</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
</tbody>
</table>

</div>

</body>
</html>
Migrate
11-17-2004, 02:58 PM
Hello toicontien!
Thanks for the anwser, but that doesn't resolve my problem because if you add more rows to the div the problem reappears.
I want the div to have a fixed height and to scroll vertical if the table has more rows.

Best Regards,
Migrate
toicontien
11-17-2004, 05:59 PM
The problem is that the vertical scroll bars take up width inside the DIV. That shrinks the content width of the DIV and causes horizontal scroll bars to appear. The only answer is to make the table narrower than the DIV to accomodate the scroll bars, should they appear.

Most browsers seem to recalculate the table width when the scroll bars appear. IE doesn't seem to. That's the issue we're dealing with.
Migrate
11-18-2004, 04:34 AM
Hello toicontien!
You're right. That is the problem.

Do you know how to make the table just narrower than the DIV (even if the DIV has a relative width - like 60%) so the horizontall scroll bar doesn't appear in IE6?

Best Regards,
Migrate
toicontien
11-18-2004, 10:17 AM
#center table {
width: 90%;
}

Something to that effect. Without the use of javascript, you can't get the browser to recalculate the table width.