treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Why CSS overflow property is not inherited?

  • While coding a wordpress theme, I used CSS RESET present in stakers theme.
    Then on body tag I set overflow:hidden.

    I was expecting .post class to inherit it but wide images overflowed into sidebar.
    I had to again add overflow:hidden for .post class.

    This seemed strange to me.

    Actually I develop many wordpress themes for clients and I always thought setting "overflow:hidden" on body will prevent all child elements from being overflowed.

    Just want to know if my conception about CSS inheritance is wrong in some way?

    Thanks,
    -Rahul
  • overflow is only relavant to the object it is styling, and will not cascade like say font would. For example, what if you set overflow:scroll to the body or html tag... then every block object below it would have a X and Y scrollbar attached!
  • "Robskiwarrior" said:
    then every block object below it would have a X and Y scrollbar attached!
    !

    That is a very good point!
  • "davesgonebananas" said:
    [quote="Robskiwarrior"]then every block object below it would have a X and Y scrollbar attached!
    !

    That is a very good point![/quote]

    it would be madness i say! lol - but very scrolly!
  • "Robskiwarrior" said:
    overflow is only relavant to the object it is styling, and will not cascade like say font would.


    Thanks for your answer Rob. :-)

    I seriously had this misconception that everything in CSS cascades (inherits). :o
  • Is it possible to change the look of the scroll in overflow, ie color, size etc ?.... i just wonderd :o
  • "hal8" said:
    Is it possible to change the look of the scroll in overflow, ie color, size etc ?.... i just wonderd :o


    of the actual scrollbar? yes, in FF - IE is a different matter... the best way to do it is with Javascript, then you can make the scroll bar look how you want it to.
  • of the actual scrollbar? yes, in FF - IE is a different matter... the best way to do it is with Javascript, then you can make the scroll bar look how you want it to.


    Oh ok...so how would i go about chaning it in css/html....or is it just done with javascript ?
  • I think this is for IE - I cant remember - I steer well clear of customising scrollbars with CSS, because it normally looks crap and wont be cross browser.

    body { scrollbar-face-color: #317B9C;
    scrollbar-track-color: #87B4C9;
    scrollbar-arrow-color: #54A1C4;
    scrollbar-3dlight-color: #B8D7E6;
    scrollbar-shadow-color: #1E6180;
    scrollbar-highlight-color: #7CBCDA;
    scrollbar-darkshadow-color: #1E6180}


    I would recomend using something like this...

    http://www.kelvinluck.com/assets/jquery ... lPane.html

    Most of all I would recommend not customising your scrollbars lol
  • [QUOTE}
    Most of all I would recommend not customising your scrollbars lol[/quote]


    LOL...yeh me too....just never knew that you could actually do it !! :D