Layout overlapping/collapsed shows in IE7

HTML & CSS
41

The problem will be that you have just floated all tables and not just the nes that were needed.

I would do something like this:


table {
    /*float:left;*/
    margin:5px 5px;
}
.fl{float:left}
.information{clear:both}

Three changes below marked in bold:


    <table class="bluebg [B]fl" [/B]width="340">
                            <tr>
                                <td class="heading">Location</td>
                            </tr>
                            <tr>
                                <td>Address</td>
                                <td><input name="txtAddress" type="text" class="txtfield" id="txtAddress" value="" readonly="readonly"  /></td>
                            </tr>
                            <tr>
                                <td>City</td>
                                <td><input name="txtCity" type="text" class="txtfield" id="txtCity"  value="" readonly="readonly" /></td>
                            </tr>
                            <tr>
                                <td>State</td>
                                <td><input name="txtState" type="text" class="txtfield" id="txtState" value="" readonly="readonly" /></td>
                            </tr>
                            <tr>
                                <td>Postal Code</td>
                                <td><input name="txtCode" type="text" class="txtfield" id="txtCode" value="" readonly="readonly" /></td>
                            </tr>
                            <tr>
                                <td>Intersection</td>
                                <td><input name="txtIntersection" type="text" class="txtfield" id="txtIntersection"  value="" readonly="readonly" /></td>
                            </tr>
                        </table>
                        <table class="bluebg[B] fl"[/B] width="338">
                            <tr>
                                <td colspan="2" class="heading">Sharing</td>
                            </tr>
                            <tr>
                                <td height="27">Shared</td>
                                <td><input readonly="readonly" 
 type="checkbox"    disabled="disabled" id="chkShared" name="chkShared"  /></td>
                            </tr>
                            <tr>
                                <td>Host</td>
                                <td><input name="txtHost" type="text" class="txtfield" id="txtHost" value=""  readonly="readonly" /></td>
                            </tr>
                            <tr>
                                <td>Guest1</td>
                                <td><input name="txtGuest1" type="text" class="txtfield" id="txtGuest1"  value=""  readonly="readonly"/></td>
                            </tr>
                            <tr>
                                <td>Guest2</td>
                                <td><input name="txtGuest2" type="text" class="txtfield" id="txtGuest2"  value=""  readonly="readonly"/></td>
                            </tr>
                            <tr>
                                <td>Other Network ID</td>
                                <td><input name="txtNetwork" type="text" class="txtfield" id="txtNetwork" value=""  readonly="readonly" /></td>
                            </tr>
                        </table>
                    </div>
                    <table width="1030" class="bluebg [B]information">[/B]
                        <tr>
                            <td class="heading">Information</td>
                        </tr>
                        <tr>
                            <td>Site Map Link</td>
                            <td width="130"><input type="text" readonly="readonly" value="" size="55" name="txtMap"/></td>
                            <td width="100" align="center">Last Updated</td>
                            <td width="100"><input type="text" readonly="readonly" name="txtUpdated" value=""/></td>
                            <td align="center" width="46">By</td>
                            <td><input type="text" readonly="readonly" name="txtUpdatedBy" value=""/></td>
                        </tr>
                        <tr>
                            <td>Comments</td>
                            <td colspan="6"><textarea name="txtcomments" id="txtcomments" cols="100" ></textarea></td>
                        </tr>
                    </table>

You should also use the classes for supplying the correct widths to the table and not use the presentational (and deprecated in strict) html width attribute.

42

ok i have another question if u see this page. what if one block has less element and other has more. but both height should be equal. how can i achieve that?

43

If you mean that you want those top two items to have the same height then css does not work like that unless you actually give them a height of some sort.

You could use display:table and display:table-cell to get the equal column effect but it won’t work in ie7 and under.

Alternatively you would need either a "faux column" approach using a background image or perhaps my [URL=“http://www.pmob.co.uk/search-this/absolute-columns2.htm”]absolute overlay method or just use a real table as the content looks tabular anyway and could be contained in two cells although the borders would still be tricky.

44

what about old school. make a transparent image of 20*20 and insert into table

45

Yes you could use images in empty table cells if you want to go that route but it does play havoc with the mark up.

You can do it easily for browsers other than Ie7 and under like so:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
table.wrap {
    width:800px;
    border-spacing:5px;
}
table.wrap td {
    border:1px solid blue;
    background:#ccc;
    vertical-align:top;
}
table.wrap td td {
    border:none;
    padding:5px;
    border-top:1px solid #000;
}
.wrap table {
    width:100&#37;;
}
</style>
</head>
<body>
<table class="wrap" cellspacing="0" cellpadding="0">
    <tr>
        <td><table cellspacing="0" cellpadding="0">
                <tr>
                    <td>test</td>
                </tr>
                <tr>
                    <td>test</td>
                </tr>
            </table></td>
        <td><table cellspacing="0" cellpadding="0">
                <tr>
                    <td>test</td>
                </tr>
                <tr>
                    <td>test</td>
                </tr>
                <tr>
                    <td>test</td>
                </tr>
                <tr>
                    <td>test</td>
                </tr>
                <tr>
                    <td>test</td>
                </tr>
                <tr>
                    <td>test</td>
                </tr>
            </table></td>
    </tr>
</table>
</body>
</html>

IE6 and 7 won’t have the seperate borders though.

46

from what i understand from faux method is that you make a background and let it repeat itself on y-axis.in the example u gave above it none of both, the parent and the child table has height. so i should give parent table class height so its stays on that height and table inside(nested) no matter how much data it holds.

47

That’s because table cells are the only elements that base their height off each other. No faux column trickery needed :slight_smile:

48

the Faux column. worked for me. thanks paul however i have a slight problem when i view this page in firefox, the top blue bar shows different position in IE and different in firefox

49

Hi, IE6/7/FF aren’t displaying a top blue bar differently…IE6 however needs display:inline; here to fix a float drop :slight_smile:

table.height{display:inline;}
50

hey paul. as u told me to use faux column to come over the problem with equal boxes if one of them has less data. i have a problem now. in IE the box on the left side is shorter. when seen in IE 7. how can i fix this problem :frowning: why is it happening?

51

You don’t seem to have any faux column technique in that section unless I’m missing something. You have just set some heights on the table. You would need a repeating image on the container element that is the width of both tables and carries the side borders and background colours and gaps etc.

Then you would need to draw the top borders on the table and the bottom borders would need to be on another element after the container. It’s a little tricky and fiddly.

Alternatively you could just use the absolute color overlay method as shown in my demo here.

http://www.pmob.co.uk/search-this/absolute-columns3-hide.htm

52

what i used in my opnion i read somewhere faux column technique using a parent column. what i did is gave one parents table class named height. in which is nested another table. with width of 100% which contain data. i see now it isn’t a right approach as i thought i was done with this problem but when saw in IE 7. i was shocked. now with so many pages as lack of time. i need to fix them quick and fast.