3 replies [Last post]
timware
Offline
Regular
Oakland CA
Last seen: 17 years 24 weeks ago
Oakland CA
Joined: 2003-12-01
Posts: 13
Points: 0

I'm setting up a 3-column layout with CSS which was looking just great with IE 5.2, NS 7.1 and Safari on the Mac, and very weird with IE 5, 6 and NS 7 on Windows.

I have a "contents" div and then 3 columns nested, "leftcontent", "centercontent" and "rightcontent". On Windows, when I attempt to center the "content" DIV along with its children, the 3 children *begin* at the very center point of the page and proceed to the right. I've tried many things but the problem remains intractable.

Test Site: http://www.hyperarts.com/clients/test/
CSS: http://www.hyperarts.com/clients/test/_includes/style.css

Thanks for any help!

Tim

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 5 years 15 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Tableless layout w/nested DIVs Windows=wierd; Mac=fine

How are you trying to center it?

I'd add text-align:center to the element containing "content" (ie BODY) and then add margin-left:auto and margin-right:auto to "content". I think that works, did last time I cared to check anyway!

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 26 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Tableless layout w/nested DIVs Windows=wierd; Mac=fine

To fix the IE centering bug you added text-align: center; to the body tag.

Your problem is that you did not ever reverse it.

Add to the content div

text-align: left;

Regards
Day

The only way to learn is to do it yourself

timware
Offline
Regular
Oakland CA
Last seen: 17 years 24 weeks ago
Oakland CA
Joined: 2003-12-01
Posts: 13
Points: 0

Tableless layout w/nested DIVs Windows=wierd; Mac=fine

Thanks for your help. The problem is now fixed:

http://www.hyperarts.com/clients/test3/

I ended up floating the 3 columns left and setting their left margins to 5, but adding the "text-align: center" to the <body> tag. I used that Tantek Box Model Hack to tame the independent-minded IE 5/5.5.

Thanks again to both of you for the guidance.

Have excellent holidays.

Tim