January 19th, 2006

Singing; Anatomy of a Tune
  • lauren

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).

Collapse )
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.

Reading and using a tutorial

As kunzite1 said in a previous post, this is one of the documents I've been working on. I'll try to limit the spamming to what is as complete as possible.

As usual, I'd love to know what you think - good and bad - so please comment. And if you do find this helpful, you're welcome to bookmark it or petition to have it added to the 'official' documentation. 0:-)

As this hasn't been made part of the official documentation, comments have been disabled.

Collapse )