Problem with explorer - table design

[ofiras]

Hello,
I am having a problem with explorer regarding tables. I made a table
that is located in a bigger table cell, and I wanted it to take 100%
of the cell's width. This is the table tag I made: "<table border='0'
cellspacing='10' cellpadding='1' align='center' width='100%'>". It
works as I wanted in Firefox, but in explorer the table is much bigger
than the cell's width when the table is not there.
The page is "http://testweb101.awardspace.com/show.html".
You can see that in explorer the middle cell has a table in it, and it
is too wide. (In construct to Firefox)
By the way, I have another problem with the same code in Firefox - the
first respond to a topic has a lot of space from the right end of the
table, even thought I wrote width=10 (and it is way bigger if
Firefox).
Please help me,
Ofir.

 

[rf]

Hello,
I am having a problem with explorer regarding tables.

No, your real problem is that you are using code that went out of fashion
last century.

Re-write it using modern technology.

 

[ofiras]

No, your real problem is that you are using code that went out of fashion
last century.

Re-write it using modern technology.

Can you be more specific? I learned html long ago so i don't know what
you mean...

 

[Adrienne Boswell]

Gazing into my crystal ball I observed ofiras <[email protected]> writing
in

Can you be more specific? I learned html long ago so i don't know what
you mean...

Please trim signatures when you reply to a post.

I agree with Richard, I would scrap what you have and start over. The
methods you learned for marking HTML you learned long ago have evolved.
No more presentational markup, eg: <font color='blue' size='3'
style='font-family: Arial'> - now it's semantic markup, using the right
tool for the job. Use heading elements for headings, lists for lists,
tables for tabular data (not for positioning of elements), paragraphs
for paragraphs (no repeated line breaks). Leave presentation to CSS -
that's what it's for.

You are mixing style attributes with presentational markup. Don't.
Markup your document in a meaningful way, and put all the presentation
in an external stylesheet.

Start learning basic HTML (again) and CSS - [http://htmldog.com/] is a
good place to start.

 

[ofiras]

Can you be more specific? I learned html long ago so i don't know what
you mean...

Please trim signatures when you reply to a post.

I agree with Richard, I would scrap what you have and start over.  The
methods you learned for marking HTML you learned long ago have evolved.  
No more presentational markup, eg: <font color='blue' size='3'
style='font-family: Arial'> - now it's semantic markup, using the right
tool for the job.  Use heading elements for headings, lists for lists,
tables for tabular data (not for positioning of elements), paragraphs
for paragraphs (no repeated line breaks).  Leave presentation to CSS -
that's what it's for.

You are mixing style attributes with presentational markup.  Don't.  
Markup your document in a meaningful way, and put all the presentation
in an external stylesheet.

Start learning basic HTML (again) and CSS - [http://htmldog.com/] is a
good place to start.

A lot to learn... Thanks.
Ofir.

 

[ofiras]

Yet another problem - I have rearranged the content with css instead
of tables, but I can't get this working.
I used static position of the div (with class box1) to create space
between it and the border, but it doesn't work and I can't figure out
another way to do it. plus, I wanted the date and time (in green) to
be in the left of the line, in the same line as the "test" link, but
when I put it in a div it is going one line downwards, and this is
very frustrating. I haven't found any way to do it without tables.
Again, this is the page: http://testweb101.awardspace.com/show.html
(don't mind the surroundings; I will change it to css too afterwards
since for now I don't have any problems with it.)
Please help, I must finish it soon.
Ofir.

 

[dorayme]

I have rearranged the content with css instead
of tables, ... http://testweb101.awardspace.com/show.html

It does not seem that way. If you are going to use tables for laying out
a whole page this way, you must make sure it at least validates. For the
simple reason that if you are going to be bad, at least do it well.

 

[ofiras]

You seem to have used position: static and right: 80px. Right does
nothing to boxes that are position: static, it only applies to fixed,
absolute or relative (and means different things in those three cases).


Move the date up in the HTML so it's the first thing in box1. Why use a
div at all? If you really want one, make it display: inline.

Thanks, I finally placed the date and time where I wanted.
In addition, I successfully made a space between the div and the right
border of the middle cell.
But I still have one more problem - I used relative position in the
box1 div and right: 10px but now it goes out of the middle cell's left
border... Is there a way to fix it (I thought about making the width
10px smaller but I'm not sure it is possible...)
Sorry if I am annoying... I'm frustrated.
Again the link to the page is: http://testweb101.awardspace.com/show.html
Please help me!
Ofir.

 

[ofiras]

Get rid of width: 100%, and don't set width at all (or explicitly set
"width: auto" if you like) Then give it margin-right: 10px. You can also
set a left margin if you want.

General tips:

1. width: 100% is hardly ever needed, width: auto is much more often
   what you want.
2. You hardly ever want to use position: relative for anything other
   than its side-effects (on positioned descendents and so that you can
   use z-index). This means that if you ever do use position: relative,
   you very likely don't want to set top, bottom, left or right to
   anything but to leave them all at 0. The only useful use of relative
   with an offset I think I've ever seen is Korpela's suggestion to use
   it for superscript and subscript so that they don't change the line
   box height.

Thanks.
Well I thought I finished with it when I saw that everything is fine,
except that I only checked in Firefox. Now I see that in explorer
there are still problems with it :-(. I hate explorer!
In explorer the date is getting out of the cell's left border, and for
some reason the background in the second div (where the background is
lighter) starts later than the text.
Please help me finish this and thanks a lot for the help,
Ofir.

 

[ofiras]

I can't help you with Explorer I'm afraid. I don't have access to the
browser but hear it's very buggy.

The only thing I can recommend is use simple, valid HTML markup and turn
off all stylesheets for IE.

But then i will go back to the problem that made me write this topic.
If you will find a way to do what i want without the stylesheets i
will be very happy.
Thanks anyway,
Ofir.

 

[Rob W.]

ofiras schreef:

Thanks.
Well I thought I finished with it when I saw that everything is fine,
except that I only checked in Firefox. Now I see that in explorer
there are still problems with it :-(. I hate explorer!
In explorer the date is getting out of the cell's left border, and for
some reason the background in the second div (where the background is
lighter) starts later than the text.
Please help me finish this and thanks a lot for the help,
Ofir.

Maybe it helps if you get rid of all the validation errors first.
check this:
http://validator.w3.org/check?verbose=1&uri=http://testweb101.awardspace.com/show.html