CSS bug or general weirdness? (Page 1) - XHTML/CSS/JavaScript - Rails Forum

1 Topic by marsvin 2009-05-11 14:11:29

marsvin
Roughneck
Offline

From: the Netherlands
Registered: 2006-06-22
Posts: 899

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:

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:

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

Tutorial:
* Multiple child models in a dynamic form

2 Reply by Johnson 2009-05-11 15:09:28

Johnson
Roughneck
Offline

Registered: 2007-05-17
Posts: 924

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?

Johnson's Website

3 Reply by marsvin 2009-05-13 18:33:44

marsvin
Roughneck
Offline

From: the Netherlands
Registered: 2006-06-22
Posts: 899

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

Tutorial:
* Multiple child models in a dynamic form

4 Reply by dweebazoid 2009-05-15 04:36:36

dweebazoid
Coach Class
Offline

From: Glasgow, Scotland
Registered: 2008-10-04
Posts: 72

Re: CSS bug or general weirdness?

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

dweebazoid's Website

5 Reply by marsvin 2009-05-15 11:23:58

marsvin
Roughneck
Offline

From: the Netherlands
Registered: 2006-06-22
Posts: 899

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.

Tutorial:
* Multiple child models in a dynamic form

6 Reply by s.cannon 2009-05-15 12:30:43

s.cannon
Coach Class
Offline

From: Mogadore, OH, USA
Registered: 2009-01-20
Posts: 56

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.

s.cannon's Website

7 Reply by marsvin 2009-05-18 10:47:49

marsvin
Roughneck
Offline

From: the Netherlands
Registered: 2006-06-22
Posts: 899

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