In Firefox, "C" is centered, due to the CSS blurb at the beginning. Why does IE7 left-justify it?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<style type="text/css">
td {
text-align: center;
width: 130px;
}
</style>
</head>
<body>
<div style="width: 300px; background-color: #888">
<table>
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td colspan="2">C</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
That happens because you have width: 130px;. Try setting width only for the small cells, for example by:
td.span {
width:auto;
}
<td colspan="2" class="span">C</td>
See example: http://jsbin.com/etoka
You can also do it the other way around - giving a class to the small cells, the whole row, or best: setting the width of the <table>.
always use this for position a object in center in your page
this feature is worked in all popular browser like IE FF Safari Chrome Opera
<center> This is my centered text</center>
please give me vote if your problem is solved
Related
Something i'd never noticed before, but it seems that in Chrome/Firefox (and probably Opera/Safari, i've not checked those specifically) using a strict doctype prevents table rows from being displayed smaller than a value that i'm unable to determine the calculation of.
The following document displays as one might imagine in IE7 with all table rows around 8px in height to match the height of the content (which is probably incorrect knowing IE), whilst in Chome/Firefox the rows are all 23px tall. No combination of border-collapse, padding, margin etc i've found will allow the rows to be smaller than 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" xml:lang="en" lang="en">
<head>
<style>
span {
font-family: Verdana;
font-size: 8px;
line-height: 8px;
}
</style>
</head>
<body>
<table cellspacing="1" border="1">
<tr>
<td><span>One</span></td>
<td><span>Two</span></td>
<td><span>Three</span></td>
</tr>
<tr>
<td><span>Four</span></td>
<td><span>Five</span></td>
<td><span>Six</span></td>
</tr>
<tr>
<td><span>Seven</span></td>
<td><span>Eight</span></td>
<td><span>Nine</span></td>
</tr>
</table>
</body>
</html>
Setting the doctype to transitional causes the table rows to display around 8px in height as expected.
Does anyone have any idea what's causing this apparent minimum row height?
Cheers for any info.
You need to set the line-height on the <td> aswell as the <span>
td{line-height:8px;}
Heres a better explination:
View the code below in your browser.
Notice that even though we've set the font-size of the second set of <span> tags the actual table cells are the same size.
This is because the font size of the table cells IS still the same. We've only changed a child element of them, ie the <span>
setting body{font-size:8px} would work fine as the table will inherit this value.
You can also use it directly on the table ie table{font-size:8px}, or you can use it on the cell as posted above.
<!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">
<head>
<style>
body{}
td{}
span {font-family: Verdana;}
span.small{font-size:8px;}
</style>
</head>
<body>
<h1>Default font size</h1>
<table cellspacing="1" border="1" cellpadding="0">
<tbody>
<tr>
<td><span>One</span></td>
<td><span>Two</span></td>
<td><span>Three</span></td>
</tr>
<tr>
<td><span>Four</span></td>
<td><span>Five</span></td>
<td><span>Six</span></td>
</tr>
<tr>
<td><span>Seven</span></td>
<td><span>Eight</span></td>
<td><span>Nine</span></td>
</tr>
</tbody>
</table>
<h2>8px font size</h2>
<table cellspacing="1" border="1" cellpadding="0">
<tbody>
<tr>
<td><span class="small">One</span></td>
<td><span class="small">Two</span></td>
<td><span class="small">Three</span></td>
</tr>
<tr>
<td><span class="small">Four</span></td>
<td><span class="small">Five</span></td>
<td><span class="small">Six</span></td>
</tr>
<tr>
<td><span class="small">Seven</span></td>
<td><span class="small">Eight</span></td>
<td><span class="small">Nine</span></td>
</tr>
</tbody>
</table>
</body>
</html>
Hope this helps
I expected the middle column to be 3 times as wide as the left and right columns. Instead of the withs appearing as specified 200,600, 200 (left to right), the widths appeared as if I specified them in this order: 200, 200, 600. In other words, the LAST column appeared 3 times as wide as the first two.
Why? (This is my primary question)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Left</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>
<body>
<table style="table-layout: fixed; width:1000px;">
<colgroup>
</colgroup>
<colgroup>
<col width="200px">
<col width="600px">
<col width="200px">
</colgroup>
<tr>
<td>1 </td>
<td>2 </td>
<td>3 </td>
</tr>
</table>
</body>
</html>
Also, does the following non table approach have any advantages? (This is a secondary question that has been answered)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Left</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="Untitled_1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div style="width:1000px;">
<div id="masthead">
</div>
<div id="top_nav">
</div>
<div id="container">
<div id="left_col">Left
</div>
<div id="right_col">RIght
</div>
<div id="page_content">Page Content </div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
CSS:
#left_col {
width: 200px;
margin:0px;
float: left;
}
#page_content {
margin-left: 200px;
margin-right: 200px;
width: 600px;
}
#right_col
{
width: 200px;
float: right;
}
You have an extra set of colgroup tags with nothing in them. I guess the browser is inserting one (empty) column definition for that and then three more in the second colgroup, because the browser is trying its best to do what you want. Remove the empty colgroup tabs and it'll work as expected.
The second, div-based model has advantages in that its both more semantic and will likely render faster. Those involved in standards will tell you that it is important for your HTML to be semantic. That is, each element has a distinct meaning and you should use the appropriate tag for your meaning. This is mostly to aid in the use of screen readers.
Tables imply your data is somehow tabular. In this case, you're using tables as a mechanism for layout. According to current best practices, this is considered a no-no. Browsers struggle more to render tables and often you see a visual "filling in" of the data, this way. Check out http://havenworks.com/ for an example. (Caution: gruesomely ugly).
Assuming your targeting a html4 based audience (ie: not html5) then the div based layout mechanism makes the most sense.
Hope it helps!
Would something like this work for what you are trying to do?
<table width="100%">
<tr>
<td width="25%"> </td>
<td width="50%"> </td>
<td width="25%"> </td>
</tr>
</table>
Try this for a fixed width:
<table border="1" width="1000">
<tr>
<td width="200">A</td>
<td width="600">B</td>
<td width="200">C</td>
</tr>
</table>
I am trying to construct a simple, one-column layout. I want the top two rows to have smaller, fixed heights. The third row should expand to fill the rest of the page. Here is my current source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
html, body
{
height:100%;
width:100%;
border:0px;
margin:0px;
}
</style>
</head>
<body>
<table style="width:100%;height:100%;" cellpadding="0" cellspacing="0">
<tr>
<td style="height:50px;background:red;">Header 1</td>
</tr>
<tr>
<td style="height:10px;background:blue;">Header 2</td>
</tr>
<tr>
<td style="background:green;">Content</td>
</tr>
</table>
</body>
</html>
This works wonderfully in Safari, Firefox, and Opera. However, it fails miserable in both IE6 and IE7. In these two browsers, the first two rows are rendered much bigger than their specified heights. Not only that, but they actually dynamically resize with the height of the browser window. It's like IE is converting the constant pixel height to a percentage height.
It is important to me that the browser window not display scrollbars unless the content of the third row is big enough to require it. Setting the height of the 3rd <td> to 100% will cause these scrollbars to always appear since the height of that row will actually be set equal to the height of the entire table (it will be 100% of its containing element).
Removing the doctype declaration and reverting to quirks mode seems to make the issue go away in IE, but I need to use HTML 4.01 transitional as that is what all of the other existing pages in this application expect.
Here is an article for you that tells you how this can be done. I just tested the example that they provided in IE 6 and it works.
It appears that you must use the height property of the table, and NOT do it via a style attribute.
How about adding position:fixed to the table? I tested it in IE8 and seemed to work.
Set the height of your last td to 100%:
<tr>
<td style="background:green;height:100%;">Content</td>
</tr>
Does this work:?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
html, body
{
height:100%;
width:100%;
border:0px;
margin:0px;
}
</style>
</head>
<body>
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td height="50" style="background:red;">Header 1</td>
</tr>
<tr>
<td height="10" style="background:blue;">Header 2</td>
</tr>
<tr>
<td style="background:green;">Content</td>
</tr>
</table>
</body>
</html>
If you're using this to layout a page why not use div's instead?
This sort of works:
<style>
.outer {
position:relative;
height: 100%;
width: 500px;
background-color: blue;
}
.top {
height: 30px;
background-color: red;
width: 100%
}
.middle {
height:30px;
background-color: green;
width: 100%
}
</style>
<div class="outer">
<div class="top">
content1
</div>
<div class="middle">
content2
</div>
content3
</div>
I have a table inside a cell, and that table is "getting out" of the cell, as see in this screenshot:
alt text http://img.skitch.com/20090120-pe4iykdqpymqaxr96tpubiqn7j.png
I see this on Firefox. Is this "normal". How can I fix this?
The code:
<!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" xml:lang="en" lang="en">
<body>
<table border="1">
<tr>
<td>
<table border="1" style="margin-left: 3em; width: 100%">
<tr>
<td>gaga</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
The inner table is being told to be as wide as its container (width: 100%), and then to move 3ems away from its left edge: (margin-left: 3em)
Switch the innermost TD to have padding-left which might help.
But the standard response here is: "oh god why are you doing nested tables you bad bad man!!11"
This is happening because you are setting "margin-left: 3em", and it is pushing the sub-table outwards.
untested: take out 'margin-left' and use 'padding-left' instead.
or
You could indent your cells value without using a nested table, by adding the padding-left to your parent tables 'td'.
This is because you're giving the table width 100%. It adds the margin onto this, such that the element has >100% width. If you want to get around this, add a div or something above the nested table with a margin: 3em and you can leave the width of the table at 100%.
EDIT: In response to Jobo's comment to his answer, tds don't support margins; however, a padding-left: 3em should work instead.
Try 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" xml:lang="en" lang="en">
<body>
<table border="1">
<tr>
<td style="padding-left: 3em;">
<table border="1" style="width: 100%;">
<tr>
<td>gaga</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="1">
<tr>
<td>
<table border="1" style="margin-left: 3em; width: 100%">
<tr>
<td>gaga</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Changing margin-left from the TABLE element to padding-left on parent TD (like Jobo said)
Just remove the "width" attribute of that table and you should see that it will stay within the cell, even with long text.
This is not intended to be an attack, but rather an aid to help you be a better developer:
There is NEVER a need to have sub tables.
if you are going to use CSS then do it right, one or more external files.
This will help you develop as a web developer - think about how you want to structure the page and then use the correct markup to produce that structure - once the markup is valid then you can worry about styling.
Kindly read the following code as an example (pay attention to the "padding-bottom" of 2nd table row):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><title>test</title></head>
<body>
<table style="height:300px;width:200px;background:#660000; float:left">
<tr><td style="height:20px">first row</td></tr>
<tr><td style="height:180px;padding-bottom:20px;">second row</td></tr>
<tr><td style="height:180px;">third row</td></tr>
</table>
<table style="height:300px;width:200px;background:#006600; float:left">
<tr><td style="height:20px">first row</td></tr>
<tr><td style="height:180px;">second row</td></tr>
<tr><td style="height:180px;">third row</td></tr>
</table>
</body>
</html>
I expect that height of two tables should be the same in both IE and FF.
However, FF renders it as expected, but in IE, the first table is 20px higher than the second table. What should I do in order to make it render like FF?
I am also curious about what makes the difference.
IE and Firefox have different rules around how the box model works.
The best way to think of this is that IE is taking the set height of that cell then adding the padding to it. This results in a cell height of 200px.
Whereas Firefox is taking the height of the content of the cell, then applying the padding to it. Because the content height + padding does not exceed the set height of the cell, the cell is not expanded.
You might try playing with a couple of doctypes to see if you can get them to match up, but I dont think IE 7 and FF3 match up for this situation regardless of DOCTYPE. Also, look into possibly using a reset style sheet to get the default margin's, font sizes, etc to match.
I took your test and did the following to make it looks the same in both browsers:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style>
* {margin:0px; padding:0px;font-family: arial;font-size:14px;}
span { border: solid 1px black; margin-top:4px;display:block;}
.first { border:solid 1px blue; }
.second {border:solid 1px orange; }
.third {border:solid 1px yellow;}
.paddit {padding-bottom:10px;height:180px;}
</style>
</head>
<body>
<table style="width:200px;background:#660000; float:left">
<tr valign="top">
<td class="first" style="height:20px;"><span>first row</span></td>
</tr>
<tr valign="top">
<td class="second paddit"><span>second row. This is a long test to see what happens when a lot of content is placed in here; and I need more content.This is a long test to see what happens when a lot of content is placed in here; and I need more content.This is a long test to see what happens when a lot of content is placed in here; and I need more content.</span></td>
</tr>
<tr valign="top">
<td class="third" style="height:180px;"><span>third row</span></td>
</tr>
</table>
<table style="width:200px;background:#006600; float:left">
<tr valign="top">
<td class="first" style="height:20px;"><span>first row</span></td>
</tr>
<tr valign="top">
<td class="second" style="height:180px;"><span>second row</span></td>
</tr>
<tr valign="top">
<td class="third" style="height:180px;"><span>third row</span></td>
</tr>
</table>
</body>
</html>