Here's the page I'm working on. If you'll notice, the first table (on the right of the page) looks very nicely spaced from the text itself, whereas the second table (on the left) isn't. I was wondering what the difference is and what I can do about it? http://www.geocities.com/genevievescu/Ozone/Page6.html
Genevieve<---that's me!!
Jinxed<--------that's me too(in description form)!!
Genevieve: My best bet is that it is an illusion created by the justifying (justification??) and the end of the paragraphs. These create extra space around the right table but if you look at the text that actually runs right up against the table the actual space around the two tables is the same. To add space just use the margin style.
<p><table name="Content" id="Content" class="center" width=500 cellspacing="10">
<tr>
<td>POOH PIC HERE</td>
<th><h3>EINSTEIN'S "HAPPIEST THOUGHT</h3></th>
</tr>
<tr>
<td><h3>GRAVITY<br />is<br />ACCELERATION</h3></td>
<td><p>"For an observer falling freely from the roof of a house, there exists- at least in his
immediate surroundings- no gravitational field. Indeed, if the observer drops some
[masses], then these remain to him in a state of rest, or uniform motion...</p><p>The
observer, therefore, has the right to interpret his state as 'at rest' [even though he appears
to be falling to the rest of us]."</p></td>
</tr>
</table></p>
Genevieve<---that's me!!
Jinxed<--------that's me too(in description form)!!
::sighs:: Emp: I've read through a lot...I guess I'll have to read through some more! LOL. Because I really need this center thing to work...otherwise my pages just look really really funky.
[edit: PS: Okay, one question as I'm reading: does my style sheet need a doctype on top as well?]
I played around with your code a bit and don't know why, but it works for me if I put the id and class into the table tag instead of the div. Maybe divs are 100% wide by default and centering them doesn't change anything for that reason?
Genevieve: If you are using frames then you'll have to use one of the frameset DOCTYPEs - the choice is if you want HTML 4.01 or XHTML. Which is up to you.
How interesting!! I clicked your link and I STILL don't see it centered. Hmmm... I wonder which browsers it does and doesn't work on. Does anyone have an older browser to check with? I've used MAC's IE 5.2 and 5.1, the latest two versions and it works on neither...though with this newer version I'm having problems with my frames too...ugh!
Awww! :: pokes Emp:: It's not my fault! I'm at work And regardless, it's gotta work for me because...well, probably 2/3 of our computers at work are MACs and if people at work can't see the pages right we're gonna get complaints. :: sigh:: I think I'm just going to kick my computer and see what happens, ya think?
Genevieve: OK - give that a try and let us know how it goes
What I'd try is simplifying things. Here is your offending code:
code:
<p>
<div>
<table width=500 cellspacing="10" class="center" name="Content" id="Content">
<tr>
<td>POOH PIC HERE</td>
<th><h3>EINSTEIN'S "HAPPIEST THOUGHT</h3></th>
</tr>
<tr>
<td><h3>GRAVITY<br />is<br />ACCELERATION</h3></td>
<td><p>"For an observer falling freely from the roof of a house, there exists- at least in his
immediate surroundings- no gravitational field. Indeed, if the observer drops some [masses],
then these remain to him in a state of rest, or uniform motion...</p><p>The observer,
therefore, has the right to interpret his state as 'at rest' [even though he appears to be falling
to the rest of us]."</p></td>
</tr>
</table>
</div>
</p>
And what jumps out at me is the fact that you have the table wrapped in a P in a DIV (for no good reason that I can see) and there is no need for them - try taking them out and see what happens.
If that doesn't work try wrapping the table in a DIV with class="center" instead of the table and see how that goes.
<table class="center" name="Content" id="Content" width=500 cellspacing="10">
<tr>
<td>POOH PIC HERE</td>
<th><h3>EINSTEIN'S "HAPPIEST THOUGHT</h3></th>
</tr>
<tr>
<td><h3>GRAVITY<br />is<br />ACCELERATION</h3></td>
<td><p>"For an observer falling freely from the roof of a house, there exists- at least in his
immediate surroundings- no gravitational field. Indeed, if the observer drops some [masses],
then these remain to him in a state of rest, or uniform motion...</p><p>The observer,
therefore, has the right to interpret his state as 'at rest' [even though he appears to be falling
to the rest of us]."</p></td>
</tr>
</table>
And while it still doesn't want to work correctly in IE 5.2 for MAC 10.2, it DOES work in my newly dled Mozilla 1.1 I tried both ways you said and neither changed anything for IE 5.2 But you say it works for you in Windows IE 6.0 hm? Weird. I would think the mac and win ie would be equivalent, but apparently not.
the margin:auto style needs a sem-colon after it or it is invalid and while it will work in browsers that allow sloppy coding (like IE/Win) I would imagine that that other stricter browsers (like Opera and pos. IE/Mac) might not be happy with that.
For the record IE/Mac is a different browser to IE/Win - it has its own development team I believe and something that works in one may no work in the other. IE/Mac does tend to have better support for standards but I have noticed a number of things that cause it to have real problems (lots of DIVs for example). Jeni or Steve might be able to cast more light on that issue but I think it is purely a problem with your CSS.
If not I'd probably tweak this:
quote:#Content {
margin:0px auto; /* Right and left margin widths set to "auto" */
text-align:left; /* Counteract to IE5/Win Hack */
}
I would try not to reset the same styles for the same element (its a waste of time for starters but could cause some kind of interference - never heard of such a thing but if you are still having trouble then I'd look at that) and might do something like: