space under text in a table

M

mcsting

Hi folks,

I'm an amateur webpage designer. I've recently set up a page and am
trying to see if there's a solution to something I've noticed when I
view my page. In Internet Explorer and icab, it shows the way I would
like, but in Safari and Firefox, I see a problem.

My webpage is: http://www.worldwideaccessiblewashrooms.com

At the top, I have the webpage title in a table. In Safari and
Firefox, there is more space on the bottom of the text inside the
table than on the top. I used a straightforward table html:

<center>
<table bgcolor="#f2e891" border="0" style="border: 3px solid black;">
<tr>
<td><h2>Worldwide Wheelchair Accessible Washrooms</h2></td>
</tr>
</table>
</center>

Is there a way I can change this so that there is equal space above
and below the text inside the table box?

Thanks![/url]
 
S

Steven Saunderson

<td><h2>Worldwide Wheelchair Accessible Washrooms</h2></td>

Is there a way I can change this so that there is equal space above
and below the text inside the table box?
Click to expand...

<h2 style="margin:0.25em;">Worldwide .... might help here.

Do you know this heading is before <body> ? It should be after
(probably won't affect the display however).
 
S

Steven Saunderson

Do you know this heading is before <body> ? It should be after
(probably won't affect the display however).
Click to expand...

A better solution would be to move the <body ...> tag from line 2 to
after the </head> tag and then delete the <body> tag after the table.
 
R

Ranter

<h2 style="margin:0.25em;">Worldwide .... might help here.

Do you know this heading is before <body> ? It should be after
(probably won't affect the display however).
Click to expand...

That seems to have done the spacing trick, thanks a lot! I have been
using Taco html editor on my mac and when I open a new document, there
is some html already in there, and the heading is automatically set up
to be before the body. Weird.
 
R

Ranter

That seems to have done the spacing trick, thanks a lot! I have been
using Taco html editor on my mac and when I open a new document, there
is some html already in there, and the heading is automatically set up
to be before the body. Weird.
Click to expand...

Hmmm, I seem to have spoke too soon, sort of. The spacing problem is
now fixed, and the page is showing up fine in Safari, Firefox and
iCab. However, in IE, "Washrooms" has gotten pushed down to a 2nd line
in the table box.
 
S

Steven Saunderson

Hmmm, I seem to have spoke too soon, sort of. The spacing problem is
now fixed, and the page is showing up fine in Safari, Firefox and
iCab. However, in IE, "Washrooms" has gotten pushed down to a 2nd line
in the table box.
Click to expand...

The same happens here but not until the window is about 450px wide.
This is as it should be. You could force it to stay on one line but
then the page won't be able to reflow for narrow windows as it does now.

Try <h2 style="margin:0.25em 0;"> if you like. But really you should
fix the misplaced <body> tags first. This will help the validity of the
page and might work wonders.

Check <http://validator.w3.org/> and try to fix all the errors.
 
D

dorayme

Hi folks,

I'm an amateur webpage designer. I've recently set up a page and am
trying to see if there's a solution to something I've noticed when I
view my page. In Internet Explorer and icab, it shows the way I would
like, but in Safari and Firefox, I see a problem.

My webpage is: http://www.worldwideaccessiblewashrooms.com

At the top, I have the webpage title in a table. In Safari and
Firefox, there is more space on the bottom of the text inside the
table than on the top. I used a straightforward table html:

<center>
<table bgcolor="#f2e891" border="0" style="border: 3px solid black;">
<tr>
<td><h2>Worldwide Wheelchair Accessible Washrooms</h2></td>
</tr>
</table>
</center>

Is there a way I can change this so that there is equal space above
and below the text inside the table box?

Thanks![/url]
Click to expand...

I'm afraid this mark up is quite jumbled up. From failure to
separate instructions with semicolons where it is required (look
at the first table css) to many other and worse individual
mistakes. Nearly all your layout is enclosed in a <p>? It hardly
counts as a paragraph. And a table is not really needed to layout
your page (though this in itself is not as bad as doing it badly)

Time to forget about your editor for a while and go to

<http://www.htmldog.com/>

Learn about separating the html from the css. Your cause is worth
it...
 
?

=?ISO-8859-1?Q?G=E9rard_Talbot?=

Hi folks,

I'm an amateur webpage designer. I've recently set up a page and am
trying to see if there's a solution to something I've noticed when I
view my page. In Internet Explorer and icab, it shows the way I would
like, but in Safari and Firefox, I see a problem.

My webpage is: http://www.worldwideaccessiblewashrooms.com

At the top, I have the webpage title in a table.
Click to expand...

Why do you want to use a table for that page title? Your title
"Worldwide Wheelchair Accessible Washrooms" has nothing, absolutely
nothing to do with tabular data.

<h1 style="text-align: center; border: 3px solid black;">Worldwide
Wheelchair Accessible Washrooms</h1>

will meet your design request in all CSS-capable browsers.

In Safari and
Firefox, there is more space on the bottom of the text inside the
table than on the top.
Click to expand...

That's most likely because text sits on the baseline and browsers must
provide sufficient space for descenders (g, y, p, q, j) and underlining.

I used a straightforward table html:
<center>
Click to expand...

Using Web Standards in your Web Pages
<table bgcolor="#f2e891" border="0" style="border: 3px solid black;">
<tr>
<td><h2>Worldwide Wheelchair Accessible Washrooms</h2></td>
</tr>
</table>
</center>
Click to expand...

All of the above can be replaced with

<h1 style="text-align: center; border: 3px solid black;">Worldwide
Wheelchair Accessible Washrooms</h1>

Your webpage certainly needs some cleaning up with a validator too. As
mentioned by others, <body> must follow <head>..</head>: you have a case
of improper nesting. Proper webpage code structure:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>... document title ...</title>
</head>
<body>
....
</body>
</html>

You could use some 2 columns CSS template instead of using tables.

Visit the webpage in my signature for help.

Gérard
 
S

Steven Saunderson

<h1 style="text-align: center; border: 3px solid black;">Worldwide
Wheelchair Accessible Washrooms</h1>

will meet your design request in all CSS-capable browsers.
Click to expand...

The problem with this is that the bordered area is the entire window
width rather than just the text. Is there a simple way to achieve the
result his table effort is now ?
 
J

Jukka K. Korpela

Scripsit Gérard Talbot:
Why do you want to use a table for that page title? Your title
"Worldwide Wheelchair Accessible Washrooms" has nothing, absolutely
nothing to do with tabular data.
Click to expand...

First, I'd like to point out that the word "title" is ambiguous in HTML
contexts. It could refer to the external title of a page (the <title>
element), to an advisory, tooltip-like text attached to an element (via a
title attribute), or some of the many heading-like elements like <h1> thru
or <caption> said:
<h1 style="text-align: center; border: 3px solid black;">Worldwide
Wheelchair Accessible Washrooms</h1>
Click to expand...

No, it's not quite that simple. The current design makes the box as wide as
the text (plus padding and border), whereas an <h1> element by default
occupies the entire available width (normally, canvas width minus some
paddings or margins of the <body> element). I'm afraid a single-cell table
is the simplest way to achieve that (in a way that works on most browsers).
For a CSS solution, you would probably have to use artificial <span> markup
(<h1><span>...</span></h1>) and set the border and background for the
<span>.
 
R

Roy A.

Gérard Talbot skrev:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>... document title ...</title>
</head>
<body>
...
</body>
</html>

You could use some 2 columns CSS template instead of using tables.
Click to expand...

Sure you could. This should be simple, but what would you gain. And
witch html editor do you suggest?
 
R

Roy A.

Jukka K. Korpela skrev:
Scripsit Gérard Talbot:

No, it's not quite that simple. The current design makes the box as wide as
the text (plus padding and border), whereas an <h1> element by default
occupies the entire available width (normally, canvas width minus some
paddings or margins of the <body> element). I'm afraid a single-cell table
is the simplest way to achieve that (in a way that works on most browsers).
For a CSS solution, you would probably have to use artificial <span> markup
(<h1><span>...</span></h1>) and set the border and background for the
<span>.
Click to expand...

Another CSS solution, the other way around (with 'display:inline'):
<div style="text-align:center; margin: 1.5em 1.5em">
<h1 style="font-size:x-large; border: 3px solid black; padding:
0.25em; background-color:#f2e891; 0.25em; display:inline;">Worldwide
Wheelchair Accessible Washrooms</h1>
</div>
 
A

Andrew

Hi folks,

I'm an amateur webpage designer. I've recently set up a page and am
trying to see if there's a solution to something I've noticed when I
view my page. In Internet Explorer and icab, it shows the way I would
like, but in Safari and Firefox, I see a problem.

My webpage is: http://www.worldwideaccessiblewashrooms.com
Click to expand...

snip>>>>>>>

Hi,

I suspect that you are asking the wrong question. Have you thought of
using a css design rather than struggle with tables? I have done a quick
mock-up at:

http://people.aapt.net.au/~adjlstrong/test.html

This is a flexible design that is W3C validated and contains almost all
of your original design ideas. Needs a lot of work yet but the basic idea
is there :) Much easier than wrestling with tables and spacing!

Great idea incidentally, my wife is a paraplegic so I know the problems.

All the best,

Andrew (a fellow amateur webpage designer)
 
A

Andy Dingley

My webpage is: http://www.worldwideaccessiblewashrooms.com
Click to expand...

Great idea but:

* The HTML is all over the place. Find a good tutorial, read it, and
pay particular attention to sections on "validity", "validation" and
"semantic markup". Lately I've been recomending O'Reilly's "Head
First HTML with CSS & XHTML" as the best around.

You just can't get anywhere on cross-browser stability until you've
addressed basic validity.


* "Washroom" is too US-centric a term. I don't need a wash or a bath
damnit, I need a toilet!


In memory of the late CountB, how about also checking just what sort
of wheelchairs these places are accessible for? It's one thing to find
that a place is "accessible" meaning that it has ramps, but some
wheelchair users are in lay-down chairs rather than sit-up chairs, and
these need more space to manouevre.
 
?

=?ISO-8859-1?Q?G=E9rard_Talbot?=

Jukka K. Korpela wrote :
Scripsit Gérard Talbot:


First, I'd like to point out that the word "title" is ambiguous in HTML
contexts. It could refer to the external title of a page (the <title>
element), to an advisory, tooltip-like text attached to an element (via
a title attribute), or some of the many heading-like elements like <h1>
thru <h6>, or <caption>, or <th>. So it's better to refer to the <h1>
element as the main heading (or page heading).
Click to expand...

I agree with what you say. I kept using the terminology of the original
poster so that he wouldn't feel disoriented.

[snipped]
> For a CSS solution, you would probably have to
use artificial <span> markup (<h1><span>...</span></h1>) and set the
border and background for the <span>.
Click to expand...

Good point here too.

Gérard
 
?

=?ISO-8859-1?Q?G=E9rard_Talbot?=

Roy A. wrote :
Gérard Talbot skrev:


Sure you could. This should be simple, but what would you gain.
Click to expand...

Well, improved accessibility, easier code maintenance, smaller webpage
(which brings many benefits), etc

Top seven reasons to avoid tables for layout
http://www.workingwith.me.uk/table_free/seven_reasons_to_go_table_free

Why tables for layout is stupid. Problems defined, solutions offered.
Most possibly the best resource on this issue covering all aspects: it
was a seminar presentation, part of a conference in 2003. Translated in
12 other languages.
http://www.hotdesign.com/seybold/

Table-based webpage design versus CSS-based webpage design: resources,
explanations and tutorials
http://www.gtalbot.org/NvuSection/NvuWebDesignTips/TableVsCSSDesign.html

And
witch html editor do you suggest?
Click to expand...

Personally, I use an advanced text editor and manually code all my
webpages. When I use an HTML editor, I use KompoZer 0.77 mostly because
I can use the latest HTML Tidy (HandCoder 0.3.4) to pretty print the
code. When Composer 2 is released, I'll probably use it.

Gérard
 
D

dorayme

I'm an amateur webpage designer. I've recently set up a page and am
trying to see if there's a solution to something I've noticed when I
view my page. In Internet Explorer and icab, it shows the way I would
like, but in Safari and Firefox, I see a problem.

My webpage is: http://www.worldwideaccessiblewashrooms.com
Click to expand...

I suspect that you are asking the wrong question. Have you thought of
using a css design rather than struggle with tables? I have done a quick
mock-up at:

http://people.aapt.net.au/~adjlstrong/test.html

This is a flexible design that is W3C validated and contains almost all
of your original design ideas. [/QUOTE]

Nice, well done.

Needs a lot of work yet
Click to expand...

Really? What is it that you want from the world if this perfectly
good and simple and adequate layout "needs a lot of work"?
 
J

Jim S

Roy A. wrote :

Well, improved accessibility, easier code maintenance, smaller webpage
(which brings many benefits), etc

Top seven reasons to avoid tables for layout
http://www.workingwith.me.uk/table_free/seven_reasons_to_go_table_free

Why tables for layout is stupid. Problems defined, solutions offered.
Most possibly the best resource on this issue covering all aspects: it
was a seminar presentation, part of a conference in 2003. Translated in
12 other languages.
http://www.hotdesign.com/seybold/

Table-based webpage design versus CSS-based webpage design: resources,
explanations and tutorials
http://www.gtalbot.org/NvuSection/NvuWebDesignTips/TableVsCSSDesign.html

And

Personally, I use an advanced text editor and manually code all my
webpages. When I use an HTML editor, I use KompoZer 0.77 mostly because
I can use the latest HTML Tidy (HandCoder 0.3.4) to pretty print the
code. When Composer 2 is released, I'll probably use it.

Gérard
Click to expand...

It's all very well, but I have trawled through several tutorials and with my
page layout I cannot for the life of me see how to produce a page like my
homepage without using a table or indeed the other pages without frames.
 
?

=?ISO-8859-1?Q?G=E9rard_Talbot?=

Jim S a écrit :
It's all very well, but I have trawled through several tutorials and with my
page layout I cannot for the life of me see how to produce a page like my
homepage without using a table or indeed the other pages without frames.
Click to expand...
Jim S
Tyneside UK
http://www.jimscott.co.uk
Click to expand...

Jim, we're far from the topic of "space under text in a table" here. If
you want to post your issue in
alt.html and comp.infosystems.www.authoring.stylesheets discussion
newsgroups with a followup-to set to
comp.infosystems.www.authoring.stylesheets
then, I'm sure, you will get recommendations, tips and advices on how to
achieve your page layout with CSS and without resorting to tables.

Gérard
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Only one table shows up with the information 2
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Filter table rows based on multiple checkboxes value 2
How to delete the item from table? I am using SESSION. 0
Can anyone please help? HTML - two tables applying different styles 4
Help needed with thank you message 5
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How to add dropdown selected data to table using jquery 2

Members online

Total: 20 (members: 3, guests: 17)
Robots: 391

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,020
Latest member
GenesisGai

Latest Threads

Top