View Full Version : Cross-Browser Positioning Issues

10-19-2007, 06:48 AM
Hello all,

I'm a big-time newbie to the world of CSS, which I'm sure is your favorite thing to deal with. I've spent the last three days trying to solve a positioning issue between Firefox and Safari. I've been researching non-stop, trying everything I come across, to no avail.

I'm using a CSS-based technique for a fluid box with rounded corners, and it contains a <div> which uses the fleXcroll technique for custom scrollbars. For some reason, the fleXcroll <div> is positioned perfectly in FF, but floating way out to the right in Safari, seemingly with no explanation. My code validates at W3C (minus a few font issues I'm toying with), and I'm completely out of ideas.

The page can be found at: http://www.calvinmarty.com/modx/index.php?id=7

It's got a bunch of dummy data in it right now. Any help would be greatly appreciated. I assume it's a simple, beginner's error but I'm really tearing my hair out. Thanks in advance,


10-19-2007, 07:05 AM
I would spend some more time correcting the markup validation errors and the CSS validation errors and warnings (some of the css errors can prevent all following css from being parsed by the browser), before you worry about fixing browser specific problems -

10-19-2007, 07:45 AM

Before I started teaching myself CSS, I considered myself an intelligent person. But, I swear, the minute I start trying to wrap my head around all of this, I start overlooking the obvious. As in, I had been back-and-forthing with the CSS validator, but I completely overlooked the markup validation.

After following its suggestions, and, as such, the rules, things have started sliding back into place and looking better in multiple browsers. Go figure, eh?

Anyway, just wanted to say thank you for picking my forehead up off the keys and putting me back on track. I really do appreciate it, and it won't be the last time I come crawling through here.