3 column - right column renders lower in FF

i fixed it by using escape character hack:

#right {
margin-top: 0px;
}
#right {
\margin-top: -20px;
}

there were other hacks (like, prefixing value intended for IE with underscore or a dot) but this is the only one i found so far that validates....

cheers

my bad - i am still hanging to the .margin-top hack, since previous hack i found does render in IE7, therefore getting me a bad look in one of the major browsers...

and here i officially give up for today

all of my troubles started with column div #right that renders 20 pixels lower in FF, opera, or safari, than it does in IE...and, whats even funnier, i think code is valid the way IE renders it (who would believe that...)

please if anyone has quick solution for this discrepancy - i would really appreciate it.

Hi... after another few hours of search, I finally found a hack that is straight-down ugly and it goes directly into the HTML, however - it does validate and it does distinguish IE browsers from others, so I used it.

#right { margin-top: 0px; }

I found this on the IEblog site, however it can be found on www.positioniseverything.com - which is, IMO, much better source to read on.

Please let me know if you have any other, more elegant solution for my problem, I left my subscription to this thread active. I am into CSS for about 4-5 years now, not so actively, I've done perhaps 5-6 websites, and I've learned new stuff with every single website I did layout for. I am always willing to share whatever knowledge I do have, but I always feel that there is much more of the stuff I DON'T know than the stuff I am good at :]

all the best

Why have you not done

#kalendar h5 {
  margin-top: 0;
  }

cheers,

gary

because positioning was bad for the whole div #right, not just for its child #kalendar... I added that div later on to control calendar better...

I will have to clear out and organize css better through the next week, it will probably be easier to review...

Did you do as I suggested, or did you just think you knew the problem source?

You've missed the point. The top margin on the header is the margin causing the issue. IE does not handle it correctly, collapsing it all the way through #right and its parent. Good browsers do not, thus the negative margin on #right brings them up where you want it.

Remove the negative top margin on #right and set the top margin on the header to zero.

gary

:bigoops: me wrong, you the man

You are the guru nothing else to say!

and, to repeat myself, i grow by learning with every single page i make

It'd be easier for me if i _knew_ all the "keywords", like, "collapsing margins" to google up what i need, however i think i've done decent job - firstly, googling up csscreator.com and than, many months later, googling up that IE hack with comment-nested IE-only statements...anyways, to become a guru (like you and others at csscreator.com) will take me quite a bit more of googling and testing and trying and googling ...

many thanks once again. i love it when my code is up-to-standards. it would have been much harder without community help.

:scared:

it freaks me out! it is not working, again!!! as soon as i removed that IE hack, everything went falling apart again... I will try to tweak it more tomorrow, my brains are fumbled completely now and this thing got to the better side of me...

Hi!

I've got the same problem and can't solve it again!

on my homepage (http://www.djesi.ba/~lucky) there is several stylesheets available (well only two for now, but I will be adding more). default style is the one where i have the very same problem I mentioned previously: in IE, right column (#content) renders about 20 pixels lower than it does in FF. Actually, both menu and content are aligned when site is viewed in FF, however, in IE it is messed up again. Could you please be patient and explain it to me what is happening here? Quite frustrating, I will say!

I will leave default.css as it is for now, because I would really like to figure this out in order to avoid it in the future. Thanks for the effort!

i am still puzzled... and i still have the same problem with divider "container" in my page (http://djesi.ba/~lucky)

I've tried to follow advice given - to set margin-top: 0; to every parent element of the text that has issues, but it didn't help. in fact, it seems to me that there is a problem with either containing box and it's top margin, or with first child element there (h2 in this case). i've tried copying margin-top or padding-top zero to all parent elements of the .text class and content divider, however nothing works for ie.

i've also been reading about collapsing margins - i've visited a ton of websites but i am either not getting the point here or just can't figure out how to apply this to my sites.

i've also found a way to validate all of the code and it be really really neat to learn how to fix this and still validate the code, without the ugly if IE comment...

thanks for the patience with helping me, i really appreciate it, this has been puzzling me for long time now...