Cannot Apply Negative Margin

[jimfog]

Go here:http://www.hellenicastrology.gr/ Scroll down to the footer/sitemap, #whole_sitem element. If i go to apply negative-top-margin to it the whole element moves many pixels up. Why that happens?

[dsonesuk]

Seems to be the float:left; used for #all, soon as you remove that it corrects itself, as a small note why are you using position: relative; left, top, bottom, and then margins to counteract these? can't you do without these and just use margins instead. Using position: relative leaves a space behind that it previously occupied when used with -values for top or bottom, so its best to avoid using position: relative; this way.

[jimfog]

as a small note why are you using position: relative; left, top, bottom, and then margins to counteract these? can't you do without these and just use margins instead. Using position: relative leaves a space behind that it previously occupied when used with -values for top or bottom, so its best to avoid using position: relative; this way.

To what element are you referring to? #All has position relative applied to it but i do not use any margins to it. So, tell me which element are you referring to so i can look at it. Regarding your statement that position relative leaves space. I agree, is using margins a solution to this issue? The question is general and not relevant only to the problem of the site for which i opened the topic. What about the approach of using position:absolute in a relative container?

[Ingolme]

That's usually not a good idea either. The only case I use that is for CSS hover menus.

[dsonesuk]

Position relative with absolute, is only used for as mentioned menus, and elements that need to overlap (images etc), it should be used as a last resort, only If everything else fails with the use of margins, padding, floating. I used css style code below (in FF using firebug) without any positioning and get the same result

#all {    background-image: url("../images/allbackg2.png");    box-shadow: 10px 10px 45px #888888;    height: auto;    margin-left: auto;    margin-right: auto;    margin-top: -46px;    overflow: hidden;}#whole_sitem {    background-image: url("../images/sitemap_back.png");    background-position: center center;    background-repeat: no-repeat;    height: 427px;    line-height: 1.618em;    list-style-type: none;    margin-left: auto;    margin-right: auto;    margin-top: -21px;    overflow: hidden;    width: 1100px;}#designed {    clear: both;    color: #791A10;    font-size: 14px;}

[jimfog]

I used margins after all to fix the issue. Go and see it you want. I did not know that absolute elements with relative containers is usually for hover menus(and for the other occasions you mentioned), and that i should try accomplish(preferably) what i want by using margins-in most cases. Thanks for the advice.