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.
Related
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>
So I am writing a css page for my class, and I noticed that the style which I applied to span is not applying at all, so I went to http://validator.w3.org/ to check what I did wrong and it gave me this error message
"Line 32, Column 6: Start tag span seen in table."
This is my line 32
<span><tr><td>Mars needs moms</td><td>$150,000,000</td><td>$38,992,758</td><td>$130,503,621</td><td>2011</td></tr></span>
Here is the code for that particular style
span{background-color=:#666;font-weight:bold;color:white;}
Basically my goal is to make this table haveevery other row in the table with a background color being black with the text being white
This is the full code, incase the error made which isn't applying this style is somewhere else. there are other styles in there which don't apply to anything yet, as this is not finished yet
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lowest Grossing Movies of all time</title>
<style>
span{background-color=:#666;font-weight:bold;color:white;}
p{text-decoration:underline;line-height:200%;}
h1{text-align:center;font-size:125%;}
table{border-collapse:collapse;}
th,td{padding:25px;}
</style>
</head>
<body>
<h1> Lowest Grossing Movies of All Time </h1>
<table border="1">
<tr><th>Title</th><th>Production Budget</th><th>World Wide Gross</th><th>Net Loss</th> <th>Release Year</th></tr>
<span><tr><td>Mars needs moms</td><td>$150,000,000</td><td>$38,992,758</td> <td>$130,503,621</td><td>2011</td></tr></span>
<tr><td>The 13th Warrior</td><td>$160,000,000</td><td>$61,698,899</td><td>$129,150,551</td><td>1999</td></tr>
<span><tr><td>The Lone Ranger</td><td>$225,000,000</td><td>$243,377,083</td><td>$103,311,459</td><td>2013</td></tr></span>
<tr><td>R.I.P.D.</td><td>$130,000,000</td><td>$66,627,120</td><td>$96,6865,440</td><td>2013</tr>
<span><tr><td>John Carter</td><td>$250,00,00</td><td>$282,778,100</td><td>$108,610,950</td><td>2012</td></tr></span>
</table>
</body>
</html>
The biggest problem you're facing is that there are limited elements that are valid children of the HTML table element, these are:
colgroup,
caption,
thead,
tfoot,
tbody, and
tr
So removing the span elements from the table solves that problem. Also, you'd forgotten to close one of the td elements (you closed the tr, but forgot the td); this is why readable HTML is easier to maintain (it's simply easier to see the code, and omissions, when it's indented and white-spaced).
Incidentally, using your original HTML, had you used your browser's developer tools (such as Web Inspector under Chromium, or Firebug under Mozilla), you'd have been able to inspect the DOM, which would've shown you the brower's (unpredictable and unreliable) reordering of the HTML in order to produce a valid document). For example, Web Inspector shows:
JS Fiddle 'source' for above image.
Note the three span elements moved before the table element, from the table itself.
Your corrected HTML:
<h1> Lowest Grossing Movies of All Time </h1>
<table>
<tr>
<th>Title</th>
<th>Production Budget</th>
<th>World Wide Gross</th>
<th>Net Loss</th>
<th>Release Year</th>
</tr>
<tr>
<td>Mars needs moms</td>
<td>$150,000,000</td>
<td>$38,992,758</td>
<td>$130,503,621</td>
<td>2011</td>
</tr>
<tr>
<td>The 13th Warrior</td>
<td>$160,000,000</td>
<td>$61,698,899</td>
<td>$129,150,551</td>
<td>1999</td>
</tr>
<tr>
<td>The Lone Ranger</td>
<td>$225,000,000</td>
<td>$243,377,083</td>
<td>$103,311,459</td>
<td>2013</td>
</tr>
<tr>
<td>R.I.P.D.</td>
<td>$130,000,000</td>
<td>$66,627,120</td>
<td>$96,6865,440</td>
<td>2013</td> <!-- you omitted a closing </td> tag here -->
</tr>
<tr>
<td>John Carter</td>
<td>$250,00,00</td>
<td>$282,778,100</td>
<td>$108,610,950</td>
<td>2012</td>
</tr>
</table>
Using CSS:
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #000;
}
/* using ':nth-child(odd)' to style the 'td' elements
of the alternate/odd rows of the table */
tbody tr:nth-child(odd) td {
background-color: #ffa;
}
JS Fiddle demo.
References:
<table>.
:nth-child().
In most modern browsers this could be achieved with css:
tr:nth-child(even) {
background-color:#666;
font-weight:bold;
color:white;
}
No span tags required. (Remove them)
JS Fiddle: http://jsfiddle.net/uB2GR/
You've placed <span> elements between two <tr> elements. This is not valid HTML. You need to place your entire <span> inside a table cell.
<tr><td><span>Some stuff</span></td><td><span>More stuff</span></td></tr>
if you're doing this for styling purposes there's probably a better way with classes applied to the <td> elements
I am setting up a mobile iPhone Intranet site with iWebKit. Most of the things work perfectly, except I cannot get formatting of my table right using CSS.
What I have in my HTML (actually ASP since the HTML is created using queries on a database) is the following:
<div id="content">
<ul class="pageitem">
<li class="textbox">
<table class="mytable">
<tr>
<th>Type</th>
<th>Value1</th>
<th>Value2</th>
<th>Value3</th>
<th>Value4</th>
</tr>
<tr>
<th>First type</th>
<td>123</td>
<td>456</td>
<td>789</td>
<td class="targetok">159</td>
</tr>
</table>
</li>
</ul>
</div>
And I've added the following to iWebKit's CSS file:
.mytable {
border:1px solid black;
border-collapse:collapse;
font-family: Helvetica;
color:#000000;
font-size:20px;
width:100%;
height:35px;
padding:5px;
text-align:center;
-webkit-text-size-adjust:none;
}
.targetok {
background:#80FF80
}
I've tried several combinations (also adding table, tr, th and/or td to .mytable) but the table never seems to be formatted. It is always shown without borders, small font, not colored, ...
Since I don't know much about CSS I also quickly followed the CSS introduction on W3SCHOOLS. As far as I can see the syntax is correct.
I seem to be missing something, but can't find it. Is something wrong in my syntax? Or does iWebKit prevent you from adding your own CSS rules?
To force refreshing you can use this code:
<link href="your.css?1" rel="stylesheet" type="text/css" />
?1
Where 1 is your version, Safari will retrieve this css because it's like php request.
Or you can add inline styles in <style></style> tag
Found the cause.
Apparently, iPhone's Safari does not refresh the CSS file when I change it.
However, I see no clean way on how to force a refresh on the CSS file. Will enter this as a new question.
In both IE8 and Firefox I am experiencing the following:
I have a panel that is 30px in height, within this panel I have a single row table with 30px in height. When it displays on the browser window the table does not fill the height of the panel (there is a small amount of the panel showing on the top and bottom. How do I correct this so that the table takes up the entire height of the table?
HEADERPANELTABLE CSS:
table.masterHeader
{
background-color:transparent;
border-collapse:collapse;
height:30px;
margin-left:auto;
margin-right:auto;
margin-top:0;
margin-bottom:0;
padding:0;
display:block;
width:820px;
}
HEADERPANEL CSS:
.HeaderPanel
{
background-color:#0079d0;
height:30px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
margin-top:0px;
padding:0;
width:820px;
}
SPACER CSS:
div.Spacer
{
background-color:transparent;
height:30px;
}
MAINPANEL CSS:
.MainPanel
{
background-color:#6699cc;
height:700px;
margin-left:auto;
margin-right:auto;
width:820px;
}
HTML CODE:
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div class="Page">
<asp:Panel ID="HeaderPanel" CssClass="HeaderPanel" runat="server">
<table class="masterHeader" cellspacing="0" cellpadding="0">
<tr>
<td class="Account"></td>
<td class="Name"></td>
<td class="Spacer"></td>
<td class="CompanyName"></td>
<td class="Logout"></td>
</tr>
</table>
</asp:Panel>
<asp:RoundedCornersExtender ID="HeaderPanelRounded" TargetControlID="HeaderPanel" runat="server" Radius="3" Corners="Bottom"></asp:RoundedCornersExtender>
<div class="Spacer"> </div>
<asp:Panel ID="MainPanel" runat="server" CssClass="MainPanel">
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
</asp:Panel>
</div>
<asp:RoundedCornersExtender ID="rceMainPanel" runat="server" TargetControlID="MainPanel" Radius="3">
</asp:RoundedCornersExtender>
Have you looked at the page in something like Firebug, where you can look at each DOM element, see the attributes (like margin, padding, and so on). That way you might be able to see exactly where that extra spacing is coming from, and what styling attributes are being applied to each element.
set the cellspacing to 0
<table cellspacing="0">
<tr>
<td></td>
</tr>
</table>
You haven't posted code (HTML or CSS) or stated what browsers you are seeing this in, so difficult to know for sure. Some suggestions:
make sure your table has zero margins
make sure the panel doesn't have any padding
make sure cell spacing is zero
make sure some other element isn't blocking the table
make sure your css styling is not being over-ridden somewhere
If you don't have it already, you should install the Firebug addin https://addons.mozilla.org/en-US/firefox/addon/1843/ for Firefox. This makes it extremely easy to inspect the DOM and CSS styling applied.
Because an ASP:Panel breaks up the panel into div tags and with rounded corners it add anothe 1px border to the panel which is placed after the table has been placed. In order to fix this the table had to be placed within a div tag and float the div above the panel.
I notice that you aren't doing anything about your table borders. Could this be the gap you are seeing? If your borders have any width for any reason then they could be showing which might be giving you the effect in question.
I made a quick jsfiddle proof of concept based on what I assume your outputted HTML will look like in its simplest form. I'm not familiar with the RoundedCornersExtender control though and I suspect that is modifying the HTML of the main div.
http://jsfiddle.net/tAgp3/1/
You can see that this simplified form works but I assume that the rounded corners is trying to do some nasty tricks with embedding extra DIVs with background to do rounded corners. These could be what is causing your additional padding.
Again I ask if you can post the actual html outputted to the browser so we can see if this is the case or not.
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.