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.
Related
EDIT: The following outlined example works in thunderbird as well.
I'm currently learning how to create emails using foundation for emails. What I currently want to do is to create an "expanded button" within a grid. I've come up with the following HTML by referencing the examples outlined for grid here and examples outlined for expanded button here.
The following is what I came up with, my thinking based on what I have read thus far is that I have to add the "expanded button" within the column of my grid, so I have the following HTML:
<!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" />
<meta name="viewport" content="width=device-width" />
<title>Title</title>
<link rel="stylesheet" href="css/foundation-emails.css" />
</head>
<table align="center" class="container">
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="columns first last">
<table>
<tr>
<table class="row">
<tbody>
<tr>
<column>
<table class="button expanded">
<tr>
<td>
<table>
<tr>
<td>
<center data-parsed><a href="#"
align="center"
class="float-center">Reset Password</a>
</center>
</td>
</tr>
</table>
</td>
<td class="expander"></td>
</tr>
</table>
<table class="button small-expanded">
<tr>
<td>
<table>
<tr>
<td>Expand small only</td>
</tr>
</table>
</td>
</tr>
</table>
</column>
</tr>
</tbody>
</table>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</html>
It looks exactly as I expect it to look like in Firefox, however it looks incorrect in outlook. For example, this is what it appears as in Firefox:
Here is what it looks like in outlook when I send an email:
For context, I'm trying to create an typical "Reset Password" email template. Do note that I have run the HTML through the CSS inliner located here, as instructed by the documentation.
This issue is resolved in version 2.3.1, but their official download link was not updated to serve the latest version of the code, hence I spent time trying to resolve an issue that was already rectified. While the button is now expanded, there is an issue with the anchor link in outlook.
See https://github.com/foundation/foundation-emails/issues/415 for more information.
everyone,
I have designed a quick html doc that will be incorporated in Outlook (hence the need to have inline styles inside the HTML). Everything is looking fine on Chrome and on Safari, but IE11 is showing the below problem. The table border is messed up, like it has two colours inside it, instead of only one, like the good version on Chrome. Also, Firefox seems to be ignoring the table set for the colour and showing a beveled version of it... Does anyone have an idea about this? I'm pasting example image and my code below.
image depicting bug in IE against good version on Chrome
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Xmas Card</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin: 0; padding: 60px 300px 60px 300px; background-color:#d2d2d1">
<table>
<tr>
<div style="text-align:center; margin-bottom:20px">
<span style="font-family:sans-serif; font-size:10pt">If you have problems opening this message, read online here</span>
</div>
</tr>
</table>
<table border="8" rules="none" bordercolor="#8a7e70" cellpadding="0px" cellspacing="0" align="center" width="600px">
<tr style="background-color:#ffffff" align="center">
<td>
<img src="#" alt="corners top">
</td>
</tr>
<tr style="background-color:#ffffff" align="center">
<td>
<img src="#" alt="logo">
</td>
</tr>
<tr style="background-color:#ffffff" align="center">
<td>
<h1 style="font-size:24pt; font-family:sans-serif; color:#aa212f; text-align:center">Season's Greetings</h1>
</td>
</tr>
<tr style="background-color:#ffffff" align="center">
<td>
<img src="#" alt="Xmas branches">
</td>
</tr>
<tr style="background-color:#ffffff" align="center">
<td>
<img src="/#" alt="button">
</td>
</tr>
<tr style="background-color:#ffffff" align="center">
<td>
<img src="#" alt="corners bottom">
</td>
</tr>
</table>
</body>
</html>
Thank you so much for your kindness.
When you want to set the table's border attribute, you should keep in mind that the border-style is required.
The definition and usage of CSS border you could refer to the following W3C document:https://www.w3schools.com/cssref/pr_border.asp
I suggest that you could set the border-color, border-style and border-width separately like:
<table style="border-color: #8a7e70; border-style: solid; border-width:8px;" rules="none" cellpadding="0" cellspacing="0" align="center" width="600">...</table>
Or you could write three attributes together:
<table style="border:8px solid #8a7e70;" rules="none" cellpadding="0" cellspacing="0" align="center" width="600">...</table>
the running result in Chrome and IE
I have to make a table using the table element in HTML. The table should look like this: required Table image
But at the moment my table looks like this: My Table image
I've tried to fix it numerous times. but I just can not figure it out.
heres my HTML code aswell.
Please help
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Page header</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td colspan=4>Page Header </td>
</tr>
<tr>
<td rowspan=2>Menu: </td>
<td> Advertisement Space </td>
<td> Blog Links </td>
</tr>
<tr>
<td> Main Content Area</td>
</tr>
<tr>
<td colspan=4>Footer </td>
</tr>
</body>
</html>
The HTML below creats a table like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Page header</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td colspan=4>Page Header </td>
</tr>
<tr>
<td rowspan=2>Menu: </td>
<td colspan=2> Advertisement Space </td>
</tr>
<tr>
<td> Main Content Area</td>
<td> Blog Links </td>
</tr>
<tr>
<td colspan=4>Footer </td>
</tr>
</body>
</html>
What you need to change:
Set colspan for the "Advertisment Space"
Move "Blog Links" to the same row as "Main Content Area"
Although I must say that tables are absolutely not state of the art when it comes to designing a website layout. <table> is used do display data (like a list or, well, a table).
<div> and <span> should be used to apply a layout to a website
Just correct with:
<td rowspan="2"> Blog Links </td>
Side comment: you seem to be building the layout of the page using html tables. Bad idea, read this.
Also, html attributes, to be correct, require quotes, i.e. <elem attrib="value">
Close off your table:
<table border="1" width>Table data...</table>
Give menu rowspan 4 and change accordingly.
Can anyone tell me why this table looks perfect in Chrome but not in IE or FireFox?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2" rowspan="2" style="padding-left:6px;"><img src="http://www.purelycustom.com/name_decals/style2/borders/tl_black_blue.png" /></td>
<td colspan="4" style="height:15px; background-color:#00F"></td>
<td rowspan="4"><img src="http://www.purelycustom.com/name_decals/style2/borders/right_black_blue.png" /></td>
</tr>
<tr>
<td colspan="4" height="13px" style="background-color:#000"></td>
</tr>
<tr>
<td rowspan="2"><img src="http://www.purelycustom.com/name_decals/style2/borders/l_black.png" /></td>
<td colspan="2" style="background-color:#000000"><img src="http://www.purelycustom.com/name_decals/style2/flags/flag.png" /></td>
<td style="background-color:#000000"><span style="color:#FFFFFF">YOUR</span></td>
<td style="background-color:#000000" width="15px"></td>
<td style="background-color:#000000"><span style="color:#FFFFFF">NAME</span></td>
</tr>
<tr>
<td style="background-color:#000000" colspan="5"></td>
</tr>
</tbody>
</table>
</body>
</html>
I included the !DOCTYPE declaration because I know that that has an affect on how the table gets displayed.
set the width of the 1st td in your tr's... if you add align="right" to the td the images will line up.. may override when adding specific widths to tds
something more effective would be a div with a background image instead of messing with table alignment..
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.