ansaurus

Question

unwanted space before and after nested html table using Internet Explorer 8

Answer 1

A:

Hello Jonh.

Here is your problem, you have specified <th style="margin:0;padding:0;height:100;"> in inline CSS style for you th inside your main table.

This should solve you problem, try using height:100%; instead.

EDIT:

To get rid of you extra space that requires in IE8 to scroll down you page, you can remove you border and add cellpadding="0" cellspacing="0" to you main table.

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
body, html, table{
    height: 100%;
    width: 100%;
    margin:0px;
    padding:0px;
}
</style>
<body>
<table cellpadding="0" cellspacing="0">
   <tr>
    <th style="margin:0px;padding:0px;height:100%;">
    <table><tr><th>nested cell</th></tr></table>
    </th>
  </tr>
</table>
</body>
</html>

Fábio Antunes 2010-04-24 13:36:28

Again, thanks Fabio! Indeed it works! I think I can do without the borders. Besides I only used them in order to make the problem visible in the first place.

John 2010-04-24 14:59:14

@John: Glad to help. I recommend to use CSS next time ;)

Fábio Antunes 2010-04-24 15:01:48

Answer 2

A:

In your <th>, you have "height:100;" instead of "height:100%;" - missing the "%"

Ray 2010-04-24 13:50:12

He meant that when he used "height:100%;" Firefox had the desired effect, but IE8 added some extra space.

Fábio Antunes 2010-04-24 13:54:16

Right - but he misspelled his css. If I use the code exactly as he posted it (without the % sign) I see the behavior he describes. When I add the % sign, I see the behavior he wants.

Ray 2010-04-24 13:58:02

Yes. He misspelled his CSS, i was going to writing the same as you did, but then i realized what he meant. But if you add the %, the cell will take all available space in the Table, with IE8 the same happens, but IE8 adds some extra space requiring you to scroll down your page.

Fábio Antunes 2010-04-24 14:03:50

Thanks a lot! Sorry I didn't notice this. Have you any ideas about how I can get rid of the extra space than requires to scroll down (as Fabio mentioned?)

John 2010-04-24 14:35:33

@John: Thats what i'm trying to do now ;)

Fábio Antunes 2010-04-24 14:42:01

When I view a page with you html exactly as posted, I don;t see any extra space. The table and cell take up the entire screen, with no scroll bars. If I switch IE8 to compatibility view, then I see some scrolling. Fix all your margin and padding styles to be "0px" instead of "0" and this should go away.

Ray 2010-04-24 14:42:04

@John: If don't need borders on your table. Have a look at my latest edit.

Fábio Antunes 2010-04-24 14:48:17

Answer 3

A:

try just adding th{height:100%} to your css style

Erik 2010-04-24 13:56:56

yes you can take complete control of your tables using css, if you can use id="" or class="" inside the element then you can get even better control.

Erik 2010-04-24 14:02:48

Answer 4

A:

<th style="margin:0;padding:0;height:100%;">

instead of

<th style="margin:0;padding:0;height:100;">

Naveen Bhalla 2010-04-24 14:20:00

Answer 5

+1 A:

Using attached code worked for me for both IE and FF but had to remove the borders as they are handled differently by IE and FF

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
<!--
body, html, table{
    height: 100%;
    width: 100%;
    margin:0;
    padding:0;
}
table{border:#000 0px solid}
</style>
<body>
<table style="background:#063"  cellpadding="0" cellspacing="0" border="0">
   <tr>
    <th style="margin:0;padding:0;height:100%;">
    <table style="background:#0FF;" cellpadding="0" cellspacing="0" border="0"><tr><th style="height:100%">nested cell</th></tr></table>
    </th>
  </tr>
</table>
</body>
</html>

Naveen Bhalla 2010-04-24 14:32:48

ansaurus

tags:

views:

answers:

unwanted space before and after nested html table using Internet Explorer 8

related questions