Tables Behaving Badly

[Parrot]

Hi,

Usually I'm able to design for both Firefox and Explorer fairly easily.
Some inconsistencies often pop up, but I'm always able to tweak the code in
such a way that both browsers are able to display the page exactly the same.

This time I'll be damned if I can figure out how to resolve this
discrepancy. I'm not even sure why there IS a descrepancy. I've set the
height of each table cell exactly to the height of the image(s) it displays,
and it shows up perfectly in Firefox. But when I look at it in Explorer,
each table is extended slightly height-wise so that the background repeats
itself for a line where it's not supposed to.

Does anybody have any ideas? Have a look:

http://s89202539.onlinehome.us/gmfiles/template/template.htm

 

[mbstevens]

Hi,

Usually I'm able to design for both Firefox and Explorer fairly easily.
Some inconsistencies often pop up, but I'm always able to tweak the code in
such a way that both browsers are able to display the page exactly the same.

This time I'll be damned if I can figure out how to resolve this
discrepancy. I'm not even sure why there IS a descrepancy. I've set the
height of each table cell exactly to the height of the image(s) it displays,
and it shows up perfectly in Firefox. But when I look at it in Explorer,
each table is extended slightly height-wise so that the background repeats
itself for a line where it's not supposed to.

Does anybody have any ideas? Have a look:

http://s89202539.onlinehome.us/gmfiles/template/template.htm

Have a look at:
http://www.alistapart.com/articles/imagemap/
....might give you a way to get what you want without
all the image slicing. Image sliced markup is really outdated.

 

[Parrot]

Have a look at:

http://www.alistapart.com/articles/imagemap/
...might give you a way to get what you want without
all the image slicing. Image sliced markup is really outdated.

An image map won't allow me to make the page flexible so that the graphical
text area takes up the full width of the page no matter what resolution the
browser's in. I don't know how you can say that image slicing is outdated,
it's still a widely used, useful technology.

 

[Parrot]

I found the answer, another friend helped. Apparently I had to remove all
the tab characters from the document. Looks like Microsoft won't let me
indent my HTML code in order to make it more readable. I'm a little annoyed
about that... but it worked.

 

[mbstevens]

An image map won't allow me to make the page flexible so that the graphical
text area takes up the full width of the page no matter what resolution the
browser's in. I don't know how you can say that image slicing is outdated,
it's still a widely used, useful technology.

Did you actually read the article? It is talking about replacements for
image maps, not the old fashioned image maps themselves. As a side
benefit, you learn how to layer text over images in interesting ways.

How did I find out the following information about your page with hardly
more than a cursory glance?

No doctype, no character encoding, there is no 'TOPMARGIN' attribute,
nor a 'LEFTMARGIN' or 'RIGHTMARGIN' attribute, nor a 'BACKGROUND'
attribute. Value of 'VALIGN' cannot be 'center'. There is no attribute
'HEIGHT'.

 

[mbstevens]

Did you actually read the article? It is talking about replacements for
image maps, not the old fashioned image maps themselves. As a side
benefit, you learn how to layer text over images in interesting ways.

How did I find out the following information about your page with hardly
more than a cursory glance?

No doctype, no character encoding, there is no 'TOPMARGIN' attribute,
nor a 'LEFTMARGIN' or 'RIGHTMARGIN' attribute, nor a 'BACKGROUND'
attribute. Value of 'VALIGN' cannot be 'center'. There is no attribute
'HEIGHT'.

....some of the attrubutes do exist, but are misapplied here.

 

[Mark Parnell]

How did I find out the following information about your page with hardly
more than a cursory glance?

Ctrl+Shift+H in my browser.

 

[mbstevens]

Ctrl+Shift+H in my browser.

Awww, now you're giving hints. Ok, me, too.
Q: Who was the first HTML vampire?
A: Valid the impaler.

(Ducks as beer cans are thrown.)

 

[Parrot]

Did you actually read the article? It is talking about replacements for

image maps, not the old fashioned image maps themselves. As a side
benefit, you learn how to layer text over images in interesting ways.

It's an interesting technique, but I believe it would still limit me to a
single fixed background image, would it not?

 

[Mark Parnell]

Awww, now you're giving hints.

Only subtle ones.

Ok, me, too.
Q: Who was the first HTML vampire?
A: Valid the impaler.

That's much more of a hint than mine was.

(Ducks as beer cans are thrown.)

(Wishes he had an artistic flair so he could draw "ducks as beer cans"
being thrown.)

 

[mbstevens]

It's an interesting technique, but I believe it would still limit me to a
single fixed background image, would it not?

Don't see why. You would just place your images of rounded corners in
the left and right columns of a CSS 3 column template, equidistant from
the window top, and (possibly) with the z-index of the left and right
column set higher than the center column.

 

[mbstevens]

(Wishes he had an artistic flair so he could draw "ducks as beer cans"
being thrown.)

http://www.mbstevens.com/B/relaxedduck.gif
Maybe the ducks could throw their stogies.
(Common practice in Country and Punk bars
that don't discriminate against Avians.)

 

[Jonathan N. Little]

I found the answer, another friend helped. Apparently I had to remove all
the tab characters from the document. Looks like Microsoft won't let me
indent my HTML code in order to make it more readable. I'm a little annoyed
about that... but it worked.

Yes, the browsers are supposed to ignore the whitespace, but *some* do
not. I think you found one ;-) When using image-slicing with tables I
remove all the whitespace even CR's between tags prevents a lot of
headaches. Not great for maintenance though...