Firefox do not understand height="100%" + td background

Forum Moderators: not2easy

Message Too Old, No Replies

Firefox do not understand height="100%" + td background

ivanjpm

7:25 am on Feb 20, 2018 (gmt 0)

Hello all!

Mi problem is with height="100%" and td background with two images that are not displayed in Firefox.

The central image is composed of two images, each in a <td> cell, the table has two columns (right and left) with 100% height:

<td background="images/left.gif" width="169" height="100%"></td>
<td background="images/right.gif" width="112" height="100%"></td>

I do not want to use exact pixels with the height due that every html in the web has got different height and it is difficult to be accurate.

Any ideas to solve this?

Thank you!

[edited by: not2easy at 3:16 pm (utc) on Feb 20, 2018]
[edit reason] (depersonalized) [/edit]

not2easy

3:24 pm on Feb 20, 2018 (gmt 0)

Hi ivanjpm and welcome to the forums. It would help to know the doctype you are using because the

background="images/left.gif" width="169" height="100%"

appears to be from a html4 (or older) page. Compliant browsers need to have hints to understand how to parse html and css. Browsers depend on finding instructions in the document (page) to tell them how to read and display the page.

ivanjpm

5:20 pm on Feb 20, 2018 (gmt 0)

Hello!
I must say that my html knowledge is about 10%...
The files were originally created in 2009 and I'm upgrading the design (images and text, not code), so they are quite old, and in fact are .htm not .html.
Thank you!

not2easy

7:53 pm on Feb 20, 2018 (gmt 0)

At the top of the page there should be a <!DOCTYPE tag to tell the browser what flavor of HTML (or htm) is used on that page. If the doctype tag is missing, you are working in "quirks mode" which means that the browser may interpret the content in unexpected ways.

Try the one for html 4.01:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

because that inline styling would conflict with just about anything else today. That tag belongs on the first line in the document before anything else. HTML 4.01 started going away long before 2009 but some site creation software continued cranking it out.

If you plan to be working with these pages long term it would be worthwhile to spend time to learn more about the css and html that are in wide use today. The old html is not likely to be mobile friendly for one thing. Many people find it easy to learn at w3schools.com which gives one lesson at a time so you learn at your own speed.

ivanjpm

8:38 pm on Feb 20, 2018 (gmt 0)

Hello!
Thanks for your reply!
I'm gonna do the change you suggest me.
Yes, it is not mobile friendly all that old code... but I hope html 4 will be used for long time.
Thank you again for your patience.

lucy24

9:16 pm on Feb 20, 2018 (gmt 0)

and in fact are .htm not .html

It's the same thing. The .htm extension simply means that either the page was created, or the designer started coding, years and years ago when certain operating systems only permitted 8+3 filenames. It's as meaningless as the difference between .jpg and .jpeg.

And speaking of meaningless, so is "height=100%" in the html for a <td>. What else would its height be? A table cell, by definition, takes up the full height of its row. A percentage width on a <td> (or on the <table> as a whole) has meaning; a percentage height doesn't.

Here, as so often, it's a big help if you first explain in English what you're trying to do, what visible result you're trying to achieve. From there, we work out the html + css that will give that result.

ivanjpm

9:07 am on Feb 21, 2018 (gmt 0)

If you see it with Firefox and with other browser you will see that in Firefox there are missing the left and right columns. The code used is:

<tr align="left" valign="top">
<td background="images/left.gif" width="169" height="100%"></td>
<td background="images/right.gif" width="112" height="100%"></td>
</tr>

[edited by: engine at 1:55 pm (utc) on Feb 21, 2018]

[edited by: not2easy at 2:10 pm (utc) on Feb 21, 2018]
[edit reason] Please see WebmasterWorld TOS - no urls [/edit]

not2easy

2:17 pm on Feb 21, 2018 (gmt 0)

If those images are not the correct size, setting the height to 100% isn't going to make them line up. There is a significant difference in the width of those images that suggests there might be a difference in their height as well, since you mentioned they were two halves of a vertical image. Make sure the images are the same height so they can line up.

ivanjpm

2:48 pm on Feb 21, 2018 (gmt 0)

both are 3 px height.

not2easy

3:45 pm on Feb 21, 2018 (gmt 0)

We will need you to describe what is happening. Not with links, but in words because we don't offer personal service in the public forums. We need to understand what is happening and then we can possibly help with what to do to correct it. I understand that it is more difficult to describe in words, but this is not the site review forum [webmasterworld.com] where others can visit your site, so we need your help.

If the two images that are supposed to line up are both 3 px in height but have different widths, is the mismatch where they do not line up vertical or horizontal? Are these two <td cells side by side or on different <tr rows?

lucy24

7:23 pm on Feb 21, 2018 (gmt 0)

Why is this even being done in html? It belongs in css:

td.lefthalf {background: url("images/left.gif") center right no-repeat; height: 3px;}
td.righthalf {background: url("images/right.gif") center left no-repeat; height: 3px;}

(and background-position set so the two halves touch) paired with

<tr>
<td class = "lefthalf">&nbsp;</td>
<td class = "righthalf">&nbsp;</td>
</tr>

Although it is not technically necessary in modern browsers, I've found that putting an   in any empty cell is a good way to absolutely guarantee that it retains any desired properties such as background or border.

But this leaves the unanswered question:
What visible result are you trying to achieve?
If the cells have no content other than the 3-pix-tall image, what are the cells even for? Can't you achieve the same result, more simply and cleanly, by assigning the background-image to the table as a whole? Or, if it recurs throughout the table, make it the background of cells within a given <tr> class--changing the background-position to "top"--or of every cell within a given <table> class.

More to the point: 3 pixels? Really? That sounds more like a border than a background. So, to repeat,
What visible result are you trying to achieve?

ivanjpm

8:36 pm on Feb 21, 2018 (gmt 0)

It is impossible for me to explain in good english all this matter.
The images are like columns. Imagine two columns. They are 3 px tall but as a repeated background. So in one web page they are 2201 px, in another 875 px... whatever. They are columns next to the text that is in the center. Sometimes there are more text, so all is taller, so its the columns. So making them 100% height as background was the easy way...
Anyway, close this post, I cannot explain myself better.
Thank you for your patience.

lucy24

9:27 pm on Feb 21, 2018 (gmt 0)

They are 3 px tall but as a repeated background.

Aha! That's not 100% height; it's "background-repeat: repeat-y" in the css. 100% height would mean that the image is stretched vertically to fill the available space--which is also perfectly legitimate, but again it has to go in the CSS as "background-size".

CSS2 version:
[w3.org...]

CSS3 version:
[w3.org...]

Now please say you're not using tables for format in this day and age.

ivanjpm

11:49 pm on Feb 21, 2018 (gmt 0)

Thanks lucy24.
I'm a designer, I only make better look to the web. The code is so old and my knowledge is so tiny, that I leave all as it was. Fortunately, it is displayed OK nowadays. It is a very simple web.
thank you again for the info!

lucy24

12:31 am on Feb 22, 2018 (gmt 0)

Just because it's in HTML 4.01 doesn't mean it can't have CSS. In fact historically that was the huge advance with HTML 4 over earlier versions--and that's already taking us back more than 20 years. In the present case it would be simpler and more efficient to add an appropriate stylesheet than to try to shoehorn everything into the existing HTML.