Safari table rendering bug/issue

[wdbike]

If you go to http://www.wdbike.biz on a Macintosh using Safari (or IE for mac), you will see that you have to scroll down the page to get to the main content. Somehow Safari thinks that it should go below the left sidebar. Every other browser, and Dreamweaver too for that matter, sees the table properly.

I have been beating my head against the wall on this one for longer than I care to explain here. Any ideas? Has anybody had an issue like this and resolved it successfully? Note I have checked with the W3C tools to make sure there are no spacing/table errors in the code. I have turned off the right sidebar (Safari just makes the center column wider). I have set the center column to 75%, and then back to 100% when it looked even worse. I've also tried a few million other things I can't think of offhand. Is there some Safari specific spacing rule I have overlooked?

Thanks in advance, Keith

[Lala_G_Clef_Jewelry]

Is there some Safari specific spacing rule I have overlooked?

Thanks in advance, Keith

sorry not at my mac right now, ill try to look at it tomorrow when i am, but safari does not have any special rules from what i have found. all the sites ive looked at on my mac have been fine.

[dbltoe]

for one thing, you've got a float AND text-align around lines 70-75 in the stylesheet.css.

And Firefox displays in the way you described as well.

[altar]

Well I'm not on a Mac, but on pc with Firefox, and I have to scroll down too.

[wdbike]

I'm on pc with Firefox and it's fine ... in fact, I've never had the problem! I'll look into the float/text-align.

[wdbike]

Just looked at it. Still fine for me with FF. And the float/text align is for the header for placement in the top cell only - I don't see how it could affect the rendering of the page table? Thanks for the input BTW.

[wdbike]

OK, I am finding a couple of pages that are doing it in FF now, thanks for the head's up. This was not the case before I tried to fix this issue, and (at least) only occurs for certain pages.

Days of work only to screw it up for a second browser, and not fix it for the first ... Somebody please help me!

[dbltoe]

When I disable your stylesheet.css, the page displays properly as far as layout.

That leads me to believe the problem is in the stylesheet.css. I do find several instances where you have "double-dipped" calls. TABLE.header on line 109 has background as a color, then an image. TABLE.headerNavigation on line 122 has both background and background-color. You also have used some labeling that may cause some problems in some browsers. At line 210 and several more after, you used .column_box_spacer_left when naming convention generally dictates .coulmnBoxSpacerLeft. Get yourself a copy of TopStyle Lite and take a good look at the stylesheet.

BUT, if you look at the source file after cleaning the html in FireFox, everything displays perfectly. I do see several instances of using

###px

in td width and height calls versus just

###

.

I see lots of <span which leads me to assume that you may have been using a file editor that throws these tags in just for fun. They are NOT fun when they start messing with HTML validation as some of yours have.

Bottom line is that I feel you have several small problems in the stylesheet and several problems in the source files.

Fixing the improper widths in the source files would be what I'd work on first. That's probably causing the wrap in the table-based layout. Makes you see why ZenCart is trying to get away from table-based layout.

Best of Luck. Let us know if we can help more.

[wdbike]

! Eureka! I found a rogue float:right in the .center_column css class. I must have looked right through it 100 times. The fact that this seems to have fixed it is strange to me, given that .center_column only should affect the contents of the .main_page td's and not the .main_page td itself. But I'm not gonna argue.

[wdbike]

And dbltoe, thanks a lot for the in-depth look. I will check on some of the messy code you're describing.