I am seeing a different behavior between Firefox and Chrome for the same HTML table.
Firefox: the space between rows are equally divided.
Chrome: the space between rows are NOT equally divided.
Could someone tell me what is going on?
jsfiddle.net
<html>
<body>
<table border="1" width="100%">
<tr>
<td rowspan="3">AAA</td>
<td>BBB</td>
<td rowspan="3"CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/></td>
</tr>
<tr>
<td>BBB</td>
</tr>
<tr>
<td>BBB</td>
</tr>
</table>
</body>
</html>
It's a known rendering issue with Chrome/Webkit browsers.
A user provided a solution here: Table cells bad rendering with Google Chrome/Webkit
You need to use close the tag by using <br/> instead of <br>.
In compliant XHTML, all tags need to be properly closed. In this case, instead of closing the tag with </br>, you use the trailing / to do it.
<br></br>
is equivalent to
<br/>
You would do the same thing with an image element:
<img src="..."/>
Had a similar issue where I get 1px space between rows in Chrome but not in other browsers. It was solved when I added the following in the the CSS.
td{
padding: 0px 0px;
position:relative;
}
The key point is setting td to "position:relative". For some reason it solved the issue. Maybe the same could help in this situation.
What if you close the third <td...
<td rowspan="3"CCC
<td rowspan="3">CCC
Related
I'm going though something quite weird. I was working on a chat system with the rows and stuff based on tables, but the formatting kept messing up. I wondered why until I looked at the part of the source which was not working, which looked like this:
<table border="0">
<tbody>
<tr class="chatline" style="background:white;border-style:none;border-top:1px solid grey;padding:0px;">
<td style="background:#A0D7FF;margin:0px;width:1%;"><span style="padding:2px;background:#A0D7FF;color:black;height:100%;border-right:1px solid grey;">kpsuperplane</span></td>
<td style="color:black;background:white;"><span style="color:black;padding:2px;">test</span></td>
</tr>
<tr class="chatline" style="background:white;border-style:none;border-top:1px solid grey;padding:0px;">
<td style="background:#A0D7FF;margin:0px;width:1%;"><span style="padding:2px;background:#A0D7FF;color:black;height:100%;border-right:1px solid grey;">kpsuperplane</span></td>
<td style="color:black;background:white;"><span style="color:black;padding:2px;">test</span></td>
</tr>
</tbody>
</table>
However, when I view it through dev tools in chrome, I get this:
<table border="0">
<tbody>
<span style="padding:2px;background:#A0D7FF;color:black;height:100%;border-right:1px solid grey;">kpsuperplane</span>
<span style="color:black;padding:2px;">test</span>
<span style="padding:2px;background:#A0D7FF;color:black;height:100%;border-right:1px solid grey;">kpsuperplane</span>
<span style="color:black;padding:2px;">test</span>
</tbody>
</table>
Any idea why this is happening? The td's and tr's are automatically removed from the document when they are rendered. And this is not chrome specific. Live code in dreamweaver gives the same puzzling result.
Pic below:
I tested this in jsfiddle and it doesn't seem to be a problem. I also tested it in my own environment (chrome) and it works fine. Try looking for an unclosed tag in code above the table.
Edit:
Paste the code into w3c validator http://validator.w3.org/check. I found 13 errors/warning in the html. Check out the errors and the specific line numbers.
I found that you have div tags within the table, but they are not wrapped by a tr. I'm sure you'll be able to find the rest within the validators output.
According to your jsfiddle: you have simple mistake in HTML structure, here is copy paste;
</tr>
</table>
</div>
<tr class="chatline" style="background:white;border-style:none;border-top:1px solid grey;padding:0px;">
you close table and then you do not open it. ctrl + f and type /table. I suggest you just going carefully through it and make valid html ;)
Sorry it is not an answer, but it won't let me comment.
I tried same code in chrome using Dev Tools it is showing me tr and td's, so I am not what is happening in your case. I enclosed above code into html and body tags.
Here is a simple table example of using table rules=all with cell borders
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Page</title>
</head>
<body>
<table rules="all">
<tr>
<td style="border: red solid 1px;">
Title
</td>
</tr>
</table>
</body>
</html>
In most browsers (including Firefox 3.6) it comes out with a red border round the cell, but in Firefox 5 (and IIRC also Firefox 4) there is no cell border.
Is this a bug in Firefox or is there some variation allowed by the specification?
On a related point, is there any point in using the table rules attribute? It doesn't seem to be deprecated but I can't see it does anything that you couldn't do in CSS. In this case, ASP.NET was generating it automatically otherwise I would never have used it.
There is no spec for what rules="all" actually does yet, so pretty much any behavior is "correct".
That said, the current Firefox behavior is to map rules="all" to some border styles in the collapsed border model. Given the details of that mapping (which are currently in the HTML5 draft at http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#tables ), the observed behavior is correct.
The 'rules' are only displayed if there are other td's to separated it from. And then the style information is partly overwritten by the adjacent cells. If you create a 3x3 table like this
<table rules="all">
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<tr>
<td>foo</td>
<td style="border: red solid 1px;">
Title
</td>
<td>foo</td>
</tr>
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<tr>
</table>
FF5 will draw red lines at the right and bottom of the "Title" cell and the others black. Seems like the style information of upper and more left cells is more powerful.
Hope this helps
Cheers
tannerli
I can't answer the first part - although I was able to make it work by adding some kind of border to the table tag: http://pastehtml.com/view/b35h9852w.html
According to w3schools, you are recommended to only use CSS for this sort of styling (and I agree).
It does appear to be a bug in Firefox, though. I can't find a clear explanation either way.
I am having a coding issue with Chrome and Firefox. The page I'm building has a menu that is placed with an anchor and it shows fine in IE but not Chrome or FF. Here is the code for the anchor:
<TR>
<TD bgColor=#FFFFFF height=31 colSpan=4 noWrap><a name="awmAnchormenu"></a></TD>
</TR>
I was told this, but not sure how to make the change:
This is because you used "name" instead of ID in the Positioning Element (the <a> link you used).
First of all, due to formatting issues I strongly suggest using <div> or <span> instead of <a>.
Second, you have to use ID. Only IE considers "name" to work like an ID, so now your menu does not show in any other browser.
I'm not fixing the HTML itself, but I will fix the problem according to the person who instructed you. Try this:
<TR>
<TD bgColor=#FFFFFF height=31 colSpan=4 noWrap><a name="awmAnchormenu" id="awmAnchormenu"></a></TD>
</TR>
edit: OK, I can't take it. Here's the HTML fixed.
<tr>
<td bgcolor="#FFFFFF" height="31" colspan="4" nowrap="nowrap">
<a name="awmAnchormenu" id="awmAnchormenu"></a>
</td>
</tr>
It's still pretty old-school, but at least it's following some rules.
It's as he said. Replace name with id. Also consider changing a to div or span.
you can try this
<tr>
<td bgColor="#FFFFFF" height="31" colSpan="4" nowrap="nowrap">
<span id="awmAnchormenu"></span>
</td>
</tr>
also , you should not use capital letters for the html tags.
It means you should change <a name="awmAnchormenu"></a> to <span id="awmAnchormenu"></span>.
I've been building a form all day and doing most of my dev in webkit browsers because of the good developer tools. I went to test in IE and I'm having some really strange results with regards to having 3 columns of divs in a row. I can't seem to find a fix. Has anybody seen this issue before (see link below)?
http://65.61.167.68/form/
I suggest avoiding the use of display: inline-block, since IE 6 and 7 don't implement it properly. In this case, you can solve the issue in FF by changing line 33 of your stylesheet. Remove the display: inline-block and instead, float left.
#paydayForm .row .column
{
float:left;
margin-bottom:5px;
margin-right:18px;
margin-top:5px;
width:170px;
}
No answer to your problem, but for this kind of data it's a lot better to use tables instead of divs. Divs can be useful, but not in this case. Check the following example: http://jsfiddle.net/NtXwQ/
<table>
<tr>
<td colspan="2">amount requested</td>
<td rowspan="2">info<br />text<br />here</td>
</tr>
<tr>
<td>first name</td>
<td>last name</td>
</tr>
<tr>
<td>zip code</td>
<td>city</td>
<td>state</td>
</tr>
<tr>
<td colspan="2">date of birth</td>
<td>social security no</td>
</tr>
</table>
Using CSS you can change the width, height, padding, etc. and create the same style you're using now. In the end a setup like this is also a lot easier to maintain. Using divs to display tabular data will only give you headaches :)
Why does the CSS property overflow:scroll; not work in <td>, while overflow:hidden; works well?
<table border="1" style="table-layout:fixed; width:100px">
<tr>
<td style="overflow:scroll; width:50px;">10000000000000000000000000000000000</td>
<td>200</td>
<td>300</td>
</tr>
</table>
From the CSS specs1,2, I can't see why.
You have to wrap it in a div, that will work:
<table border="1" style="table-layout:fixed; width:500px">
<tr>
<td style="width:100px;"><div style="overflow:scroll; width:100%">10000000000000000000000000000000000</div></td>
<td>200</td>
<td>300</td>
</tr>
</table>
Firstly provide desired height to td and then Apply "float: left" property to respective "td" you want scrollbar to appear.
I got something from here!
Andrew Fedoniouk wrote:
This is actually my question:
"One technical reason is that the overflow property does not apply to
tables." - why? What is this reason?
I'm no expert, but I believe this is
just for backward compatibility with
legacy table behavior. You can check
the "automatic" table layout
algorithm in the spec. I'm pretty
sure that this layout algorithm is
incompatible with the overflow
property (or, more accurately, the
layout algorithm will never result in
the need for any value of overflow
except 'visible').
Yep, this is why I am asking. Seems like there are no formal reasons
why or should not be scrollable but seems like
UA vendors reached some silent agreement in this area. So is the
question.
The spec agrees with you with respect
to elements. Table cells are
supposed to respect overflow, although
Mozilla, at least, appears not to do
so. I can't answer your question in
this instance, although I would still
guess the answer is still tied to
legacy rendering.
The main thread is here.
<table border="1" style="table-layout:fixed; width:500px">
<tr>
<td style="width:100px;"><div style="overflow:scroll; width:100%">10000000000000000000000000000000000</div></td>
<td>200</td>
<td>300</td>
</tr>
</table>