Problems with Mozilla

[Substance]

Hey everyone, I'm having an issue with Mozilla. IE and Chrome work just fine, but Gecko wants to adjust my table height. Did the usual things, checked over my code, tweaked some CSS, ran it through w3c... but to no avail.

Here's what I'm referring to:


I've included my work files as a .zip attachment.

[ralph.m]

Browsers are not consistent in how they calucluate height, so it's not a good idea to rely on elements stumbling on the height you want. The best you can hope for is that if you state the height of each element, things will work, though it's not a great strategy.

You could try this:

#tickertext table {height:153px}

Works for me in all Mac browsers, but you'll have to do your won testing.

[Substance]

I came to the same conclusion about 20 seconds before you posted that, and as I looked at it, I hoped that someone had replied with a better method.

Thanks for your reply, it works on the major's (Chrome, IE, and Gecko).

It drives me nuts that things are 1 or 2px off because of inconsistent calculation. A pixel is a pixel, a meter is a meter. When a police officer pulls me over for speeding, should I just tell him I calculate speed differently and by my calculations I was actually going under the speed limit?

Anyways, for further projects, is there a way to establish absolute placing / spacing across all browsers? I don't seem to run into it unless I'm running a good amount of divs mixed with tables. If there's a 'proper' way to do this, I would like to know.

[ralph.m]

When a police officer pulls me over for speeding, should I just tell him I calculate speed differently and by my calculations I was actually going under the speed limit?

Good idea. Thanks for the tip.

is there a way to establish absolute placing / spacing across all browsers? I don't seem to run into it unless I'm running a good amount of divs mixed with tables. If there's a 'proper' way to do this, I would like to know.

My attitude is not to get too attached to exact layouts. The web is fluid, and it's better to face that fact and adapt to it. If someone increases their font sizes, your pixel perfect layout will be blown apart anyway—and plenty of people have their system fonts set bigger than normal.

As I said, setting heights on things (on anything other than an image, perhaps) is doomed to fail on the web.

E.g. attached is a screen shot of your page with a little bit of font resizing.

[Substance]

I've actually not thought about that scenario, since when I want to enlarge a page (as a chrome user) I just hold CTRL and scroll the mousewheel. That screenshot makes my OCD go absolutely nuts.

Do you have any suggestions on patching that error? Perhaps locking heights and just hiding the overflow?

[ralph.m]

Sorry, didn't mean to alarm you. But as far as I know, the only way to avoid this is to allow more fluidity in the design and NOT try to lock down heights.

Mind you, most browsers are now set to resize as you described, so some will argue that I'm being alarmist. All the same, though, some people DO have system fonts bumped up. I recently visited a client in this situation, and it was a big reminder that it does happen. So the client was not seeing what I expected. Luckily, the design was very flexible, and was not broken despite the larger font sizes, though it didn't look quite as nice.