Repeat-y not working in Firefox

[areamike]

I am having a similar issue that this topic had
[webmasterworld.com...]

My website
<snip>

I have two background images that run down the left and right side of the theme I created. However, it will not show in FF> Works in IE though.

Here is my css containing the code:

td.lefttd {
background:url("images/left.gif") left top repeat-y;
}
td.righttd {
background:url("images/right.gif") right top repeat-y;
}

Here is the html that tries to use that class in my header and footer files:

<td width="10" nowrap="nowrap" class="lefttd"></td>
<td width="10" nowrap="nowrap" class="righttd"></td>

I'm not very good with css OR html and am learning as I go so be kind as to the terminology you use as you may lose me :)
Thanks in advance for ANY help.

[edited by: swa66 at 9:25 am (utc) on Sep. 24, 2009]
[edit reason] No links, please see ToS and Forum Charter [/edit]

[D_Blackwell]

Welcome to WebmasterWorld. The personal link will probably be chopped, so I will restrict my comments to the notes provided.

I added:
table {
height: 100%;
}
and used this as a method to create enough height in order to see the images tile repeat-y:

No problem in Firefox. Also removed the height from the <table> and added a few lines of text to each <td>. No problem with tiling. Also no problem with or without valid DTD.

Unless someone sees something that I have missed, you will need to provide test-ready markup that replicates the problem and shows that the background-images are not tiling repeat-y: as you intend.

BTW - In HTML 4.01, the nowrap attribute of the <td> element is deprecated. CSS should be used as 'best practice'.

[areamike]

No offence, but you LOST me at "Welcome"

"provide test-ready markup" <- what is that?

If you view my site in IE and then in FF you will see FF does not tile the background images as intended like IE does.

[rocknbil]

Welcome aboard areamike, but your link will get nixed, see #13 TOS [webmasterworld.com]. What D.B. means is issues are resolved on this forum by posting full code that duplicates the problem, not url's, which archives the issue for those seeing it a year from now when your sample page may no longer be in place, leaving a dead link. Second, a full working page is just too huge to sift through to isolate one problem, condensed code that tersely demonstrates the problem works best. The standing rule is "around 100 lines of code."

If this is your scenario,

<td width="10" nowrap="nowrap" class="lefttd"></td>

FF doesn't react well to empty table cells.

<td width="10" nowrap="nowrap" class="lefttd">&nbsp;</td>

Second, remove the quotes here. Not
background:url("images/left.gif") left top repeat-y;

use (but not really, see next point)

background:url(images/left.gif) left top repeat-y;

Last, and probably the real problem, I noted you have lots/of/paths/to/css.css. Note that the url's within the CSS must be relative to the css, not to the document. Javascript url's in external Javascript files are exactly opposite, they link relative to the document requesting it.

So if you have this,

<link rel="stylesheet" type="text/css" href="path/to/style.css">

In your css, you want to start the background attribute path with a leading slash. / This means "start at the domain root and follow the path to the image." Many coders do this

url(../../../whoah.gif)

Which becomes increasingly hard to follow, especially on late nights with an overdose of coffee. If you make a habit of using the forward slash, your CSS will always find the images, regardless of where your files are located on your system. The down side is it seldom works when testing files locally before uploading them.

So after all the long winded rambling, the probable solution, in your CSS, do this (note the slash.)

background:url(/images/left.gif) left top repeat-y;

P.S. <font> and <center> have also been long since deprecated, use style sheet selectors for these instead.

[areamike]

Thanks rocknbil,

All I ended up doing was adding &nbsp;&nbsp to the empty table cells and that seemed to work. If added a / at the beginning of my path to images it produced a jagged line down the left and right side of my theme without displaying the image.

Sorry about violating TOS#13

[swa66]

As far as I know not showing empty cells in a table is a violation of the CSS 2.1 standard:
[w3.org...]
(default is show)

Might be interesting to try adding

table { empty-cells: show; }

to reiterate the default that should be there already.