5 replies [Last post]
nswan
Offline
Regular
Last seen: 17 years 20 weeks ago
Joined: 2003-07-14
Posts: 20
Points: 0

Another design, another post on the CSS forum.

I am working on a fairly simple 2 column layout. A container div holds left and right content areas. The right content area is floated right. My problem is that the right content area overlaps the left content area in IE 6.0. By adjusting the container width I was able to get it properly spaced. However, by then the left and right content areas are TOO far apart in Firebird. I want just ten pixels between the content areas. I have counted and recounted the widths including margins, widths, and borders.

Also, as an odd quirk, IE6 refuses to style the top submenu items header properly.

I have validated the code as XHTML, CSS 1, and CSS 2 compliant in order to rule out any syntax issues.

XHTML
http://nicoleswan.com/test/index.html

CSS
http://nicoleswan.com/test/style.css

I would greatly appreciate any insights anyone might have.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 9 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

2 column layout problems in IE 6.0

Hi Nicole,
To fix the spacing problem you could wrap the#rightcontent div in another div and use padding-left on it instead of margins.
Float the new div instead of #rightcontent.

Paddings are more reliable cross browser.

I can't see why the top submenu isn't getting styled correctly, very strange Shock

Hope that helps

nswan
Offline
Regular
Last seen: 17 years 20 weeks ago
Joined: 2003-07-14
Posts: 20
Points: 0

2 column layout problems in IE 6.0

Thanks, Tony. I was able to get the spacing right by using padding instead of margin. So simple, yet apparently I couldn't think of it. Smile

The top submenu quirk is still there and is flabbergasting. I have checked, rechecked and checked again my syntax and structure. I tested what happened if I floated the div left instead. It, of course, collapsed to the left side of my layout (covering part of the left content) but the top submenu header styled correctly. It make absolutely no sense.

I guess I will keep plugging away.

nswan
Offline
Regular
Last seen: 17 years 20 weeks ago
Joined: 2003-07-14
Posts: 20
Points: 0

2 column layout problems in IE 6.0

I fixed it. I removed the 'position: relative;' styling. I do not know why that worked, but it did. Perhaps I need to do a little research.

Thanks again, Tony!

Famulus
Offline
newbie
Last seen: 16 years 43 weeks ago
Joined: 2004-02-02
Posts: 1
Points: 0

2 column layout problems in IE 6.0

I'm not a 100% sure if my problem is a problem with the 2 column layout I use... but I think it is. It also might be only a browser-problem (i'm using IE6 as well).

The site I'm talking about is this one: http://cgi.ethz.ch/~weberste/projects/

As you probably see my problem is, that the list and the text don't have the same distance from the border on the left. And the place where the distance changes is exactly the place where the menu is finished. This is the reason why I thinkt the problem's about the 2 column layout.

Do you have any ideas how to fix this? Or at least a hint what could be the problem?

Thx in advance,

Stefan

PS: Please excuse my English, I'm not a native speaker...

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

2 column layout problems in IE 6.0

Without looking at you code - It looks like your menu is floated, which is causing the error.

Refer to this - http://www.positioniseverything.net/explorer/threepxtest.html

Explains the problem and gives you a fix.

Regards
Day

The only way to learn is to do it yourself