Sat, 2004-11-27 00:09
Hi,
just another time I want to strangle somebody to death :twisted: :twisted: :twisted:
Ok, got my page nearly done, tested it outside my lovely IDE in IE --> works, looks fine, in Mozilla --> AAAARRRGGGGHHH !!!
Ok, simple task, I thought, centering a table inside a table cell. I assigned to following css-class to the containing tablecell:
.alpha
{
text-align : center;
vertical-align : middle;
}
Ahh, yeah forgot, I am working with an external css-file.
The IE centers the table as it was my idea. The Mozilla leaves the table left aligned. What is wrong. I know about those lousy browser-incompatibilities, but this is a hard thing.
Does anybody know what I can do to get that table aligned in both browsers ?
I am thinking about throwing css out of my site, coding old-style html again. So much trouble with that stuff.
Thanx in advance
alionsonny
PS: Another thing, I recognized Mozilla also likes it not, if one puts html-comments in the css-file.... strange...
Sat, 2004-11-27 00:21
#1
Re: Alignment of a table inside a table cell
alionsonny wrote:
Does anybody know what I can do to get that table aligned in both browsers ?
Don't give up so quick! Try setting the text-align of the parent object to center. I'm pretty sure that works.
alionsonny wrote:
PS: Another thing, I recognized Mozilla also likes it not, if one puts html-comments in the css-file.... strange...
Not strange at all. The CSS file is not a HTML file, after all!
Sat, 2004-11-27 00:25
#2
Alignment of a table inside a table cell
Yeah, thanx for your kind words. But I don't know what you mean. The parent object of the cell is a row, and unfortunately I do not want everything in that row centered.
What to do now ?
Thanx
alionsonny
Sat, 2004-11-27 01:06
#3
Alignment of a table inside a table cell
alionsonny, are you working in "Standards mode" or "Quirks mode" have you got a DTD in your page?
You shouldn't be having any trouble , try setting the nested table margins to auto that should center for compliant browsers, your other rules for .alpha should take care of the rest.
Hugo.
Sat, 2004-11-27 01:31
#4
Uhmm...
Ok, I noticed that I forgot the doctype :oops:
But after I added one:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//DE">
it looks even worse. Now Mozilla kills all cellpaddings inside nested tables, squashes the maintable to the height of it's content and some more. It's getting worse with each step I take in css. :-&
What did you mean with standard or quirks mode, never heard about this before. Is that important ? Got my pure-html-sites running without. Do I need it for css-use ? :roll: :roll: :roll: And how DO I work in each of those.
Thanx in advance
alionsonny
Sat, 2004-11-27 01:42
#5
Alignment of a table inside a table cell
Partly success: The tip of Hugo with those margins solved the centering problem horizontally, but now the vertical alignment is trashed, means the table resides at the top instead from being vertically centered. This is a problem since my inner table that was usually the height of the browser-window is squashed together after inserting the Doctype. Looks pretty weird now after the table is only the half of the browserwindow and is pushed to the top. But no, this doesn't look good.
Is there any way to get the vertical alignment fixed, or at least to get the inner table to its size of 100% again ?
Thanx for the help
alionsonny
BTW: IE shows the table correctly sized, only mozilla shows it squashed.
Sat, 2004-11-27 14:10
#6
Alignment of a table inside a table cell
Alionsonny,
for an understanding of quirks v standards mode have a read of this link, where you will also find a link to W3C official list of full DTDs that can be used, as at the moment the one your using is not a full one and will be rendering pages in quirks mode still.
When the page is in full standards mode then see how things behave in FF if the CSS property "vertical-align" is still a problem you may need to use "Valign="middle" " in the html; I'm not sure if CSS vertical-align is that well supported (thought it was for inline element alignment anyway, although I have seen it in reference to aligning tables?)
If it still proves problematical post some code for someone to check through.
Hugo.
Sat, 2004-11-27 14:57
#7
Alignment of a table inside a table cell
Hi Hugo,
in your posting you mentioned a link to that quirks-stuff, which I do not understand by now. But you posted no link. So where to go ?
Greetinx
alionsonny
Sat, 2004-11-27 15:45
#8
Alignment of a table inside a table cell
Sat, 2004-11-27 16:36
#9
Alignment of a table inside a table cell
Thanx wisbin,
the links were of great help. Still my problems persist, since I have no idea what to do now.
Hugo mentioned that I shall post some code. This is difficult since I generate my pages completely with PHP. I will try to strip some code from the generated HTML. Here we go:
First the HTML (the important part):
[<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//DE">
<HTML>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="de">
<meta name="generator" content="alion PHP Generator V1.02">
<meta name="progid" content="alion.generic.document">
<title>alionsonny - Homepage</title>
<link rel="stylesheet" href="styles.css" TYPE="text/css" MEDIA=all>
</head>
<body>
<table class="mtab">
<tr>
<td>
<table width="700" class="conttab">
<tr>
<td>
THIS IS JUST A TEXT FOR A TEST !!!
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</HTML>
and now the styles.css (a part)
.mtab
{
table-layout : fixed;
padding : 10;
background-color : #0080C0;
text-align : center;
vertical-align : middle;
margin-left : auto;
margin-top : auto;
margin-right : auto;
margin-bottom : auto;
height : 100%;
empty-cells : show;
}
.conttab
{
border-collapse : seperate;
table-layout : fixed;
empty-cells : show;
border-spacing : 0;
padding : 8;
background-color : #0080C0;
border : 1px solid;
border-color : #AAE3FF;
margin-left : auto;
margin-top : auto;
margin-right : auto;
margin-bottom : auto;
width : 700;
height : 100%;
}
Ok, that it is. I want to achieve one of the following behaviours:
1. (preferred): The inner table should be horizontally(works) and vertically (works not) aligned inside the containing maintable.
2. (not so much preferred): The inner table should be horizontally aligned (works) and stretched to 100% of the space inside the maintable (minus padding...for sure).
Ok, what am I doing wrong ? What can I do ? Any tips. Again: In IE everything seems to look fine, but Mozilla shows the true picture, I think.
Greetinx and thanx
alionsonny
Sat, 2004-11-27 17:29
#10
Alignment of a table inside a table cell
Arghhh, UPDATE:
Now I replaced the Doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//DE">
with a Doctype:
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
I was happy, because now it looked fine in Mozilla, but guess what: Now it looks in IE as it looked in Mozilla before. Pretty sick !
Any comments ?
alionsonny
Sat, 2004-11-27 19:11
#11
Alignment of a table inside a table cell
alionsonny,
Firstly apologies, I did indeed forget to actually leave the link, but it was the first one of the three that Wisbin Kindly posted for you.
What worries me is that the DTD that you have posted has PHP escape characters in it, that you would use if writing html code within PHP script and if used in an html doc will be invalid; was this taken from the generated html page or did you just copy it from your PHP script ?
Using a full DTD I have the layout centering in both Firefox and IE6
I would suggest using a transitional for your purposes, such as this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
With the CSS you must declare units with your widths/padding etc i.e "px" the only time you do not need to is when the value is "0"
Let us know what is happening with the doc DTD, as long as your in "Standards mode" you should be ok
Oh and just in case you don't already have it get the FF "web developer" extension ; as it's most useful and will show you what mode you are rendering in.
Hugo.
Sat, 2004-11-27 19:56
#12
Alignment of a table inside a table cell
Hmm, I have a bit problems understanding what you mean at some places of your posting. As you might have noticed, english is not my native language. Ok, I will quote those parts later with some questions. But one after the other:
1. No problem with the missing link, as evolution scientists have that problem too 
2. Sorry that I posted the doctype with those escape-characters inside -> my faillure. It was in fact directly copied from the php-script.
3. I inserted the DTD you posted instead, nothing has changed. Screenshots are attached.
Quote:
With the CSS you must declare units with your widths/padding etc i.e "px" the only time you do not need to is when the value is "0"
Ok, this is one of the places, where I am not exactly sure what you mean. I understood it in the way, that I have to write:
padding : 10px;
instead of
padding : 10;
for example. Correct ???
Quote:
Oh and just in case you don't already have it get the FF "web developer" extension ; as it's most useful and will show you what mode you are rendering in.
??? What is that FF-thing, where to get it. As I think FF stands for FireFox. I am using the "standard Mozilla". Does it work there also. As far as I understood this thing gives me information in some way, if I am in quirk or standard mode. Correct ? But where to get that thing ?
The only thing I changed for now is that i replaced my old DTD with the DTD you posted.
Now it looks like it is shown in the IE-Screenshot attached on BOTH Browsers. This is boring :roll:
Greetinx & Thanx
alionsonny
Sat, 2004-11-27 22:00
#13
Alignment of a table inside a table cell
Try the index of this forum. You see a button to get FireFox 1.0 (now!) .. and forget about tables ... 
No, serious, if this is your first real try to get a taste of the CSS possibilities, I would suggest trying a tableless solution for laying out the structure. See also, http://vmalek.murphy.cz/ or http://www.student.oulu.fi/~laurirai/www/css/middle/
And remember if you set a height in %, it is relative to a parent height. So it needs to know "100% of what?". It is like I say to you: wollen sie 50%?
Styling the body element with a height of 100% could fix this.
here is some code to try out, hope you find it helpfull.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="de">
<meta name="generator" content="alion PHP Generator V1.02">
<meta name="progid" content="alion.generic.document">
<title>alionsonny - Homepage</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 99%;
text-align: center;
overflow:auto;
}
table#mtab, table {
margin: 0px auto; /* margin: top right [bottom left] */
padding:20px;
width: 700px;
height:100%;
background-color: #0080C0;
text-align:center;
}
td.contab {
border: 1px solid red;
width: 700px;
padding: 10px 30px;
}
</style>
</head>
<body>
<table id="mtab">
<tr>
<td>
<table>
<tr>
<td class="contab">
THIS IS JUST A TEXT FOR A TEST !!!
through a top-down, proactive approach we can remain customer focused and goal-directed, innovate and be an inside-out organization which facilitates sticky web-readiness transforming turnkey eyeballs to brand 24/365 paradigms with benchmark turnkey channels implementing viral e-services and dot-com action-items while we take that action item off-line and raise a red flag and remember touch base as you think about the red tape outside of the box and seize B2B e-tailers and re-envisioneer innovat
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
cheers!
Sat, 2004-11-27 22:19
#14
Alignment of a table inside a table cell
Thanx for you help, I just decide to try it with my second way, since I found several design problems at my site that will occur if I center the inner table vertically. For example, a navigation bar would vertically jump around while browsing the site. Not very ergonomic 
Anyway, I learned a lot out of this thread.
Thank you very much
alionsonny
Sun, 2004-11-28 00:25
#15
Alignment of a table inside a table cell
You beat me to it wisbin ,
alionsonny, wisbin has said pretty much what I was going to cover,
Download Firefox it's a good browser and you will find a link to the extensions page on the main FF page. The "Web developer toolbar" is extremely useful nothing else like it for browsers.
the point about values is much as wisbin said, you have to say what the value actually is expressed in i.e PX EM % otherwise how is the browser meant to know what it's displaying; as I said 0 is the only exception as 0 is 0 in any sense .
Give wisbins code a whirl as it clears up many of the problems from before, but make sure that you are running the browsers in "standards mode" and read the link provided on "standards" there are further links within it that will help to explain things further.
If possible think about taking the plunge and dropping tables in favour of pure CSS layouts, it's the way forward, better to learn sooner rather than later and you will always find plenty of help here.
Hugo.
Sun, 2004-11-28 01:11
#16
Alignment of a table inside a table cell
Hi Hugo,
thanx for your help again. Now I ask: You talk about pure CSS-layouts. What exactly do you mean with this ? Using divs and paragraphs instead of tables ? That would be nice, as those table, td,tr-tag tohuwabohu makes me sick since I started with HTML.
Is it possible to give a div a border ? Because without some things tables are used for are impossible.
Another thing is: Imagine a table-row. There are five cells in a horizontal line. How would you achieve this with divs ? As I know it HTML is pretty much vertically oriented. I mean, if I put two divs in a HTML after another, they will be appear vertically. How to place them horizontally without using absolute positions (which I think is a bad idea) ?
Thanx, I see this forum here is a nice place to learn the important stuff.
alionsonny