Page 1 of 1

tables + Firefox again...

Posted: Mon Jun 27, 2005 4:28 pm
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?

Re: tables + Firefox again...

Posted: Mon Jun 27, 2005 5:34 pm
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.

Posted: Tue Jun 28, 2005 4:16 am
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?

Posted: Tue Jun 28, 2005 5:41 am
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.

Posted: Tue Jun 28, 2005 5:42 am
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 ;)

Posted: Tue Jun 28, 2005 5:58 am
by Ree
the reasons are clear to me now. thanks :)

Posted: Fri Jul 15, 2005 7:01 pm
by thedamo
i found that if you remove the cellspacing and cellpadding from your table tag, that it also fixed the problem.