I have a problem with TABLES in all internet explorer versions, or rather with the height of TDs that drive me nuts.
I have the following markup
<table>
<tbody>
<tr style="vertical-align:top;">
<td id="TD1" width="35" colspan="2" style="background-color:yellow; height:1%;">
<div id="DIV1" style="height:10px; background-color:red;"></div>
</td>
<td id="TD2" width="15" rowspan="2" style="height:99%;">
<div id="DIV2" style="height:160px; background-color:green;"></div>
</td>
</tr>
<tr style="vertical-align:top;">
<td id="TD3" width="25">
<div id="DIV3" style="height:60px; background-color:blue;"></div>
</td>
<td id="TD4" width="10">
<div id="DIV4" style="height:80px; background-color:orange;"></div>
</td>
</tr>
</tbody>
</table>
For a better understanding you can execute the code in the tryit-editor from w3schools.com
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_height.
I think that explains, what I try to explain :)
While the height of DIV2 is smaller or equal than the height of DIV1 and DIV3 or DIV4 it works like expected. But when the height of DIV2 is bigger than the height of DIV1 and DIV3 or DIV4, the IE rises TD1 in the same ratio like TD3 and TD4.
In all other browsers, only TD3 and TD4 raises. TD1 has still the same height like DIV1.
Has someone an idea or a workaround how I can fix this?
A tableless layout is sadly no option.
Without a proper doctype, you will never get IE to attempt to perform like the other far more modern browsers. IE is in quirks mode. Use this one:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
or this one:
<!DOCTYPE html>
Related
This is the part of my code:
<div class="main_100%">
<h1 class="main-header">Header</h1>
<div class="sub_50%" style="padding:15px"><strong>Sample:</strong> some text.</div>
<table style="border:none;padding:15px">
<tbody>
<tr>
<td style="vertical-align:top;width:60%;padding-right:25px;padding-bottom:15px">something</td>
<td style="vertical-align:top;width:40%;padding-bottom:15px">something</td>
</tr>
<tr>
<td style="vertical-align:top;width:60%;padding-right:25px;padding-bottom:15px">something</td>
<td style="vertical-align:top;width:40%;padding-bottom:15px">something</td>
</tr>
<tr>
<td style="vertical-align:top;width:60%;padding-right:25px">something</td>
<td style="vertical-align:top;width:40%">something</td>
</tr>
</tbody>
</table>
</div>
Google PageSpeed and GTMetrix said that there is a large CLS. I realized that if I set the table to a fixed size (for example 500px), the problem disappears. But if I set it to a fixed width, it won't be responsive in all resolutions.
If I add style="overflow:auto" to the div, then the CLS decreases slightly, but it still remains. I don't know what to do, please, help me.
Thank you very much!
I have a problem with dynamic height of the table cell. I've set it to rowspan=2 so it should take 2 rows for it's height.
My code:
<table cellspacing="0" cellpadding="0" style="width: 640px;" align="center">
<tr>
<td colspan="3"><img src="bg-top.png" /></td>
</tr>
<tr style="height: 669px;">
<td><img src="bg-left.png" style="display: block"/></td>
<td valign="top" rowspan=2 >
lorem ipsu
</td>
<td><img align="right" src="bg-right.png" style="display: block"/></td>
</tr>
<tr>
<td background="cont.png"></td>
<td background="cont.png"></td>
</tr>
</table>
I'm trying to make images look like a border around the text, and if text is longer than what can be put in 700px than it should repeat cont.png. It looks fine in Opera and Chrome but in IE and Firefox it's not working.
Screnshots:
in mozzila: http://shrani.si/f/1h/12j/3c72q2gv/notworking.png
in chrome: http://shrani.si/f/Q/n/3w7G0jOn/working.png
Any ideas what I might change?
I would convert this to use CSS instead.
I'v got it to work! U used only one row and set background picture to it and then set my left and right on top of it, and set it with valing=top. Now it works evrywhere except in outlook :S
I need to display an HTML with various cells merged across rows.
Here's a test that illustrates the requirement and issue:-
<html>
<head></head>
<body>
<table cellspacing="0" cellpadding="0" border="1">
<tbody>
<tr>
<td rowspan="2" style="height: 40px">
<div style="width: 100px;">RS=2</div>
</td>
<td rowspan="1" style="height: 20px">
<div style="width: 100px;">RS=1</div>
</td>
<td rowspan="3" style="height: 60px">
<div style="width: 100px;">RS=3</div>
</td>
</tr>
<tr>
<td rowspan="4" style="height: 80px">
<div style="width: 100px;">RS=4</div>
</td>
</tr>
<tr>
<td rowspan="2" style="height: 40px">
<div style="width: 100px;">RS=2</div>
</td>
</tr>
<tr>
<td rowspan="2" style="height: 40px">
<div style="width: 100px;">RS=2</div>
</td>
</tr>
<tr>
<td rowspan="1" style="height: 20px">
<div style="width: 100px;">RS=1</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
When displayed in Chrome it is OK, but in FF3.6 and IE8 it is not (look at the two "RS=2" in column one, they have the same rowspan and height but are visibly different). Row heights are incredibly important to me as I display another table next to this with single rows of fixed height that needs to align with this table).
Can anybody please advise how this can be corrected in Firefox and IE?
Here's a fix that works in Firefox but not Internet Explorer. Remove the height attribute from the cells, then either add
style="height:20px;"
to all rows OR
add this style tag inside the head:
<style>
tr{height:20px;}
</style>
This works in Firefox and Chrome is unaffected, but IE still makes a mess.
Firefox and IE both have a history of bugs when rendering tables.
discussion of table cell height rendering bug in Firefox
Some newest "intelligent" browser dectect eventual "not closed tag" errors and show it as your tree is well done, but it is not always like this.
Check all opened tags are closed, there must be a non-closed one.
If you use Dreamweaver you can colapse/expand tags by the menu on the left. ->...<- or <-...->
Without a proper doctype, you are in quirks mode and IE, in particular, will never attempt to perform like all the other far more modern browsers. Not that is does a good job of it in any case.
This is only happening in IE, when I place the table labelled -- middle table -- into this HTML, the alignment of the parent table gets messed up and the width="250" on the first TD gets ignored it seems. (The select box should start at 250 pixels from the left of the page, however it doesn't. Remove the table labelled -- middle table - and the alignment works as it should. Why is this happening?
<!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" lang="en" xml:lang="en">
<head>
<title>asdf</title>
</head>
<body>
<table id="tbl_container" width="1300" cellpadding="0" cellspacing="0" border="1">
<tr style="height: 50px;">
<td align="center" style="width: 250px;"><img src="logo.gif" alt="asdf" /></td>
<td valign="middle" align="left" style="text-align: left;"><span class="bold">asdf: </span><select class="form_select_"><option value="asdf">asdf</option></select></td>
</tr>
<tr id="row_container" align="left" valign="top">
<td colspan="2">
<!-- middle table -->
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="width: 250px;" align="left" valign="top" id="nav_container"></td>
<td style="width: 25px;" align="left" valign="top"></td>
<td id="dat_container" style="width:1000px;" align="left"></td>
</tr>
</table>
</td>
</tr>
<tr style="height: 50px;">
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
According to the W3C Validator, your XHTML contains six errors. More specifically, the width="250" attribute that gets ignored is not valid. The main problem with invalid tags is that you no longer get a coherent cross-browser rendering since browsers are forced to use workarounds. Try to fix this first. As a general rule, layouts should be accomplished via CSS.
You are taking an extremely archaic approach to web site layout. Using tables to lay out anything in a web site that is not tabular in nature is a MASSIVE no-no. You should be using standards-compliant CSS and HTML (DIVs, Spans, etc.) to lay your site out. Tables are treated differently by each browser, and it can be extremely difficult to get a consistent, functional, easy to maintain layout with them.
I hate to say it, but I really can't bring myself to help you resolve your current problem using tables. My only answer is restart, use DIV tags and CSS, and enjoy the bliss that is standards-compliant layout. (Do NOT use the style="" attribute to set all your CSS, use a proper stylesheet.)
1000 + 250 + 25 > 1250
your middle table is too wide
When all is said and done the short answer is...because IE can be very retarted. That said here is a work around:
First you issue simplified is this:
<!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" lang="en" xml:lang="en">
<head></head>
<body>
<table width="1000" border="1">
<tr>
<td width="250" style="background-color:blue;">a1</td>
<td style="background-color:green;" >a</td>
</tr>
<tr>
<td colspan="2" style="background-color:red;">
<table>
<tr>
<td width="1000">c2</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Notice your 2nd td in your 1st row has no width specified. If you know what the width should be then you can work around this issue 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" lang="en" xml:lang="en">
<head></head>
<body>
<table width="1000" border="1">
<tr>
<td width="250" style="background-color:blue;">a1</td>
<td width="750" style="background-color:green;" >a</td>
</tr>
<tr>
<td colspan="2" style="background-color:red;">
<table>
<tr>
<td width="1000">c2</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I do agree with what others have said, that css is the way to go, but that was not your question. Hopefully this helps.
Below is the code of a simple html with a table layout.
In FF it's looking as I think it should look like,
in IE7 it doesn't. what am I doing wrong?
And how can I fix it?
<!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>
I assume you are complaining about the minimal height of the middle row (the one containing only rowspanned cells), and the enlarged height of the adjacent rows to compensate, leaving gaps between the divs.
IE cannot calculate optimal row heights when the row contains only rowspanned cells. The usual solution when you absolutely cannot rejig it to get rid of the rowspan is to add a 1px 'dummy' column to one side of the table, containing empty cells, each with the 'height' set to how high the row should be.
But yes, depending on what you're planning to do with this, a CSS layout may well be more appropriate. If it's really a fixed-pixels-for-everything layout like this example, absolute positioning for each div will be a lot, lot easier.
Other bits: CSS width/height values require units (presumably 'px'); valign/cellspacing/etc. can be more easily done in a stylesheet even if you are using table layouts; a standards-mode DOCTYPE may prevent some of the worse IE bugs (although, not this old, non-CSS-related one).
For a start, your CSS values should have units, e.g. width:190; should be width: 190px;
completely agree, you can have a look at blueprint CSS or other CSS frameworks for some help
At first sight it looks like IE7 has some broken support for this kind of formatting. At first I was going to propose to get rid of the divs and move the formatting (width and height) directly on the TD, but I tried that and doesn't seem to solve the problem.
I guess this is not a nice solution, but would it be possible to replace the 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 upper cell.
The choice of Doctype (4.01 Transitional with no system identifier (url)) triggers Quirks mode in IE which makes it highly inconsistent 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, validate but the HTML and CSS (which would pick the the missing units on your length values)).
You should definitely go with CSS. Tables should NEVER be used for layout.