Td - cell not showing correctly in IE

[stereotyyppi]

Hi,

I have problem with my html code. I have written in my css td cells
height: 20px; but IE doesn t care about about it, instead it adjust
its height in relation with neighbour td cell.

the pages can be found in:

http://www.helia.fi/~a0500249/paltamo/index.html

(you need Internet explorer to see the bug. Its the green section that
is cousing problem)

So I want the td - cell with fixed height to 20px.

sincerely Juha

 

[Knut Krueger]

Hi,

I have problem with my html code. I have written in my css td cells
height: 20px; but IE doesn t care about about it, instead it adjust
its height in relation with neighbour td cell.

the pages can be found in:

http://www.helia.fi/~a0500249/paltamo/index.html

(you need Internet explorer to see the bug. Its the green section that
is cousing problem)

So I want the td - cell with fixed height to 20px.

sincerely Juha

Hi Juha,
the regulars of the group told me a couple of months ago, after a
similar question about tables:
*You are abusing tables.*

Means tables are for data sheets but not to display anything in a fixed
form.

I took me a little time ( and some help form the group) to change from
*abusing tables* ( I was a little bit angry bout this statement) to css
positioning.
But the regulars of the group are right - its much better and you can
change the layout very quickly.

Have a look to http://www.csszengarden.com/ they show you the power of
CSS without tables

Regrads Knut

 

[Jukka K. Korpela]

Scripsit stereotyyppi:

I have written in my css td cells height: 20px;

Wrong choice. For all that you can know, 20px might be far too small to
accommodate text in the smallest size legible to a user. Browsers may, and
actually will, often override your height and width settings, but that's no
excuse for using the px unit.

but IE doesn t care about about it, instead it adjust
its height in relation with neighbour td cell.

the pages can be found in:

http://www.helia.fi/~a0500249/paltamo/index.html

You have a far too complicated layout table, with confusing colspan and
rowspan attributes, which probably confuse IE, too. Moreover, you have
syntax errors in your markup (though they are probably unrelated to this
issue). Always use a validator before asking for help with a web page in
public.

You also confuse anyone who tries to read the code when you use class names
like "gray_navi" - for an element that is _not_ rendered in gray.

It's probably easiest to start from scratch. The layout idea as such is not
particularly bad (just too much navigation as usual), and using a table is
the most practical way to implement it, but you should use the simplest
possible table then. You only need one (1) rowspan attribute and no colspan
attribute. Don't use any width or height attributes in the table; handle
such issues in CSS.

 

[Eric.M.Martinez]

Using tables for layout is just plain wrong. Knut has pointed you in
the proper direction and Jukka seems not to know that tables are not
meant for layout. Take some time to learn CSS and your pages will
look much nicer.

 

[=?ISO-8859-15?Q?G=E9rard_Talbot?=]

stereotyyppi wrote :

Hi,

I have problem with my html code. I have written in my css td cells
height: 20px; but IE doesn t care about about it, instead it adjust
its height in relation with neighbour td cell.

the pages can be found in:

http://www.helia.fi/~a0500249/paltamo/index.html

(you need Internet explorer to see the bug. Its the green section that
is cousing problem)

So I want the td - cell with fixed height to 20px.

sincerely Juha

Juha,

1-
You are misusing tables for layout. Please consult

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

and you can find CSS designs (page templates) at

http://www.gtalbot.org/NvuSection/NvuWebDesignTips/WebDesignResources.html#CSSWebpageTemplates


2- You are abusing and misusing images for pure layout purposes:
<img src="pics/1x1.gif" width="2" height="1" alt="" /> (5 occurences)
This is very bad and deprecated technique. You are bloating unneedlessly
your markup code (and DOM tree) with images that only serve the purpose
of spacing out elements. This technique also slows down download and
rendering of the page. Such "spacer.gif" technique is quite wrong
semantically and accessibility-wise.

3-
Define the natural language (if it is Finnish) of your page like this:

<html lang="fi">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fi">
<meta name="author" content="Paltamon Kunta" />
<meta name="keywords" content="Paltamon Kunta, Paltamo" />
<meta name="description" content="Paltamon kunnan kotisivut" />

If I am wrong, then consult
http://www.loc.gov/standards/iso639-2/php/code_list.php

4-
If you define the character set as iso-8859-1, then you do not need to
"escape" ä, ö by using named character entities. So,

<li><b>P&auml;&auml;sivu</b></li>

could be and *_should be_* written instead as

<li><b>Pääsivu</b></li>

Gérard

 

[dorayme]

Using tables for layout is just plain wrong.

It is often less wrong than using a screwdriver instead of a
proper punch in a minor mechanical situation where not a lot of
force is needed. The plainness of wrongs is not a simple black
and white matter

 

[Neredbojias]

Using tables for layout is just plain wrong.

Baloney. There are times when tables are the clear-cut choice to use for
layout. Looking at the page in question, I'd say it's a close call one way
or t'other, but a table would probably be simpler (if done right.)

Knut has pointed you in
the proper direction and Jukka seems not to know that tables are not
meant for layout.

Sure. That's why he's likely the most respected personage of html and
related knowledge to visit here regularly...

Take some time to learn CSS and your pages will
look much nicer.

Well, you finally got one right.

 

[Andy Dingley]

Using tables for layout is just plain wrong.

There's nothing "plain" about how wrong it is, or else there wouldn't
still be any debate on the matter. There certainly are cases where a
<table> is the appropriate way to control layout.

However I can't see it in this case (that layout is easily and cleanly
done with <div> and float). Even worse, that layout is using the
stretched single pixel gif technique, which really does need to be
stomped on.

I don't know why Jukka hasn't picked up on either of these, but his
ways are (as ever) inscrutable.