All geek questions in one place

Incorrect table layout in IE (7)

Below is a simple html code with a tabular layout. In FF, it looks the way I think it should look, in IE7 it is not. what am I doing wrong?

And how can I fix this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <TITLE>test</TITLE> </head> <body> <table id="MainTable" cellspacing="0" cellpadding="0" border="1"> <tbody> <tr> <td colspan="4"> <div style='width:769; height:192;'>192 </div> </td> </tr> <tr> <td colspan="2" valign="top"> <div style='width:383; height:100;'>100 </div> </td> <td rowspan="2" valign="top"> <div style='width:190; height:200;'>200 </div> </td> <td rowspan="2" valign="top"> <div style='width:190; height:200;'>200 </div> </td> </tr> <tr> <td valign="top" rowspan="2"> <div style='width:190; height:200;'>200 </div> </td> <td valign="top" rowspan="2"> <div style='width:190; height:200;'>200 </div> </td> </tr> <tr> <td valign="top"> <div style='width:190; height:100;'>100 </div> </td> <td valign="top" > <div style='width:190; height:100;'>100 </div> </td> </tr> <tr> <td colspan="2"> <div style='width:383; height:100;'>100 </div> </td> <td colspan="2"> <div style='width:383; height:100;'>100 </div> </td> </tr> <tr> <td> <div style='width:190; height:100;'>100 </div> </td> <td> <div style='width:190; height:100;'>100 </div> </td> <td colspan="2"> <div style='width:383; height:100;'>100 </div> </td> </tr> </tbody> </table> </body> </html>
+4
source share
6 answers

I assume that you are complaining about the minimum height of the middle row (the one that contains only rows closed to cells) and the increased height of adjacent rows to compensate, leaving spaces between the divs.

IE cannot calculate the optimal line heights when a line contains only lines exposed by python. The usual solution, when you absolutely cannot convince him to get rid of rowspan, is to add a 1px 'dummy' column to one side of the table containing empty cells, each of which has a "height" set to how tall the row is .

But yes, depending on what you plan to do with this, a CSS layout may be more appropriate. If this is really a fixed-pixel layout for everything, like this example, absolute positioning for each div will be much simpler, much simpler.

Other bits: CSS width / height values ​​require units (presumably "px"); VALIGN / CELLSPACING / etc .. can be easily done in the stylesheet even if you use tabular layouts; DOCTYPE standard mode can prevent some of the worst IE errors (although this is not old, not CSS related).

+4
source

First, your CSS values ​​must have units, for example. width:190; should be width: 190px;

+3
source

totally agree, you can take a look at drawing CSS or other CSS frameworks for some help

0
source

At first glance, it looks like IE7 has some broken support for this kind of formatting. At first I was going to offer to get rid of the div and transfer the formatting (width and height) directly to TD, but I tried this and did not seem to solve the problem.

I think this is not a good solution, but is it possible to replace rowspan cells with more cells with an invisible border between them? However, this solution fails if the text is larger than the size of the top cell.

0
source

Choosing Doctype (4.01 Transitional without a system identifier (url)) launches Quirks mode in IE, which makes it very incompatible with other browsers.

Switch to:

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Or at least:

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

(and, of course, check , but HTML and CSS (which will select the missing units according to your length values)).

0
source

You should definitely go with CSS. Tables should NEVER be used for layout.

-3
source

Source: https://habr.com/ru/post/1277692/

More articles:


All Articles