Topic: CSS bug or general weirdness?

Hey guys,

I have a container with padding 0px and background #fff. Inside the container is a div with padding 0px and margin 5px. I would expect the inside div to be displayed 5px from the top of the container, but it's not. Here's what firebug shows:

http://maggie.commuun.nl/~peter/rails/padding.gif

As you can see the margin spils outside the container div (which is the white)

If I give the container a vertical padding, even 1px, the margin is displayed correctly but I end up with the extra padding which I don't want:

http://maggie.commuun.nl/~peter/rails/padding2.gif

This doesn't make any sense to me. Is this a bug or is it deliberate?

Re: CSS bug or general weirdness?

I already went through that headache, the trick is to use a list, and set the line-height property, it sounds stupid but that's the only way to properly set a horizontal list vertically and be cross-browser compatible.

Currently I am sure that your CSS completly blows on various browsers, have you tried?

Re: CSS bug or general weirdness?

I've used the line-height solution in a few places but here I ended up using another div above this one rendering the point moot. So far I haven't had too many problems in other browsers mostly because I use CSS as little as humanly possible and don't try to do anything too tricky.

Although usually still end up spending a ton of time fixing little differences in IE/FF/S wink

Re: CSS bug or general weirdness?

can you pastie your css and the relevent html.erb code please?

Re: CSS bug or general weirdness?

I've since changed the layout quite a bit but here's a quick example which works (or rather fails) in both Explorer and Firefox:

<html>
  <head>
    <style>
      body {
        background: #def;
      }
      .container {
        background: #fff;
      }
      .content {
        margin: 5px 0px;
      }
      .padded {
        padding: 1px 0px;
      }
    </style>
  </head>
  <body>
    <div class='container'>
      <div class='content'>
        This is a test
      </div>
    </div>
    <div class='container padded'>
      <div class='content'>
        This is a test
      </div>
    </div>
  </body>
</html>

The first div shows the result without padding of the container the second shows that when 1px of padding is added the margin is suddenly inserted properly.

Re: CSS bug or general weirdness?

If I understand what you are trying to do....you just need to specify padding on your container to keep it from moving with the content div. Then use the margin on the content div to place it where you want it. (You can also use negative numbers if necessary.)

The code below is based off of your example. All you need to do is add a margin and padding rule to the container and content and then play with the numbers to get the look you want.

<html>
    <head>
        <style>
            body {
                background: #def;
            }
            #container {
                background: #333;
                color: #fff;
                margin: 0px;
                padding: 10px;
            }
            #content {
                background: #ccc;
                margin: 200px 0px;
                padding: 5px;
                width: 50%;
            }
        </style>
    </head>
<body>
    <div id="container">
        <div id="content">
            This is a test
        </div>
    </div>

</body>
</html>

Boo.

Re: CSS bug or general weirdness?

Yes, negative numbers would work but I try to avoid those generally, it doesn't feel like a very clean way to handle things. Your example works but only by virtue of adding padding to the container div, which has the same result as before unfortunately. For now I'll just hack around it, using padding in the container instead of margin in the content will work. But thanks for looking into it smile

Re: CSS bug or general weirdness?

I think I misunderstood what you are trying to accomplish. tongue At any rate, hopefully you can make it work the way you want. smile

Boo.

Re: CSS bug or general weirdness?

I've used the line-height answer in a few places but here I ended up applying another dope above this one delivering the detail consider.