css problem with layout

Hi,

I'm a completely newbie with css, and am trying to layout a page using it. I'm having a lot of trouble getting the layout to work in both Moz and IE (either it works in one or it works in the other). I've read about the box-model bug, and I don't think that's the problem, and I've looked it over and tweaked it a lot and am unable to fix the problems. So I'm hoping someone here can give me a hand.

My attempt is up at http://www.mylittlesoapbox.com/test/index.html

The css for that is http://www.mylittlesoapbox.com/test/danaae.css

The two glaring problems are that:

1) In Moz the menu bar on the left overlaps the green color box. I have absolutely no idea why this is happening. I can push it further down using a bigger margin-top, but then in IE it is way too far down.

2) The second problem is that the entire central and right columns seem to be pushed over 8pixels too far--yet when I try to fix this all sorts of horrible things happen (if I add a negative margin, the right column instead goes to the bottom of the central column).

I'm sorry I've just attached links rather than snippets of code, but I really have no idea what might be the problem. I've tried commenting out chunks to see what is causing it, but I still can't seem to get to the bottom of it.

Thanks for your help!

1) The only this that I can suggest is in your css you have the position:relative in believe in IE and Mozilla take their relative points differently.

In IE it would take it from the bottom right hand corner of the green rectangle where as in Mozilla it will take it from the top right, causing a difference in positioning. try changing your position to absolute, you will need to do a few changes to the left and top positioning to get them where they was.

2) In mozilla the side scroll bar only comes on if the page is longer than the page itself and disappears when not, therfore on your page it pushes everything over. Where as in IE6 the side scroll bar is permantly there.

Hope this helps out

Absolute positioning didn't seem to be that great of a solution for this when I tried it, so I played around some more.

Ultimately, I've gone with a pretty sloppy hack, but I'm not sure of any other good way to deal with it. I basically just took advantage of the fact that IE will read a css style even if it has odd characters before it (such as a slash), so I wound up with a style that looks like:



With the difference of the size of the green div that is the problem (which is 26px high) being the difference between the two.

I'm not terribly pleased with this solution, but I've only been trying my hand at this css stuff for a week or so. If anyone has any better ideas of how to fix that, or the misaligned center div (in IE for some reason it was doubling every value I gave to margin-left on this div, so that the proper 8 pixel break displayed correctly in Moz browsers, but became 16 pixels in IE, I applied the same hack to fix this aesthetically), I would appreciate them immensely.

Also, and perhaps more importantly, I am wondering which method of calculating relative distance is standards compliant? I tend to assume Moz is the one that gets these things right, but I am occasionally surprised. Should it be grabbing the spacing from the bottom-right corner or the upper-right corner?

Thanks again for your help, gintom, and to anyone else willing to give it a look-over. I've put my hacked version up at http://www.mylittlesoapbox.com/test/hack.html with accompanying css at http://www.mylittlesoapbox.com/test/hack.css

<edit>Wanted to add that when I said using absolute positioning wasn't that great a solution for this, I wasn't at all disparaging the suggestion or gintom for being kind enough to offer it; I just found it difficult to implement, and found it to have less dynamism</edit>

Another reason why it may be moving over is in Mozilla is that it also has on the left hand side the at the top next to the URL and back button is the arrows where you can hide the tool bars. this could be causing your problem.

Try closing them to see if that helps.

While that affects how the entire page sits on the screen, it (thankfully) doesn't affect any individual elements in relation to other elements. That would be really annoying for layout!

Thanks,

Brendan