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.
Related
HTML markup:
<table class='cardc'>
<tr>
<td rowspan='5' width='10%'>
<img src='http://fwfn.ca/sites/default/files/pictures/blank_person.jpg' height='120' width='100'/>
</td>
<td width='70%' colspan='3'>"
."<a href='".$profilePage."&sid=".$sfid."#box-one'>".($record->fields->FirstName)." ".($record->fields->LastName)."</a></font>
</td>
<td>
".$record->fields->Email."
</td>
</tr>
<tr>
<td class='greyF' colspan='3'>
".$record->fields->Country_of_Citizenship__c."
</td>
</tr>
<tr>
<td>
<div class='greyF'>year</div>".$record->fields->Fellowship_year__c."
</td>
<td>
<div class='greyF'>Organization</div>".$record->fields->Partner_Organization__c."
</td>
<td>
<div class='greyF'>Country</div>".$record->fields->Fellowship_Country__c."
</td>
</tr>
<tr>
<td colspan='3'>
<div class='greyF'>Education</div>".$record->fields->Education__c."
</td>
</tr>
<tr>
</tr>
</table>
CSS markup:
.cardc {
border: 5px outset white;
padding: 3px;
width:80%;
}
But as the title says, I'm having cross Browser issues, the border that's supposed to cover the whole table gets cut off at the bottom.
Any recommendations for alternative ways to create the border?
Edited HTML taking everybody's worries into consideration. Border still draws improperly.
See a demo here
It's caused by a combination of an invalid rowspan and border collapsing (which is the default when you select "Normalized CSS" in jsFiddle). If you turn that off or provide the correct number of rows then the border draws correctly.
<td rowspan='5' width=10%> indicates that there are at least 4 following rows, since the current cell shall span 5 rows. Since you don't provide any of those rows the <td> will spill out of the table. Drop the rowspan attribute:
<td style="width:10%">
<img src='http://fwfn.ca/sites/default/files/pictures/blank_person.jpg' height='120' width='100'/>
</td>
You have a rowspan="5" on the first td which is breaking the bottom border of the table, probably because it cannot find the remaining 4 rows to merge with. Removing the rowspan fixes the border.
http://jsfiddle.net/Q3e9m/
Try fixing the errors with html in your code, for starters. Your code lacks some quotation marks, and styling attributes in tags are deprecated.
<html>
<head>
<style>
.cardc {
border: 5px outset white;
padding: 3px;
width:80%;
}
</style>
</head>
<body>
<table class='cardc' style="height:100px;">
<tr>
<td style="width:10%">
<img src='http://fwfn.ca/sites/default/files/pictures/blank_person.jpg' style="height:120px;width:100px;"/>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</body>
Lack of quotation marks and units.you need to specify whether your values are in pixels or ems ....try and use color coding codes, eg #fff or rgb(255 255 255) instead of of saying white.
I want to design a table with height and width of 1px.
Is this possible, cause I couldn't do that?
Any advice would be appreciated.
EDIT:
I did it, actually I needed to use !important in my css style, but the space between cells are present. How should I remove them?
<table width="100%" style="height:1px !important;">
<tr style="height:1px !important;">
<td style="background-color:red; width:1px;">
</td>
<td style="background-color:blue; width:1px;">
</td>
<td style="background-color:orange;">
</td>
<td style="background-color:red; width:1px;">
</td>
</tr>
</table>
This is an HTML-only answer that works across browsers and settings:
<body>
<table cellpadding=0 cellspacing=0>
<tr><td width=1 height=1></td></tr>
</table>
To set the color of the pixel, you can use the bgcolor attribute on the td element.
I can’t imagine what your purpose is, but this answers the question that was asked.
Yes you can just take a look at this Fiddle:
http://jsfiddle.net/yaAJ7/
It is better practice to use DIV's though rather than tables
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>
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.