Rails Forum - Ruby on Rails Help and Discussion Forum - CSS bug or general weirdness?

Re: CSS bug or general weirdness?

dummy@example.com (cyresjones) — Wed, 29 Sep 2010 05:36:17 +0000

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.

Re: CSS bug or general weirdness?

dummy@example.com (s.cannon) — Wed, 20 May 2009 14:44:30 +0000

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

Re: CSS bug or general weirdness?

dummy@example.com (marsvin) — Mon, 18 May 2009 14:47:49 +0000

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

Re: CSS bug or general weirdness?

dummy@example.com (s.cannon) — Fri, 15 May 2009 16:30:43 +0000

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.

This is a test

Re: CSS bug or general weirdness?

dummy@example.com (marsvin) — Fri, 15 May 2009 15:23:58 +0000

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:


  
    
  
  
    
      
        This is a test
      

    

    
      
        This is a test

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?

dummy@example.com (dweebazoid) — Fri, 15 May 2009 08:36:36 +0000

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

Re: CSS bug or general weirdness?

dummy@example.com (marsvin) — Wed, 13 May 2009 22:33:44 +0000

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

Re: CSS bug or general weirdness?

dummy@example.com (Johnson) — Mon, 11 May 2009 19:09:28 +0000

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?

CSS bug or general weirdness?

dummy@example.com (marsvin) — Mon, 11 May 2009 18:11:29 +0000

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?