I can't get the border width to be 3px solid green in firefox, even though it is working in Chrome. How can I fix this? My code is below.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style>
td {border: 3px solid green; background:blue;}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
To eliminate the spaces and avoid double borders between the cells you have to collapse them, like:
table {
border-collapse: collapse;
}
DEMO
Also it's a good idea to use some kind of CSS discrepancy eliminator, which can save you a lot of time and helps avoid situations like this - Normalize CSS or CSS Reset
here is the jsfiddle (http://jsfiddle.net/jw5Gg/1/) i added padding to give it some space. but really it had the border you just needed content. i hope this helped.
Related
I'm trying to get all of these images to line up in a table. For some reason it is adding extra space at the bottom of the cells. I've tried all of the different solutions that is suppose to fix this spacing issues.
What it's supposed to look like
What I'm Getting
Here's a look at my HTML5 code as well:
<!DOCTYPE html> <html>
<head>
<title></title>
<meta charset = "utf 8">
<style>
table{
border-collapse : collapse;
border-spacing : 0;
border:0;
}
tr,td{
border-collapse:collapse;
padding : 0;
border : 0;}
</style>
</head>
<body>
<table>
<tr>
<td><img src="tableImages\ul.gif" alt ="1,1"></td>
<td colspan = "2"><img src ="tableImages\top.gif" alt = "1,2"></td>
<td><img src="tableImages\ur.gif"alt="2,2"></td>
</tr>
<tr>
<td rowspan = "2"><img src="tableImages\left.gif"alt="2,1"></td>
<td><img src="tableImages\1.gif"alt="2,1"></td>
<td><img src="tableImages\2.gif"alt="2,1"></td>
<td rowspan = "2"><img src="tableImages\right.gif"alt="2,1"></td>
</tr>
<tr>
<td><img src="tableImages\3.gif"alt="2,1"></td>
<td><img src="tableImages\4.gif"alt="2,1"></td>
</tr>
<tr>
<td><img src="tableImages\ll.gif" alt ="1,1"></td>
<td colspan = "2"><img src ="tableImages\bottom.gif" alt = "1,2"></td>
<td><img src="tableImages\lr.gif"alt="2,2"></td>
</tr>
</table>
</body> </html>
I've come to the realization that the problem lies within HTML5, because if I remove <!DOCTYPE html> (meaning that the browser won't read it in 5) I don't have this problem.
If anyone could help me, Thank you very much!
So after some fiddling around to reproduce the problem, i found what is wrong (here a JSFiddle of the problem).
an image is by default displayed as a inline-block, this means that the height is calculated according to the font-size. It is expecting a font, so it has a font-size by default (see this answer for more info). There 2 ways of fixing this.
Make the image display as a block-element
Simply change the property display to block
img {
display: block;
}
JSFiddle
Explicity note that there is no font inside the cell
Simply change the font-size to 0
td {
font-size: 0;
}
JSFiddle
Note that i used the first <td> only as example, this should work with all of them
ie10 is not showing fine border over colspan.
It is showing well on other browser, but not on IE 10.
I'll post my code below.
HTML CODE:
<table>
<thead>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">2</td>
<td colspan="4">3</td>
<td rowspan="2">4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td colspan="2">7</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td colspan="3">4</td>
<td>5</td>
</tr>
</tbody>
</table>
CSS CODE:
table tr td {
border: 1px solid black;
width: 100px;
}
table {
border-collapse:collapse;
}
border under 7 is gone. How can I show it?
here is example on jsfiddle :
http://jsfiddle.net/H4z7Q/
ADD: If some event occurs in ie10, border come back to normal.
You can use table inline style stats. instead of border-collapse:collapse;
<table cellpadding=0 cellspacing=0>
will count as same effect.
but will return and will chrice ur problem
The markup violates the HTML table model, as you can see by checking it with http://validator.w3.org which says, referring to the first row: “Table column 6 established by element td has no cells beginning in it”.
So all bets are off. Modify the table structure so that it conforms, or try to achieve the desired layout using other tools than a layout table.
Our build software has a web interface that reports build status using a table. When a build is pending, it outputs the last log message in an inner table. These log messages can be very, very long.
This is a distilled version of the HTML emitted:
<html>
<head>
</head>
<body>
<table id="StatusGrid" class="SortableGrid">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr class="buildstatus">
<td colspan="11">
<table>
<tr>
<td>hello</td>
<td>...........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
If you display this HTML in your browser, you have to vertically scroll to see the entire contents of the table. I don't want this. I never want the table to extend outside the vertical width of the browser window. I don't mind truncating/clipping the extra-long text in the inner table.
I tried word-break: break-all, but that only works in Chrome. I have to support IE 9 and the latest versions of Chrome and Firefox.
The final wrinkle: I have to use CSS to fix this. I only have access to the application's stylesheet, and not the HTML.
What do you think? Possible?
Try putting a fixed height on the td and set its overflow or overflow-y to hidden;
tr.buildstatus td{
height: 500px;
width: 600px;
overflow:hidden; /* or overflow-y:hidden; */
}
This should work for you. You may have to adjust height/width to your taste.
tr.buildstatus tr td + td {
height:100px;
width:200px;
overflow:hidden;
}
table {
table-layout:fixed;
width:600px;
height:200px;
}
Live example: http://jsfiddle.net/R8nmk/
Try overflow: hidden.
The overflow is clipped, and the rest of the content will be invisible.
More about overflow here.
Can anybody tell me why the outer div is not expanding to the page width? Is there any solution for this without removing the doctype declaration(If I remove doctype, it is expanding) ? Also my page is in js disabled mode.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<div style="border:1px solid #ff0000;">
<div>
<table class="storeList">
<thead>
<tr>
<th>
Country Code
</th>
<th>
Store ID
</th>
<th>
Store Name
</th>
<th>
TownName
</th>
<th class="actions">
Store Operation
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
TEST
</td>
<td>
TEST
</td>
<td>
hghjgdkjvhkjhvhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhjjjjjjjjjjjjjjjjjjjjhghjgdkjvhkjhvhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhjjjjjjjjjjjjjjjjjjjjdhgfdhf
</td>
<td>
TEST
</td>
<td class="actions">
TEST ACTIONS
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
This answer works, promise!
To your outermost div (<div style="border:1px solid #ff0000;">), add either:
float: left, or;
display: inline-block.
If you would like to see demos of these two fixes, check these older answers I provided:
How to fix table going outside of div tag in IE6 & 7?
Expand a div width to the width of the sibling table which has a lot of rows and causes vertical scroll
It would probably be because browsers apply their own default style, which include margins and padding on various elements. The body tag probably has default padding so you'd need to add a "reset CSS" file to your page to reset these defaults or just try:
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
In the head of your page. Also, just to note, it looks like you're using tables for layout. This is a big no no in todays modern world of CSS:
http://www.hotdesign.com/seybold/
http://www.mardiros.net/css-layout.html
Why not use tables for layout in HTML?
You can also set your table to 100% width to cover the area provided by the div
table { width: 100%; }
The actual table is a lot larger than the mock-up one that I am going to show you but this mock-up one does explain the problem. Please go to http://www.monteandjanicechan.com/test_table.cfm
The thickness of the grid lines in the table are coming up the way I want in the HTML version. You can do a View Source to see the actual HTML stuff that gets generated. Now, I put these HTMl codes within the cfdocument tag with format="pdf"; please go to http://www.monteandjanicechan.com/test_table_pdf.cfm. You will see the inconsistent thickness of the grid line for sneezing and for flu. To further illustrate my point, I removed the background colors and generate a PDF; please go to http://www.monteandjanicechan.com/test_table_pdf_nocolor.cfm. The thickness of the grid lines is back to normal.
This leads me to believe that the background color of one cell somehow goes over to the cell right next to it and cover up the border. Here are the strange things:
1) This is ONLY happening in rowspan and ONLY happening from the second row on to the rest of the rowspan. For example, first Sneezing is okay but the border of the second sneezing is not correct; the first Flu is okay but the borders of the second and the third Flu are not correct.
2) The background color does NOT cover the border of its own cell at all; it only cover the border of the cell right next to it.
My question is, how can I fix this issue?
Any suggestions and pointers are greatly appreciated.
The thickness varies in the HTML version as well. I think the problem is with your CSS rules.
This works how I think you want, although it could probably be improved.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test Table</title>
<style type="text/css">
td {
border-top: 1px solid black;
border-left: 1px solid black;
}
.right { border-right: 1px solid black; }
.bottom {border-bottom: 1px solid black; }
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="5">
<tr>
<td class="a_style">Name</td>
<td class="a_style">Problem</td>
<td class="right">Treatment</td>
</tr>
<tr>
<td class="b_first">Jane Doe</td>
<td class="c_first" style="background-color:#ffff99">Cough</td>
<td class="right" style="background-color:#ffff99">Vitamins</td>
</tr>
<tr>
<td class="b">John Doe</td>
<td class="c" style="background-color:#99FF99">Sneezing</td>
<td class="right" rowspan="2" style="background-color:#99FF99">Nose Spray</td>
</tr>
<tr>
<td class="b">Joe Schmo</td>
<td class="" style="background-color:#99FF99">Sneezing</td>
</tr>
<tr>
<td class="b">Joe Six Pack</td>
<td class="c" style="background-color:#cccccc">Flu</td>
<td class="right bottom" rowspan="3" style="background-color:#cccccc">Flu Shot</td>
</tr>
<tr>
<td class="b">Joe The Plumber</td>
<td class="" style="background-color:#cccccc">Flu</td>
</tr>
<tr>
<td class="bottom">Joe Doe</td>
<td class="bottom" style="background-color:#cccccc">Flu</td>
</tr>
</table>
</body>
</html>