Tech

techie_techie · Posted: Jul 3, 05, 22:20 Div tag problem in IE6.0

I wirte a table inside this div container but i see something weired..
table expands to right when there is no scroll bar on page..I mean there is slight mislalignment.

Below is the sample code of the same....there is a slight misalignment in the header and body table. If page scroll bar is there it will be proper but if not then misaligned..

Any suggestion? why it is so?

:: Code ::

<html>
<style>
.divStyle {
width: 100%;height:150px;overflow: auto; margin-top: -2px;margin-bottom: -2px;border: 1px solid #CCCCCC; border-top:none}
.mytable{
width: 100%;font-family: Arial; font-size: 9pt; padding: 0px 3px;}
.headerTable {width: 98%;font-family: Arial; font-size: 9pt; padding: 0px 3px;border: 1px solid #CCCCCC; border-bottom:none;}
.thStyle {
background-color:#CCCCCC ;
}
.evenRow {
background-color: #fffeee;
}
.oddRow {
background-color: #f0f0f0;
}
</style>
<body>
<form id="searchForm" >
<table class="headerTable" style ="border:1px solid #CCCCCC" cellpadding="0" cellspacing="1">
<tbody>
<tr class="thStyle">
....
</tr>
</tbody>
</table>

<div class="divStyle"><table class="mytable" border="0" cellpadding="0" cellspacing="1">
<tbody>
<tr class="oddRow">
....
</tr>
</tbody></table></div>
</body>
</html>

erikZ · Posted: Jul 3, 05, 23:05

Place the entire page into the container div, don't split it like you're doing.

Set the div width to 100% if you want, doesn't really matter if you do or not, it does it by itself.

Set the table header and table main to 100% width.

That will resolve the matter.

Like this:

:: Code ::

Also set your body and html correctly to get rid of margins:

:: Code ::

body,html {margin:0;padding:0}
#maincontainer,#tableheader, #mainbody{width:100%;}

This handles some slight differences between how browsers create margins on the edges of your document, Opera especially.

As a general rule, try to make up your mind if you're using CSS or html attributes to style your document, when you mix them the way you are doing it tends to mess things up, especially with tables.

techie_techie · Posted: Jul 4, 05, 0:24

I am getting your point but my requirement is that headerTable should not scroll ( that means it shd be outside div), only body table should scroll.

How do i do that?

erikZ · Posted: Jul 4, 05, 9:10

Put a right margin on the top table in that case that roughly equals the width of the browser scroll bar, that's about 15-20px.

Then the display will remain the same. Basically you're trying to emulate the way a frame works, and that's the same way you'd do it with a top and bottom frame.

However, be warned that tables within divs tend to act much less consistently than divs within divs, especially when it comes to advanced CSS behaviors like overflow:auto

techie_techie · Posted: Jul 5, 05, 5:32

It it not working either...putting margin for header table shifting body table also.

erikZ · Posted: Jul 5, 05, 9:27

If you put a margin on an element with an id, it can't affect another element with a different id.

However, you might be running into problems with the widths, that is, 100% + 15px does not equal 100%.

Using overflow:auto for primary page layout purposes is not a good idea, if you look around the web, you'll notice several things, but one will stand out: NO PROFESSIONAL WEBSITE USES THIS METHOD FOR PRIMARY PAGE LAYOUT. There's a reason for that.

For interesting use of overflow:auto, see for example chevrolet.com

Notice that it's done right there, positioned divs with overflowing content, but within a primary group of containers that themselves are static. This is how you use this method and get stable results cross browser.

You'll also notice that they aren't trying to mix tables and divs for the primary page layout. Tables are used to hold grid type data, and divs are used to create the layout. Divs are much easier to control than tables, with the exception of multi column layouts where the contents of any column needs to affect the height of any other column.

techie_techie · Posted: Jul 5, 05, 22:13

Thanks for a detailed information. really helpful. It did solved my problem.

But now only problem is with this "overflow:auto". When i resize my page, body table freezes and layout looks misalinged. But again refershing page works fine.

Basically , i 'll am trying to do is to have a scroll bar in table body ( which i guess not supported in IE).
So i used this approach. Dividing table into three table , header ,body and footer. And putting body inside a Div to get scrolling. Hope this approach is okay?

Tech

Tech

patterns.com

tech forums