FF cell width bug or misuse of CSS?

OK, so I'm relatively new to the world of CSS, being an old-school
HTML author who used to just write out plain HTML in 1996. However,
I'm trying to do the right thing here:

http://wowstreet.ajs.com/wowstreet?report=stable

and have hit a snag. I used a trick that I found on Wikipedia to re-
size text elements and place an image after them (in this case the
coin types in the prices). Problem is that in Firefox only, the column
remains sized for the original text without the extra "padding-right"
on the text. Is there some way that I can get around this, or am I
just misusing CSS in some way?

On Dec 10, 10:19 am, "Jonathan N. Little" <lws4... (AT) centralva (DOT) net>
wrote:

Well #1 the XHTML is giving you problems, you have some HTML in your
XHTML. I would suggest you use

I'll have to look into converting this to pure XHTML, then... I
thought that's what I was doing in the first place ;-)

Now to your problem. You don't need

border-collapse: collapse;

applied to all the table cell, just to the table. So level the rule for

.itemtable

but remove in

.namedata, .itemheader, .data

I took your advice, here, and got the same result. It seems that
combining cell alignment with CSS-added padding on the text just isn't
playing out well.

In fact, here's a very simple example:

http://wowstreet.ajs.com/test1.html

In my firefox (2.0) the gray background of the text overlaps the table
border by about 4 of 5 pixels, but you might have to make your browser
window narrower to get this effect if you're using a very wide window.
It looks like it may be triggered by the wrapping of the text in the
first column.

On Dec 10, 12:38 pm, "Jonathan N. Little" <lws4... (AT) centralva (DOT) net>
wrote:

Why? Why do you need XHTML? Just causes problem for IE.

It seems like a fair thing to structure my documents as XML, since
that allows me more trivial transformation later on, should I decide
to go down that route. It's also the default output mode for several
of the tools I'm using.

It's not the padding it's the border-collapse: collapse applied to the TDs

I already removed that. It didn't help.

http://wowstreet.ajs.com/test1.html

In my firefox (2.0) the gray background of the text overlaps the table
border by about 4 of 5 pixels, but you might have to make your browser
window narrower to get this effect if you're using a very wide window.
It looks like it may be triggered by the wrapping of the text in the
first column.

That's in quirks mode, padding are margins are calculated differently.
Not a true comparison.

Comparison? Comparison to what? Should the table that I referenced,
above render with the gray overlapping the table border or no? It
seems like a bug for that to ever happen, but I'm ready and willing to
hear otherwise. Let's put the larger, more complicated table aside for
a moment, since I think that's obscuring the basic problem here (I
admit that my HTML/CSS are weak, so there's no point in belaboring
that).

You CSS has a number of conflicting settings. If tables are collapsed
there there is no border-spacing for example.

Yeah, I removed that after doing some compliance checking. Also no
effect.

Here is a much simplified version and works as you expected. Note the
shortcut properties and the order of the values, especially on "font"

I'll take a look at this and see what I can do. Perhaps the solution
is in there somewhere, but you've made so many changes that it will,
almost certainly, take a while for me to find and I can't spend any
real time on this until tonight. I do like the more regular notation
for finding table elements. Thanks.

On Dec 10, 4:27 pm, Aaron Sherman <AaronJSher... (AT) gmail (DOT) com> wrote:

http://wowstreet.ajs.com/test1.html
Should the table that I referenced,
above render with the gray overlapping the table border or no? It
seems like a bug for that to ever happen, but I'm ready and willing to
hear otherwise.

And just for grins I tried the same in html4/strict:

http://wowstreet.ajs.com/test2.html

The developer toolbar plugin for Firefox tells me that this is well-
formed, standards compliance mode HTML.

Same overlap of cell walls. I'm having a very hard time figuring out
how anything in that very simple file with no external CSS could
possibly be causing this, other than by triggering a bug in table
layout for FF. Oddly enough it seems to do the same in an ancient
version of Mozilla that a friend of mine had handy, but Safari renders
it just fine. Dunno about IE.

On 2007-12-10, Aaron Sherman <AaronJSherman (AT) gmail (DOT) com> wrote:

On Dec 10, 4:27 pm, Aaron Sherman <AaronJSher... (AT) gmail (DOT) com> wrote:

http://wowstreet.ajs.com/test1.html
Should the table that I referenced,
above render with the gray overlapping the table border or no? It
seems like a bug for that to ever happen, but I'm ready and willing to
hear otherwise.

And just for grins I tried the same in html4/strict:

http://wowstreet.ajs.com/test2.html

The developer toolbar plugin for Firefox tells me that this is well-
formed, standards compliance mode HTML.

Same overlap of cell walls. I'm having a very hard time figuring out
how anything in that very simple file with no external CSS could
possibly be causing this, other than by triggering a bug in table
layout for FF. Oddly enough it seems to do the same in an ancient
version of Mozilla that a friend of mine had handy

It may the same code (and the same bug) in there. It looks like a bug to
me.

On Dec 10, 5:28 pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:

It may the same code (and the same bug) in there. It looks like a bug to
me.

Yeah, given the very small sample I was able to construct, I've
submitted a bug (#407813) to the Mozilla bug database. We shall see...

Thank you everyone for your input!

Aaron Sherman wrote:

On Dec 10, 4:27 pm, Aaron Sherman <AaronJSher... (AT) gmail (DOT) com> wrote:

http://wowstreet.ajs.com/test1.html
Should the table that I referenced,
above render with the gray overlapping the table border or no? It
seems like a bug for that to ever happen, but I'm ready and willing to
hear otherwise.

And just for grins I tried the same in html4/strict:

http://wowstreet.ajs.com/test2.html

The developer toolbar plugin for Firefox tells me that this is well-
formed, standards compliance mode HTML.

Same overlap of cell walls. I'm having a very hard time figuring out
how anything in that very simple file with no external CSS could
possibly be causing this, other than by triggering a bug in table
layout for FF. Oddly enough it seems to do the same in an ancient
version of Mozilla that a friend of mine had handy, but Safari renders
it just fine. Dunno about IE.

Yup, seems to be a bug. But the strange thing is the markup that I
posted does work in FF as you wish. Not sure why my CSS FF honors the
padding and yours here it does not. Need to dig a bit deeper.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Jonathan N. Little wrote:

the strange thing is the markup that I
posted does work in FF as you wish. Not sure why my CSS FF honors the
padding and yours here it does not.

Yours doesn't have white-space:nowrap on the td.

BTW, once that is included, the cell content shifts around unexpectedly
depending on where white space is added.

--
Berg

Bergamot wrote:

Jonathan N. Little wrote:
the strange thing is the markup that I
posted does work in FF as you wish. Not sure why my CSS FF honors the
padding and yours here it does not.

Yours doesn't have white-space:nowrap on the td.

BTW, once that is included, the cell content shifts around unexpectedly
depending on where white space is added.

I was suspicious of the white-space:nowrap, but had other things,

"work", to do. I did have nowrap on the THs which kind of makes sense,
but all TDs, well I think dropping it would make a small compromise.

But his little test pages with the 2 cell table did not even have
white-space set yet had the same problem...I wonder why?


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com