10 replies [Last post]
.iznogud
.iznogud's picture
Offline
Regular
Last seen: 13 years 35 weeks ago
Joined: 2007-01-16
Posts: 15
Points: 0

Hi all,

I've tighten up my page except for an annoying detail: right hand column is about 20pxls lower than it should be - and everything looks fine in IE5.5, IE6, IE7, however in Opera9, FF2 or Safari it renders about 20 pixels lower than it should.

All and any help will be greatly appreciated!

.Play.Open.Minded.

.iznogud
.iznogud's picture
Offline
Regular
Last seen: 13 years 35 weeks ago
Joined: 2007-01-16
Posts: 15
Points: 0

FIXED - sort of

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

.Play.Open.Minded.

.iznogud
.iznogud's picture
Offline
Regular
Last seen: 13 years 35 weeks ago
Joined: 2007-01-16
Posts: 15
Points: 0

my bad - i am still hanging

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 Sad

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.

.Play.Open.Minded.

.iznogud
.iznogud's picture
Offline
Regular
Last seen: 13 years 35 weeks ago
Joined: 2007-01-16
Posts: 15
Points: 0

I found hack that validates

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

.Play.Open.Minded.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 40 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Why have you not

Why have you not done

#kalendar h5 {
  margin-top: 0;
  }

IE does not do margin collapse properly.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

.iznogud
.iznogud's picture
Offline
Regular
Last seen: 13 years 35 weeks ago
Joined: 2007-01-16
Posts: 15
Points: 0

because positioning was bad

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...

.Play.Open.Minded.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 40 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Collapsing margins -- Google is your friend

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

.iznogud
.iznogud's picture
Offline
Regular
Last seen: 13 years 35 weeks ago
Joined: 2007-01-16
Posts: 15
Points: 0

me wrong, you the man You

:bigoops: me wrong, you the man Smile

You are the guru Smile nothing else to say!

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

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.

.Play.Open.Minded.

.iznogud
.iznogud's picture
Offline
Regular
Last seen: 13 years 35 weeks ago
Joined: 2007-01-16
Posts: 15
Points: 0

it freaks me out! it is

: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...

.Play.Open.Minded.

.iznogud
.iznogud's picture
Offline
Regular
Last seen: 13 years 35 weeks ago
Joined: 2007-01-16
Posts: 15
Points: 0

same mess again....

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!

.Play.Open.Minded.

.iznogud
.iznogud's picture
Offline
Regular
Last seen: 13 years 35 weeks ago
Joined: 2007-01-16
Posts: 15
Points: 0

i am still puzzled... and i

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...

.Play.Open.Minded.