Topic: Spacing around a table Pages that link to <a href="https://ozoneasylum.com/backlink?for=9516" title="Pages that link to Topic: Spacing around a table" rel="nofollow" >Topic: Spacing around a table\

 
Author Thread
Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

IP logged posted posted 09-06-2002 19:39 Edit Quote

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)!!

Wowzers! o.O
Visit my cell! http://faq.ozoneasylum.com/FaqWiki/shownode.php?id=754&sortby=rating

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 09-06-2002 19:47 Edit Quote

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.

___________________
Emps

FAQs: Emperor

Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

IP logged posted posted 09-06-2002 19:53 Edit Quote

Thanks Emp! And since we're looking at that page anyway, can anyone tell me why my bottom table isn't centering?

Genevieve<---that's me!!
Jinxed<--------that's me too(in description form)!!

Wowzers! o.O
Visit my cell! http://faq.ozoneasylum.com/FaqWiki/shownode.php?id=754&sortby=rating

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 09-06-2002 20:20 Edit Quote

Genevieve: There is no such thing as:

float: center;

Use this instead:
http://bluerobot.com/web/css/center1.html

___________________
Emps

FAQs: Emperor

Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

IP logged posted posted 09-06-2002 20:58 Edit Quote

Emp: Here's what my style sheet now looks like:

code:
body {margin: 10px;}
h1, h2, h3, h4, h5 {text-align: center;}
li {margin-bottom: 13px;}
table {border: #000000 1px solid;}
.right {float: right;}
.left {float: left;}
.center { margin:50px 0px; padding:0px;
text-align:center;
}
#Content {
margin:0px auto;
text-align:left;
}



but it still doesn't work...

code:
<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)!!

Wowzers! o.O
Visit my cell! http://faq.ozoneasylum.com/FaqWiki/shownode.php?id=754&sortby=rating

[This message has been edited by Genevieve (edited 09-06-2002).]

[This message has been edited by Genevieve (edited 09-06-2002).]

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 09-06-2002 22:41 Edit Quote

I'm still seeing:

.center {float: center;}

but I have problems with things caching so......

Anyway I'd recommend wrapping the table in a DIV with the class center which should be:

code:
.center {	
margin: auto;
padding: 0px;
text-align: center;
}



see how that works for you.

___________________
Emps

FAQs: Emperor

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 09-06-2002 22:41 Edit Quote

The page must also have a correct DOCTYPE for this to work.

hecster2k
Nervous Wreck (II) Inmate

From: sj, ca, usa
Insane since: Feb 2002

IP logged posted posted 09-07-2002 00:26 Edit Quote

how bout just putting <table align="center"> ?

"there has to be a solution."

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 09-07-2002 00:37 Edit Quote

Deprecated. Mixture of style with markup.

Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

IP logged posted posted 09-09-2002 17:44 Edit Quote

Whoops! Sorry Emp. I'd changed it on my actual file but not on the webbie. It's up and changed. Here's the DOCTYPE I'm using on my pages:

code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



Do I need to put this in my style sheet as well, or do I need to use something else since I'm using CSS?

[edit: I also put it in divs. Not working ::wants to scream:: Arg!! thanks for all your help so far though!]

Thanks!

Genevieve<---that's me!!
Jinxed<--------that's me too(in description form)!!

Wowzers! o.O
Visit my cell! http://faq.ozoneasylum.com/FaqWiki/shownode.php?id=754&sortby=rating

[This message has been edited by Genevieve (edited 09-09-2002).]

Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

IP logged posted posted 09-10-2002 17:01 Edit Quote

So Slime, is that the correct doctype?

Genevieve<---that's me!!
Wowzers! o.O

Visit my cell! http://faq.ozoneasylum.com/FaqWiki/shownode.php?id=754&sortby=rating

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 09-10-2002 17:27 Edit Quote

Genevieve: Read through this and the other resources linked from there :
http://faq.ozoneasylum.com/460/

___________________
Emps

FAQs: Emperor

Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

IP logged posted posted 09-10-2002 18:19 Edit Quote

::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?]

Genevieve<---that's me!!
Wowzers! o.O

Visit my cell! http://faq.ozoneasylum.com/FaqWiki/shownode.php?id=754&sortby=rating

[This message has been edited by Genevieve (edited 09-10-2002).]

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 09-10-2002 18:52 Edit Quote

Genevieve: Sorry missed that one - no just add the DOCTYPE at the top of your webpage.

I would recommend you don't go with a strict XHTML DOCTYPE unless that is really what you are aiming for try something like:

code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



or even a HTML 4.01 DOCTYPE. See:
www.alistapart.com/stories/doctype/

___________________
Emps

FAQs: Emperor

kuckus
Bipolar (III) Inmate

From: Berlin (almost)
Insane since: Dec 2001

IP logged posted posted 09-10-2002 19:46 Edit Quote

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?

kuckus (cell #282)

Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

IP logged posted posted 09-10-2002 20:33 Edit Quote

K: I tried it in the table tag first and it didn't work, though what are you using to view my page? IE? Netscape? etc? What version as well. Thanks!

Emp: Ya, I noticed I shouldn't be using strict because I wanted to use framesets. The first link on that page you sent me to said I should use:

code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">



oh, but the page you refered me to says to use this one for frameset:

code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


So unless you think transitional is better I'll change all my pages to that second one.

[edit: added that second doctype and reference to it]

Which do you think is better? Frameset or transitional?

Thanks!

Genevieve<---that's me!!
Wowzers! o.O

Visit my cell! http://faq.ozoneasylum.com/FaqWiki/shownode.php?id=754&sortby=rating

[This message has been edited by Genevieve (edited 09-10-2002).]

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 09-10-2002 21:07 Edit Quote

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.

___________________
Emps

FAQs: Emperor

kuckus
Bipolar (III) Inmate

From: Berlin (almost)
Insane since: Dec 2001

IP logged posted posted 09-10-2002 21:14 Edit Quote

I'm using IE 6 (and it also works in Mozilla 1):
www.kussatz.com/asylum/Page6.html

kuckus (cell #282)

Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

IP logged posted posted 09-11-2002 16:28 Edit Quote

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!

Genevieve<---that's me!!
Wowzers! o.O

Visit my cell! 754

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 09-11-2002 17:18 Edit Quote

Its centred for me on on IE6/Win. IE/Mac? No wonder

___________________
Emps

FAQs: Emperor

Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

IP logged posted posted 09-12-2002 17:33 Edit Quote

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<---that's me!!
Wowzers! o.O

Visit my cell! 754

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 09-12-2002 17:40 Edit Quote

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.

___________________
Emps

FAQs: Emperor

Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

IP logged posted posted 09-12-2002 17:58 Edit Quote

Emp: Well, here's what I did:

code:
<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.

Genevieve<---that's me!!
Wowzers! o.O

Visit my cell! 754

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 09-12-2002 19:13 Edit Quote

Genevieve: OK I've doubled checked and there is a typo in your styles:

quote:
.center { margin:auto
padding:0px;
text-align:center; /* Hack for IE5/Win */
}



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:

code:
#content td, #content p {
text-align: left;
}



in fact get rid of the name and id and do:

code:
.center td, .center p {
text-align: left;
}



So give that a try and see how it goes.

___________________
Emps

FAQs: Emperor

Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

IP logged posted posted 09-18-2002 19:29 Edit Quote

I want to make sure I've got this right:

So do this?

code:
body {margin: 10px;}
h1, h2, h3, h4, h5 {text-align: center;}
li {margin-bottom: 13px;}
table {border: #000000 1px solid;}
.right {float: right;}
.left {float: left;}
.center { margin:auto;
padding:0px;
text-align:center; /* Hack for IE5/Win */
}
.center td, .center p {
text-align: left;
}



And then instead of "name" and "id" use class="center" ?

Genevieve
Wowzers! o.O

Visit my cell! 754

[This message has been edited by Genevieve (edited 09-18-2002).]

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 09-18-2002 20:49 Edit Quote

Genevieve: Just add the extra semi-colon and see if that works. You can play with the other things at a later date.

___________________
Emps

FAQs: Emperor



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu