HELP: Float Left box is drifting to the right in ie!

[jonisolis]

HELP: Float Left box is drifting to the right in ie!

--------------------------

I need som HELP with my CSS coding!

On the following web page my design falls apart at screen size 800 x 600 (looks fine at larger screen sizes) when the left menu box that should float left is drifting to the right in Internet Explorer 6.0 (it doesn't drift to the right in Netscape 7.1).

http://www.rivendellfarm.net/photos.html

Please view the home page to see how the left menu should look on all the pages.

Home page URL: http://www.rivendellfarm.net/

I know it has something to do with the larger images in the center of the page.

Is there a way to fix this problem? Please don't tell me I have to stick with
small sized images on the page.

CSS page is: http://www.rivendellfarm.net/rivende...stylesheet.css

#left { /*left menu box */
position: relative;
top:0;
left:0;
background: #AA202D;
color: #E0D4BB;
float:left;
width: 170px;
font-size: .8em;
margin-left: -5%; /* the difference to make the left column appear flush left */
}

I tried removing the negative percentage left margin value on the left float box, (see above) but that didn't help move the menu box back to where it belongs.

I tried to position the left menu box as absolute as shown below in the CSS coding:

#left {
position: absolute;
top:0;
left:0;
background: #AA202D;
color: #E0D4BB;
float:left;
width: 170px;
font-size: .8em;
margin-left: -5%; /* the difference to make the left column appear flush left */
}

In Internet Explorer 6.0 that worked. I now had the left menu box staying where it should no matter what the screen size.
BUT in Netscape 7.1 the left menu box was at the top left hand size of the screen and over some because of the negative percentage left margin value!

So then I tried the relative position as shown in the CSS coding below...

#left {
position: relative;
top:0;
left:0;
background: #AA202D;
color: #E0D4BB;
float:left;
width: 170px;
font-size: .8em;
margin-left: -5%; /* the difference to make the left column appear flush left */
}

This made the left menu box behave in Netscape 7.1 BUT now Internet Explorer 6.0 is drifting the box over to the right once again!

HELP! What is the answer or is there an correct answer to this drifting box problem?

Suggestions needed!

This is the reason tables look so good to so many of us! BUT I know one should try to wean themselves away from table based web site design.

Help me not go back to tables. Thanks!

[MuNKyonline]

Simple solution : USE TABLES!
There's a stupid rumour that tables aren't as good as css. It's a load of rubbish mate. I make hybrid websites of html and css. If it's easier make it with tables!

Isn't there a way of making a seperate stylesheet for each browser if you dont want to use tables?

[ADAM Web Design]

If you're using float: left, you shouldn't need the absolute positioning.

I'd say that, as much as anything, is leading to your problem.

[jonisolis]

CSS page coding now:

#left {
position: absolute;
top:0;
left:0;
background: #AA202D;
color: #E0D4BB;
width: 170px;
font-size: .8em;
margin-left: -5%; /* the difference to make the left column appear flush left */
}

In Internet Explorer 6.0 that worked. I now had the left menu box staying where it should no matter what the screen size.
BUT in Netscape 7.1 the left menu box was at the top left hand size of the screen and over some because of the negative percentage left margin value!

Need some more suggestions, thanks!

[ADAM Web Design]

That margin-left property should be doing nothing with the absolute positioning. What happens when you take it out?

[jonisolis]

I removed the "margin-left: -5%" but menu box is now at the top lefthand spot on the web page in Netscape 7.1 and not in the divs.

I also checked this page with Foxfire 1.5 and it looks OK there and in Internet Explorer 6.0 the menu box is in the right area.

Any other suggestions. Why is this so hard? It looks to be a simple design. If everyone that trys to use CSS for designing pages run into all these problems no wonder they stick to tables!

--Joni

CSS page coding now:

#left {
position: absolute;
top:0;
left:0;
background: #AA202D;
color: #E0D4BB;
width: 170px;
font-size: .8em;
}