Table Spacing Issue Firefox / IE Difference

Hi-

I am having some trouble fixing a table row spacing issue which appears different in IE and Firefox.

The rows look fine in IE (how I want it) but have too much spacing after the first row in Firefox.

Here is a link to see:
http://hiddentreasurehosting.com/test/new_layout2.html

Any ideas how to fix the Firefox spacing problem?

Thanks!

Hello. I was wondering if you had a solution for this part of what you mentioned-
"Ok, it looks like what’s creating that extra space is the extra TR sections you are using the ‘_bottom’ prefix in the TD’s. IE and Opera are both rendering those as 0px high, because they have no content, while Firefox is assuming because there are carriage returns inside them, that there’s at least one space/line. Firefox ALWAYS renders a TR as a blank line even if it holds no <TD> (which setting them to invisible does).
"

If i have 1 row of 2 columns for a table, and only have text in the one on the right, the “blank” td for the one on the left will still give me an unwanted space in Firefox, not Safari. Is there a solution for this?
thanks!!

E-mail sent - lemme know if you don’t get it within the next few hours, I’ll toss a copy up on my server temporarily.

deathshadow-

wow thats awesome. truth be told i really know basic html and css, i’m not that great of a layout designer i’m a bit better at the php part of it all. :slight_smile:

it looks like you really went through my problem and worked out a great solution. now i’m just waiting on this approved attachment so i can check it out.

thanks again, really appreciate it

oh and if you dont mind you can also send the html attachment to mrterrysilver AT gmail DOT com

thanks man!

You’ve got some weird stuff happening in your css.
http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fhiddentreasurehosting.com%2Ftest%2Fnew_layout2.html

you can’t just have 0. you need to use units of measure. px or ems…

One spot you have used ems, and then mm ( you should try and be consistant.)

I think FFox is showing your page correctly, it’s IE showing it incorrecty because you are not using a valid doc type.

You also have 51 validation errors in your html, which is way over - considering your page is not even completed yet.

Fix all those errrors and see where you are at…

nadia

Ok, it looks like what’s creating that extra space is the extra TR sections you are using the ‘_bottom’ prefix in the TD’s. IE and Opera are both rendering those as 0px high, because they have no content, while Firefox is assuming because there are carriage returns inside them, that there’s at least one space/line. Firefox ALWAYS renders a TR as a blank line even if it holds no <TD> (which setting them to invisible does).

You know, I think you got a bit TOO fancy in showing/hiding your TD - instead of manipulating 6 separate TD every time they click, why not just manipulate the TR holding them? You got a bit TOO fancy with it methinks…

Another issue is that it’s not centering in firefox - this is because the 'align=“center” property in firefox is pretty much flat out ignored… the solution is to put the whole table in CENTER tags in addition to the align=“center” - I usually end up having to state BOTH because not all browsers see either method… even more annoying since you cannot rely on CSS to center ANYTHING properly/reliably cross-browser.

You are also opening a TBODY tag, and not closing it… since TBODY is supported by… well, nothing apart from Amaya, you can probably drop it alltogether.

I have something similar to what you are trying to do on one of my sites - I’ll dredge out the code and see if it applies to what you are attempting - again, methinks you are overthinking the solution here.

Ok, attached you’ll find a .html (renamed .txt so it will attach) that is how I’d code it.

Some major differences in there, and it should (SHOULD, I didn’t test) validate as XHTML transitional.

Let’s see… differences between yours and mine:

added doctype tag and closed all tags XHTML style.

Used <div> instead of tables - as long as they are in a <center> tag, they will center. (which is STILL the only reliable cross-browser way to get things centered right)

Designed with pt instead of px sized fonts, switched most of the metrics over to pt with a couple minor exceptions (buttons)

got the showall/hideall buttons working… your test page didn’t have the images, so I made quick and dirty css buttons.

By using div was able to put all the ‘hidden’ content in one container - no more calling multiple items just to hide/show stuff.

Moved the ‘horizontal break’ out as a simple DIV on it’s own from the rest of the content.

Added a more universal getObject function, which will make the hide/show work better in older browsers (although the hide/show all functions will not work in non HTML DOM compliant like Nyetscape 4)

Did some tweaks to the CSS and anchors for the e-mail/Aim/forums areas - look a lot better at different system metrics in IE and Opera, though Firefox still underlines EVERYTHING (including the images) incorrectly.

Replaced the ‘toggle’ anchors href=“#” with javascript:void() - a bit more predictable an action.

Oh, and a LOT of the anchors and images are getting their CSS settings through sub-properties of their parent container. This technique makes the content parts need a LOT less class declarations, making the whole thing a bit clearer.

Enjoy.