SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Works fine for me in Chrome. What browser are you using?

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by TManagement View Post
    Did you put something in your shopping cart and then viewed your cart?
    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:

    Code:
    .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. #5
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by TManagement View Post
    Thank you ralph.m!

    . Nevertheless, why do you state that negative margins are less reliable? Looking at documentation it seems that negative margins are well supported.
    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. #8
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by TManagement View Post
    Nevertheless, why do you state that negative margins are less reliable?
    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.

  10. #10
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Thanks again ralph.m


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •