Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > space under text in a table

Reply
Thread Tools

space under text in a table

 
 
mcsting@rogers.com
Guest
Posts: n/a
 
      02-26-2007
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]

 
Reply With Quote
 
 
 
 
Steven Saunderson
Guest
Posts: n/a
 
      02-26-2007
On 25 Feb 2007 19:26:28 -0800, http://www.velocityreviews.com/forums/(E-Mail Removed) wrote:

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


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

--
Steven
 
Reply With Quote
 
 
 
 
Steven Saunderson
Guest
Posts: n/a
 
      02-26-2007
On Mon, 26 Feb 2007 14:40:14 +1100, Steven Saunderson <(E-Mail Removed)>
wrote:

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


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.

--
Steven
 
Reply With Quote
 
Ranter
Guest
Posts: n/a
 
      02-26-2007
On Feb 25, 10:40 pm, Steven Saunderson <(E-Mail Removed)> wrote:
> On 25 Feb 2007 19:26:28 -0800, (E-Mail Removed) wrote:
>
> > <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?

>
> <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).
>
> --
> Steven


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.

 
Reply With Quote
 
Ranter
Guest
Posts: n/a
 
      02-26-2007
On Feb 25, 10:50 pm, "Ranter" <(E-Mail Removed)> wrote:
> On Feb 25, 10:40 pm, Steven Saunderson <(E-Mail Removed)> wrote:
>
> > On 25 Feb 2007 19:26:28 -0800, (E-Mail Removed) wrote:

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

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

>
> > --
> > Steven

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


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.

 
Reply With Quote
 
Steven Saunderson
Guest
Posts: n/a
 
      02-26-2007
On 25 Feb 2007 20:19:37 -0800, "Ranter" <(E-Mail Removed)> wrote:

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


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.

--
Steven
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      02-26-2007
In article
<(E-Mail Removed) .com>,
(E-Mail Removed) wrote:

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


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

--
dorayme
 
Reply With Quote
 
=?ISO-8859-1?Q?G=E9rard_Talbot?=
Guest
Posts: n/a
 
      02-26-2007
(E-Mail Removed) wrote :
> 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.


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.


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>


Using Web Standards in your Web Pages
# 2.2.3.2 I use <center> or align="center". How to align with CSS?
http://developer.mozilla.org/en/docs...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>
>


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
--
Using Web Standards in your Web Pages (Updated Dec. 2006)
http://developer.mozilla.org/en/docs...your_Web_Pages
 
Reply With Quote
 
Steven Saunderson
Guest
Posts: n/a
 
      02-26-2007
On Mon, 26 Feb 2007 01:46:23 -0500, Gérard Talbot
<(E-Mail Removed)> wrote:

> <h1 style="text-align: center; border: 3px solid black;">Worldwide
> Wheelchair Accessible Washrooms</h1>
>
> will meet your design request in all CSS-capable browsers.


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 ?

--
Steven
 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      02-26-2007
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.


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

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


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

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
form input text in table; how to fill table cell space sdf HTML 3 12-06-2007 03:29 PM
Why Python style guide (PEP-8) says 4 space indents instead of 8 space??? 8 space indents ever ok?? Christian Seberino Python 21 10-27-2003 04:20 PM
Re: Why Python style guide (PEP-8) says 4 space indents instead of8 space??? 8 space indents ever ok?? Ian Bicking Python 2 10-24-2003 11:15 AM
Re: Why Python style guide (PEP-8) says 4 space indents instead of8 space??? 8 space indents ever ok?? Ian Bicking Python 2 10-23-2003 07:07 AM
Stack space, global space, heap space Shuo Xiang C Programming 10 07-11-2003 07:30 PM



Advertisments