Do you know, why contenteditable=true, doesn't work in Opera?
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<td contenteditable="true">This is a paragraph. It is editable.</td>
</tr>
</table>
</body>
</html>
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_contenteditable
Opera version: 12.16, build 1860
Platform: Mac OS 10.9.1
The support is currently rather flaky. Browsers have not completely caught up yet.
The easiest solution until it is fully supported is to place a DIV or SPAN inside the cell and make that one editable. See the "Remarks" section on the related MSDN article.
You should also add a min-height style rule. If you leave that out it will shrink to 0px if there is no content in the cell, and the user will have a hard time clicking on it to grab the focus. Tab stops should work fine though.
Here's something I used for debugging:
TD > DIV[contenteditable="true"] {
border: 1px dashed blue;
min-height: 1em;
}
Your DOM structure would then look like this:
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<td>
<div contenteditable="true">This is a paragraph. It is editable.</div>
</td>
</tr>
</table>
</body>
</html>
Related
Office rendering of HTML is a known headache an I have a problem with Outlook 2016. A small, 1px horizontal line is rendered below my table. Tables are a common practice for formatting due to many Outlook/Office/Word HTML/Richtext/Mixup flaws.
The 1px line is really a small gap or hole in the white background color of the table, showing the background color of the body. I managed to figure this out by changing background color to red instead of grey.
The code can be tested in Notepad++ by selecting Run>Send via Outlook on a computer with Windows and Outlook Client installed...
<!DOCTYPE html>
<html>
<head>
<style>
html,
body
{
font-family: 'sans-serif';
}
</style>
</head>
<body style="background-color: red">
<table style="background-color: white;" >
<tr>
<td>
<table>
<tr>
<td>
Test before
</td>
</tr>
</table>
<table>
<tr>
<td>
<p>
Test 1<br>
Test 2<br>
Test 3
</p>
</td>
</tr>
</table>
<br/><br/>
Test after
</td>
</tr>
</table>
</body>
</html>
The structure is a scaled down version of an email where the elements are used to present information.
(Note! TL;DR; - Best solution in the bottom)
There are couple of different ways of changing the structure to make the gap go away. However this is not an option in my case. The solution that fixed it for me, was to scale down everything to a minimal, step by step according to the above, and finally try to change all values.
The final solution in my case, was to change font size in the table before, to NOT 30px.
Test before
In my specific encounter with the randomizer-magic of Ms Outlook rendering, this was the key. I am sure the solution may vary for others, but changing a few font-sizes around might be worth a shot.
Since this took me long enough I thought I better post the solution, maybe it can help someone as frustrated as me!
[Edit] Here is another example of this issue - Messing with line-height
<!DOCTYPE html>
<html>
<head>
<title>Yea</title>
</head>
<body style="width: 100%; background-color: white;">
<br/><br/>
<table cellspacing="0" cellpadding="0" style="background-color: white;width: 100%; line-height: 0;" border="0" border-size="0">
<tr>
<td style="height: 114px; font-size: 100px; background-color: #999999"><span> My name is Jasper</span></td>
</tr>
</table>
<br/><br/>
</body>
</html>
Well, the issue in this case when investigating the code, was the line-height: 0; of the table element. Remove it or set it to 1px to get rid of the element that looks like a white thick line but is actually a glimpse of the background. This is definitely a rendering bug and it at least shows in Outlook 2019 / 2016 (win 10). Reproduceable with Litmus.
[Edit #2 - Add an invisible tag]
By adding the patent pending gap-line eliminator directly before the problem-table-tag I managed to get rid of some lines.
<table class="unwanted-line-eliminator" cellpadding="0" cellspacing="0" style="height:0">
<tr>
<td style="font-size: 0px;line-height: 0px;"> </td>
</tr>
</table>
[Edit #3 - Finally - Best solution!]
Since the gaps are a bit random between Outlook versions, appears both horizontally and vertically (according to my last few hours of troubleshooting) and depends on DPI settings amongst other things the absolute best solution seems to be the following...
Add a content encapsulating <table style="background-color: lime"><tr><td>CONTENT</td></tr></table> with the top/front background-color. This will for some reason cover all gaps! Best of luck!
Another possible solution which helped in my case was to avoid using paragraphs <p> - I've just replaced them with line breaks <br/><br/>.
My SVG images work fine on all browser, except IE (surprise...).
Here is my test page: http://plnkr.co/edit/qmv9G3DGRlqDdi9ww58O?p=preview
As you can see, the first svg is displayed OK (even in IE), but the next two are not. They scale down to a container (table -> tr -> td in this case).
Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
/* this will be applied to the images */
.smallicon {
width: 16px;
padding: 5px;
}
</style>
</head>
<body>
<p>
Problem exists in Internet Explorer only
<br> This is fine:
</p>
<object class="smallicon icon-white" data="http://konradpapala.beep.pl/test/040__file_delete.svg" type="image/svg+xml"></object>
<table>
<thead>
<tr>
<th>This is not OK, unless we add style = 'width:20px;height:20px' to the td tag, BTW "normal" images, like .png work fine</th>
<th>This doesn't work either:</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img class='smallicon' src='http://konradpapala.beep.pl/test/040__file_delete.svg'>
</td>
<td>
<object class='smallicon' data = 'http://konradpapala.beep.pl/test/040__file_delete.svg' type="image/svg+xml"></object>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Any ideas?
BTW, I know this question is already there and is answered ( SVG in img element proportions not respected in ie9 ), however, the solution simply doesn't work - I don't have width and height specified in my SVG files, while I do have a viewbox specified.
Unfortunately IE doesn't seem to handle the scaling of SVGs correctly when the size is unspecified. Other browsers default to a size of 300x150 when they can't otherwise determine what the intended size is. IE does not.
You therefore have to specify a width and height for your SVG. If not in the SVG itself, then in the <img> or <object> that references it.
Here is an example:
<table>
<tr>
<td width="400px" id='myTD'></td>
</td>
</table>
here is the external code:
protected string GetHtml()
{
return "<table><tr><td width="800px"></td></tr></table>";
}
Since the width of 'myTD' is smaller than the width of the external code the displayed code is getting out of the main table boundaries , I dont want the innerHTML of 'myTD' to make the main table wider.
Suffice to say that as the external HTML code is given from outside I can't change it without ruin it as I'll never know which width or heights will be essential for the code and which wouldn't.
This wasn't easy in a way that's compatible with all browsers, but I did come up with this.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#myID {width:400px; overflow:scroll}
</style>
</head>
<body>
<table>
<tr>
<td><div id='myID'>
<table><tr><td width="800"><hr style="width:792px"</td></tr></table>
</div></td>
</tr>
</table>
</body>
</html>
(or as a jsFiddle). That is, by adding a new element inside your td that gets the scrollbars. Trying to apply overflow:scroll to a table cell doesn't work the same on all browsers.
Hope you can use this.
I have a table inside a hyperlink:
<table><tr><td>...</td></tr></table>
In all browsers, hovering over the table changes the pointer to a hand, and through some CSS the table background changes colour (so it looks 'highlighted').
However, in Internet Explorer, clicking the table has no effect. In Firefox and Chrome, it follows the hyperlink as expected.
How can I make IE follow the link when clicked?
You can't nest block-level elements inside of inline elements and expect to get proper results (insert citation here).
You could add some CSS styles to the table and apply a onclick handler so that it acts like a hyperlink:
<table style="fakeLink" onclick="window.location = '/';">...
And the fakeLink class:
.fakeLink
{
color: blue;
border-color: blue;
cursor: pointer;
text-decoration: underline; /* Not sure if this is possible. */
}
And a demo demonstrating the two techniques: http://jsfiddle.net/qNGrp/4/. I don't have IE, but I think only one will work properly.
First: Putting an <a> around block-level elements IS valid in HTML5! Check the code below on http://validator.w3.org/
Second: Any JavaScript work-around reduces accessibility, so it's not the best thing to do ;-)
My solution: Use <div>'s instead of <table> - as shown here:
<!DOCTYPE html>
<html>
<head>
<title>MSIE sucks!</title>
</head>
<body>
<a href="javascript:alert('Yeah!')">
<table>
<tr>
<td><table> Doesn't work in Internet Explorer 8 :-(</td>
</tr>
</table>
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell">Solution: <div style="display:table"></div>
</div>
</div>
</a>
</body>
</html>
I've managed to find a solution for this, it's not perfect but it works:
Simplified CSS:
a{ display:inline-block; position:relative; }
a:after{ content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url('x'); }
Simplified HTML:
<a href='http://dropthebit.com' target='_blank'>
<table>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
</table>
</a>
Test page
It shouldn't work. IE has the correct behaviour there. Tables are block-level elements; links are inline elements. Inline elements may not contain block-level elements.
If you want clicking on your element to change the page, you will probably need Javascript. Changing the CSS shouldn't be difficult, though: the :hover pseudo-selector will still work on the table element.
Consider a table with three rows with heights 10, *, 10. I'd like the middle cell to be high enough to fit to the page vertically. Unfortunately "height:100%" doesn't work at table, tr, or td level, possibly due to standards. Even if it happens to work, I don't want 100%, I want 100% of clientHeight-20px :) I can always write script to calculate remaining clientHeight but I wonder if it can be achieved in HTML/CSS standards.
NOTE: I'm using table just for layout, if there are other ways to lay them down in a better way I'm ok with those approaches too.
Try to leave table and use CSS.
This is the first link on google (searching: css page layout)
http://www.maxdesign.com.au/presentation/page_layouts/
You will spend more time at beginning, but then you will love CSS.
Regards,
Lorenzo.
I've tested the following in Firefox and Safari and it works although it's perhaps not the nicest solution! What you'll see is the 20 height on row1 and row3 is still applied and the 100% makes up the rest. If you leave off the padding and margin from the body you'll get scrolling.
<html>
<head>
<style>
html,body { height:100%; padding:0; margin:0; }
</style>
</head>
<body>
<table cellpadding=0 cellspacing=0 style="height:100%;">
<tr height="20" style="background-color:grey;">
<td>row 1</td>
</tr>
<tr>
<td>row 2</td>
</tr>
<tr height="20" style="background-color:grey;">
<td>row 3</td>
</tr>
</table>
</body>
</html>
Does this not work?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<!-- Date: 2009-07-13 -->
<style type="text/css" media="screen">
table {height: 100%; width: 100%;}
td {border: 1px solid #000;}
</style>
</head>
<body>
<table>
<tr height="10"><td>Data</td></tr>
<tr height="100%"><td>Data</td></tr>
<tr height="10"><td>Data</td></tr>
</table>
</body>
</html>
It does for me.
The "height: 100%" style will only work on elements that are inside an element that has the height property explicitly set. In your case, the table is likely to be inside the body tag and the body tag doesn't have a height set.
Have the same here - the simple examples above work, while my own page does not "stretch" the needed <tr> element.
What I found so far is that excluding the DOCTYPE (thus putting the browser into quirks rendering mode - even for FireFox!) makes my page behave like the simple examples, yet adding a DOCTYPE to these examples stops them from working.
I guess this is not really an answer yet, but it shows the direction in which to look further for the proper solution. Hopefully there is a way to achieve this "stretching" behaviour without the quirks mode.
EDIT: This answer worked for me. The table is wrapped into an absolutely positioned full-screen div. I guess what it does is the browser first calculates the div's dimensions, and then it knows how the table (and the tr inside it) should be sized. Works with DOCTYPE included, relieving, since I don't want to use the quirks rendering mode.