tables + Firefox again...

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Ree
Forum Regular
Posts: 592
Joined: Fri Jun 10, 2005 1:43 am
Location: LT

tables + Firefox again...

Post by Ree »

i am having a bit of a problem with dsiplaying the table below in firefox (in ie it looks as intended).

as you can see there are two "<TD colspan="2" height="1" bgcolor="#000000"></TD>"
cells in the table which i wanted to act as black 1px height lines. in ie they look fine (1px), in firefox they get to much height for some reason although the attribute is height="1".

Code: Select all

<TABLE width=&quote;100%&quote; height=&quote;100%&quote; cellpadding=&quote;10&quote; cellspacing=&quote;1&quote;>
   <TR>
      <TD colspan=&quote;2&quote; height=&quote;80&quote; bgcolor=&quote;#88B4D5&quote; align=&quote;right&quote;></TD>
   </TR>
   <TR>
      <TD colspan=&quote;2&quote; height=&quote;1&quote; bgcolor=&quote;#000000&quote;></TD>
   </TR>
   <TR>
      <TD width=&quote;170&quote; align=&quote;left&quote; valign=&quote;top&quote; bgcolor=&quote;#D0D0D0&quote;>
         <?php include('menu.php') ?>
      </TD>
      <TD valign=&quote;top&quote; align=&quote;center&quote;>
         <?php SwitchPage() ?>
      </TD>
   </TR>
   <TR>
      <TD colspan=&quote;2&quote; height=&quote;1&quote; bgcolor=&quote;#000000&quote;></TD>
   </TR>
   <TR>
      <TD colspan=&quote;2&quote; height=&quote;80&quote; bgcolor=&quote;#88B4D5&quote; align=&quote;center&quote;>&copy; Copyright 2005</TD>
   </TR>
</TABLE>
what do you think could be causing the problem?
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Re: tables + Firefox again...

Post by Roja »

Ree wrote: what do you think could be causing the problem?
Working code:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
</head>
<body>
<TABLE width="100%" cellspacing="1px" style="height:100%">
   <TR>
      <TD colspan="2" height="80px" bgcolor="#88B4D5" align="right"></TD>
   </TR>
   <TR>
      <TD colspan="2" height="1px" bgcolor="#000000"></TD>
   </TR>
   <TR>
      <TD width="170" align="left" valign="top" bgcolor="#D0D0D0">
         <?php include('menu.php'); ?>
      </TD>
      <TD valign="top" align="center">
         <?php SwitchPage(); ?>
      </TD>
   </TR>
   <TR>
      <TD colspan="2" height="1px" bgcolor="#000000"></TD>
   </TR>
   <TR>
      <TD colspan="2" height="80px" bgcolor="#88B4D5" align="center">&copy; Copyright 2005</TD>
   </TR>
</TABLE>
</body>
</html>
Notes:

- HTML valid code. Always, always, always validate your code. http://validator.w3.org:8001/ is your best tool for webdesign.

- Thats why the "height" is a style property on tables. The Table tag doesn't have a "height" attribute.

- height="1". One *what*? Pixel? Em? Mile? Long stare at the bush administration?

- You should really use CSS instead.

- Don't forget the semicolons after your php functions.

- Those are red herrings. The problem was that you put "10" (unit?) on cellpadding in the table itself, which was applied to ALL contained elements - even your fancy lines.
Ree
Forum Regular
Posts: 592
Joined: Fri Jun 10, 2005 1:43 am
Location: LT

Post by Ree »

thanks for your help, great info indeed. does that mean that by using any html elements i should define as many of their properties in css as possible? i always thought css was best to use when you have a lot of similar elements throughout your html which use the same properties defined in css. what if i have many very different elements which aren't used let's say more than once? should i still define their properties in css?
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post by Roja »

Ree wrote:thanks for your help, great info indeed. does that mean that by using any html elements i should define as many of their properties in css as possible?
Think of html as "data", and css as "presentation". You want to keep as much of your presentation out of your data as possible. Why? Because then you gain numerous benefits:

- Easier to edit the data (and usually the presentation too)
- Site-wide presentation changes is easier (edit your .css file, and it affects all your pages)
- External CSS files are cached after the first hit

Plus, it teaches you good habits that you will need for xhtml.
Ree wrote: i always thought css was best to use when you have a lot of similar elements throughout your html which use the same properties defined in css.
That is a great situation to use it in, but css is better to use all the time.
Ree wrote: what if i have many very different elements which aren't used let's say more than once? should i still define their properties in css?
Yes, because of the benefits I mentioned above.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

Ree wrote:thanks for your help, great info indeed. does that mean that by using any html elements i should define as many of their properties in css as possible? i always thought css was best to use when you have a lot of similar elements throughout your html which use the same properties defined in css. what if i have many very different elements which aren't used let's say more than once? should i still define their properties in css?
You can define CSS inline with the HTML, it doesn't need to be in <style> blocks or a stylesheet file.

Code: Select all

<element style=&quote;attribute:value; attribute:value;&quote;>....</element>
That's the way I find is most practical *sometimes* for what you want. Rememember CSS isn't neccessarily to do with repitition but also maintainability/scalibilty. Add to that the fact that CSS provides an open door to increased accessibility there's a good reason to switch ;)
Ree
Forum Regular
Posts: 592
Joined: Fri Jun 10, 2005 1:43 am
Location: LT

Post by Ree »

the reasons are clear to me now. thanks :)
thedamo
Forum Newbie
Posts: 9
Joined: Fri Jul 15, 2005 7:23 am
Location: Sydney Australia

Post by thedamo »

i found that if you remove the cellspacing and cellpadding from your table tag, that it also fixed the problem.
Post Reply