CSS woes

Lemmy · 2007-05-24, 11:28 AM

Inspired by another thread and Jayeff's comments I've decided to give a tableless CSS design a shot for a project I'm working on, but I'm running into problems right off the bat.

I've got a 3-column design that looks good for what I need...but only in IE. In FF and Opera the right column expands. If there's a Guru out there who could take a look I'd be very grateful.

HC-Majick · 2007-05-24, 11:48 AM

Sent ya a pm...

Lemmy · 2007-05-24, 11:59 AM

Quote:

Originally Posted by HC-Majick

Sent ya a pm...

Thanks!

Preacher · 2007-05-24, 12:06 PM

Quote:

Originally Posted by Lemmy

Thanks!

Did that PM fix things? Because if it did I'd love to know what I missed.

Lemmy · 2007-05-24, 12:14 PM

Quote:

Originally Posted by Preacher

Did that PM fix things? Because if it did I'd love to know what I missed.

Majick was kind enough to share a design that works in both IE and FF. I'm sure he doesn't mind me passing it on. I'll check it out later.

Lemmy · 2007-05-24, 12:24 PM

I think I just fixed it! I removed the max-width and it looks good. The only reason it was there was to prevent very long lines (hard to read), but it looks OK on 19" monitor @ 1280 x 1024. So there shouldn't be any downsides, right?

HC-Majick · 2007-05-24, 01:05 PM

Of course I don't mind.. It's a default layout straight out of dreamweaver ....

Quote:

Originally Posted by Lemmy

Majick was kind enough to share a design that works in both IE and FF. I'm sure he doesn't mind me passing it on. I'll check it out later.

Preacher · 2007-05-24, 11:53 AM

Quick answer, you're fucked.

What you're seeing is a result of the

PHP Code:


			
max-width: 36em;

rule you have for the content div. If you want all browsers to act the same, I think you'd use something like this instead

PHP Code:


			
div {max-width: 675px; width:expression(document.body.clientWidth > 675? "675px": "auto" );

The problem is, that doesn't fix your problems, it only creates more. Now your content area floats are going to break when they page expands to far. The obvious solution to me would be to clear your floats, but as you've got necessary floats in the left and right columns, if you add any 'clear' to your content area, your entire page will break.

Honest opinion from a guy who's spent way to much time building complicated css only pages, use a simple table for the three columns, than you can float things within the table cells and you won't have any problems.

Lemmy · 2007-05-24, 12:04 PM

Quote:

Originally Posted by Preacher

Quick answer, you're fucked.

Well I knew that!

Quote:

Originally Posted by Preacher

Honest opinion from a guy who's spent way to much time building complicated css only pages, use a simple table for the three columns, than you can float things within the table cells and you won't have any problems.

That may very well be the best solution, or I could just say fuck you to FF users.

Seriously, this CSS stuff (once you go beyond simple text formatting) is awfully complicated and confusing for something that's supposed to make life simpler.

HC-Majick · 2007-05-24, 03:20 PM

Lemmy,
Did you see that last pm?

Lemmy · 2007-05-24, 03:36 PM

Quote:

Originally Posted by HC-Majick

Lemmy,
Did you see that last pm?

Yup, and replied.

2007-05-24, 11:28 AM	#1
Lemmy You can now put whatever you want in this space :) Join Date: Sep 2004 Location: Next door to a kid with a moped. Posts: 1,492	CSS woes Inspired by another thread and Jayeff's comments I've decided to give a tableless CSS design a shot for a project I'm working on, but I'm running into problems right off the bat. I've got a 3-column design that looks good for what I need...but only in IE. In FF and Opera the right column expands. If there's a Guru out there who could take a look I'd be very grateful. __________________ BUY MY PORNSITES!

2007-05-24, 11:48 AM	#2
HC-Majick You can now put whatever you want in this space :) Join Date: Oct 2004 Location: Upstate NY Posts: 541	Sent ya a pm... __________________ Submit Your Freesites:

2007-05-24, 12:24 PM	#6
Lemmy You can now put whatever you want in this space :) Join Date: Sep 2004 Location: Next door to a kid with a moped. Posts: 1,492	I think I just fixed it! I removed the max-width and it looks good. The only reason it was there was to prevent very long lines (hard to read), but it looks OK on 19" monitor @ 1280 x 1024. So there shouldn't be any downsides, right? __________________ BUY MY PORNSITES!

2007-05-24, 11:53 AM	#8
Preacher There's Xanax in my thurible! Join Date: Apr 2005 Location: Wherever they screw on my head Posts: 2,441	Quick answer, you're fucked. What you're seeing is a result of the PHP Code: `max-width: 36em;` rule you have for the content div. If you want all browsers to act the same, I think you'd use something like this instead PHP Code: `div {max-width: 675px; width:expression(document.body.clientWidth > 675? "675px": "auto" );` The problem is, that doesn't fix your problems, it only creates more. Now your content area floats are going to break when they page expands to far. The obvious solution to me would be to clear your floats, but as you've got necessary floats in the left and right columns, if you add any 'clear' to your content area, your entire page will break. Honest opinion from a guy who's spent way to much time building complicated css only pages, use a simple table for the three columns, than you can float things within the table cells and you won't have any problems. __________________ NSCash * This Depraved World

2007-05-24, 03:20 PM	#10
HC-Majick You can now put whatever you want in this space :) Join Date: Oct 2004 Location: Upstate NY Posts: 541	Lemmy, Did you see that last pm? __________________ Submit Your Freesites: