Guess (lauren) wrote in component_help,

Table Borders & Cross-Browser Compatibility


I'm having a cross browser compatibility issue when dealing with Firefox & Safari (I'm not sure if the issue is in Win/IE or not, since I'm on a Mac). Anyway, the edges of both the main entries & the sidebar components are "chopped off" so to speak; the left & right borders are missing as well as a few pixels (I only know this because of the padding settings). Anyway, I've tried messing around with my CSS, seeing if maybe changing border-collapse properties or cellpadding would fix the problem, but I've had no success thusfar. I don't think it's an overflow issue since the page seems to stretch perfectly well. I've tried adjusting the table cell widths to see if that did anything, tried making them percentages, & still nothing. The layout is nowhere near finished; I just started working on it yesterday, so ignore any other anomalies you may see.

I'm not really all that familiar with S2 yet & the code I have is incredibly messy since I'm in the process of trying to shorten the square components codes using the method discussed in the flatbox tutorial here (creating classes, etc etc).

In Firefox
In Safari
(correct display)
Free Image Hosting at www.ImageShack.usFree Image Hosting at

The difference is very subtle, but you will notice that in Firefox, the dark grey border around the entries & the side component is missing, where it shows up in Safari.

Anyway, any help with identifying the problem would be superb.

  • Post a new comment


    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened