<TD>, CSS and Firefox

[matt cook]

I have having two problems with the <TD>, CSS, Firefox combination. I
would greatly appreciate any information on fixing them.

Firstly, none of the padding or margin values I apply to a <TD> have
any visual effect. Everything is fine in IE.

Secondly, I am trying to set the background-image of a particular <TD>
to an image, and that's not working either. Applying it to the parent
<TR> works, as does applying it to other <TD>s in the document. The
image will display if inserted with an img tag. There are no classes
applied to any of the cell's parents.

<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td width="220"><im g src="images/header_small.gi f" width="219"
height="60"></td>
<td background="ima ges/cloudsandangles .gif"
class="cloudsan dangles"></td>
</tr>
<tr>
<td colspan="2" bgcolor="#1573F F"
background="../Site/images/bargrad.gif"></td>
</tr>
</table>

Again, everything is fine in IE (even without the <td background>)

[DU]

matt cook napsal(a):

I have having two problems with the <TD>, CSS, Firefox combination. I
would greatly appreciate any information on fixing them.

Firstly, none of the padding or margin values I apply to a <TD> have
any visual effect. Everything is fine in IE.

You have not provided an example, an url on this. So, it's kinda
difficult to understand, to guess what you mean, to guess what your code
actually is, what you expect and what you get.

What kind of visual effect would you actually expect to see with margin
applied to a table cell? A margin applied to a table cell makes no sense
in my mind. Border-spacing as a CSS2 table property or cellspacing as an
HTML 4.01 attribute is different.
Secondly, I am trying to set the background-image of a particular <TD>
to an image, and that's not working either. Applying it to the parent
<TR> works, as does applying it to other <TD>s in the document. The
image will display if inserted with an img tag. There are no classes
applied to any of the cell's parents.

<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td width="220"><im g src="images/header_small.gi f" width="219"
height="60">
Your code is not entirely consequent. You have <table width="200%", then
<td width="220" and then an <img width="219"
You can just drop width constraints because they are unneeded here.
</td> <td background="ima ges/cloudsandangles .gif"
class="cloudsan dangles"></td>
..cloudandangle s is not defined in the code you provided here.
background attribute is not defined anywhere in HTML 4.01. I assumed uou
probably meant to use
style="backgrou nd-image: url('images/cloudsandangles .gif');
Finally, your table cell is empty: no text node.
</tr>
<tr>
<td colspan="2" bgcolor="#1573F F"
bgcolor is deprecated.
background="../Site/images/bargrad.gif"></td>
background is invalid markup code.
</tr>
Better is
style="backgrou nd: #1573FF url('../Site/images/bargrad.gif');"
Again, you have an empty cell; so you should not see the background
image nor color since the text node is empty.
</table>

Again, everything is fine in IE (even without the <td background>)

DU
--
The site said to use Internet Explorer 5 or better... so I switched to
Netscape 7.2 :)

[matt cook]

DU <dr*******@hotN OSPAMmail.com> wrote in message news:<2q******* ******@uni-berlin.de>...

matt cook napsal(a):

I have having two problems with the <TD>, CSS, Firefox combination. I
would greatly appreciate any information on fixing them.

Firstly, none of the padding or margin values I apply to a <TD> have
any visual effect. Everything is fine in IE.

You have not provided an example, an url on this. So, it's kinda
difficult to understand, to guess what you mean, to guess what your code
actually is, what you expect and what you get.

Simply, I have a TD tag (or a TR tag) with a class attached to it like
this:
<tr valign="top" bgcolor="#62C0F F" class="10pad">.

10pad looks like this:
..10pad {
padding:10px;
}

I expected Firefox to act like IE does and pad the cells it's applied
to. I mentioned margins because a fix I found for a similar issue uses
them.
As for the background issue, I fixed that by setting the TR background
instead of the TD. This works in Firfox, although it works differently
to IE and needs a line of browser specific code to work on both.
I know I should be using DIVs instead of tables BTW :-)

[Mark Tranchant]

matt cook wrote:

DU <dr*******@hotN OSPAMmail.com> wrote in message news:<2q******* ******@uni-berlin.de>...

You have not provided an example, an url on this. So, it's kinda
difficult to understand, to guess what you mean, to guess what your code
actually is, what you expect and what you get.

Simply, I have a TD tag (or a TR tag) with a class attached to it like
this:
<tr valign="top" bgcolor="#62C0F F" class="10pad">.

10pad looks like this:
.10pad {
padding:10px;
}

I expected Firefox to act like IE does and pad the cells it's applied
to. I mentioned margins because a fix I found for a similar issue uses
them.

Still no URL. I have working padding on a <td> here:

http://tranchant.plus.com/tmp/td
As for the background issue, I fixed that by setting the TR background
instead of the TD. This works in Firfox, although it works differently
to IE and needs a line of browser specific code to work on both.
The above URL also shows a working td background image via CSS. Both
features work fine in Firefox and IE.

POST A URL AND WE CAN HELP!!! Snippets of out-of-context code are no good.
I know I should be using DIVs instead of tables BTW :-)

Not necessarily <div>s: you can style and position other elements. But
if you know you should be not using tables, and tables are causing you
problems, stop using them.

--
Mark.
http://tranchant.plus.com/

[kchayka]

matt cook wrote:

<tr valign="top" bgcolor="#62C0F F" class="10pad">.

I expected Firefox to act like IE does

Maybe Firefox is following the specs where IE does not (big surprise),
is ignoring the invalid class name, thus not applying those styles.

<URL:http://www.w3.org/TR/CSS2/syndata.html#q4 >
"In CSS2, identifiers (including element names, classes, and IDs in
selectors) [...] cannot start with a hyphen or a digit."

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[matt cook]

kchayka <us****@c-net.us> wrote in message news:<2q******* ******@uni-berlin.de>...

matt cook wrote:

<tr valign="top" bgcolor="#62C0F F" class="10pad">.

I expected Firefox to act like IE does

Maybe Firefox is following the specs where IE does not (big surprise),
is ignoring the invalid class name, thus not applying those styles.

<URL:http://www.w3.org/TR/CSS2/syndata.html#q4 >
"In CSS2, identifiers (including element names, classes, and IDs in
selectors) [...] cannot start with a hyphen or a digit."

And indeed, that is the case. Thank you!

[kchayka]

matt cook wrote:

kchayka <us****@c-net.us> wrote in message news:<2q******* ******@uni-berlin.de>...

matt cook wrote:

>
> <tr valign="top" bgcolor="#62C0F F" class="10pad">.

<URL:http://www.w3.org/TR/CSS2/syndata.html#q4 >
"In CSS2, identifiers (including element names, classes, and IDs in
selectors) [...] cannot start with a hyphen or a digit."

And indeed, that is the case. Thank you!

FYI, in the future, you can find errors like this yourself if you
validate your code.
<URL:http://validator.w3.or g/>
<URL:http://jigsaw.w3.org/css-validator/>
<URL:http://www.htmlhelp.co m/tools/>

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.