Strange negative margin. Works on most page expect shopping cart page

HTML & CSS
1

Hi all,

I found out a strange but on the website which is about international local sim card solutions www.onlineabroad.com

Have a look at the footer “black block” and see how the link blocks are nicely placed within the black block.

Now put something in your shopping cart and view your shopping cart and look again. The links are now outside the black block! I have troubleshoot it for hours with no solution.

Hopefully there are some pro’s here who know what is going on…

2

Works fine for me in Chrome. What browser are you using?

3

strange…I tested it in Chrome and Firefox. Did you put something in your shopping cart and then viewed your cart? The point is that on any page it looks good except on the shopping cart page

4

Yes. But looking again, I see it now. It’s not great the way you’ve structure that layout. I guess you could fix it easily enough with something like this:

.region-footer-second-inner {
  background: #333;
}

That’s much more reliable than negative margins and what not. I’m not sure why the styles are different from one page to another (extra top margin), but I guess you are in a better position to figure that out.

5

Thank you ralph.m!

So stupid, your suggestion is much much simpler and therefore alone better if you ask me. Nevertheless, why do you state that negative margins are less reliable? Looking at documentation it seems that negative margins are well supported.

And in addition, how did you figured out that there is extra top margin? I am still unable to see so myself…

6

Ok, found it out and as always…simple once you know it.

On the basis of a certain page extra blocks are loaded which apparently had a higher height than 0. This meant that the links where pushed down on the shopping cart pages for instance…

7

Negative margins are fine most of the time but do have different behaviours depending on what element they are applied to. For example a right negative margin on a left float will drag any content that is on the right inside the float. Whereas a negative right margin on a normal width-less block element will in fact make the element itself larger by the amount of the negative margin.

You also need to take into account cleared elements as a negative margin will have no effect on an element that has cleared a float (indeed positive margins will work on cleared elements but only when the margin is greater than the distance to the containing block). More info here.

Negative margins are fine as long as you understand the above and are not using them to fix something that could be done more easily otherwise.

8

Thanks Paul for this clarification. I understand what you mean and could not agree more with your last point. I still find it cool that I found out that negative margin way of working though. Seems like it is more suited for offsetting an element now or then, opposed to using it as positioning the larger base elements on a website.

9

Yes, as Paul pointed out, I did not choose my words well. In your case, negative margins seemed more of a hack to cover for a less-than-ideal layout structure, and was falling apart when it didn’t need to. I certainly use negative margins too, but only when they are really needed.

how did you figured out that there is extra top margin? I am still unable to see so myself…

Browsers lke Chrome have a great Inspect Element feature. Just right click on the element and a window opens at the bottom that shows the HTML and CSS underlying the page. When you hover over the HTML, the element is highlighted on screen, along with any margin, padding etc. Very handy. :slight_smile:

10

Browsers lke Chrome have a great Inspect Element feature. Just right click on the element and a window opens at the bottom that shows the HTML and CSS underlying the page. When you hover over the HTML, the element is highlighted on screen, along with any margin, padding etc. Very handy. :slight_smile:

Thanks again ralph.m