Grow your CSS skills. Land your dream job.

Why CSS overflow property is not inherited?

  • # February 25, 2009 at 11:39 am

    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

    Rob
    # February 25, 2009 at 1:41 pm

    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!

    # February 25, 2009 at 3:31 pm
    "Robskiwarrior" wrote:
    then every block object below it would have a X and Y scrollbar attached!
    !

    That is a very good point!

    Rob
    # February 25, 2009 at 6:51 pm
    "davesgonebananas" wrote:
    "Robskiwarrior" wrote:
    then every block object below it would have a X and Y scrollbar attached!
    !

    That is a very good point!

    it would be madness i say! lol – but very scrolly!

    # March 13, 2009 at 3:21 pm
    "Robskiwarrior" wrote:
    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

    # March 14, 2009 at 8:36 am

    Is it possible to change the look of the scroll in overflow, ie color, size etc ?…. i just wonderd :o

    Rob
    # March 14, 2009 at 8:57 am
    "hal8" wrote:
    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.

    # March 14, 2009 at 9:24 am
    Quote:
    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 ?

    Rob
    # March 14, 2009 at 11:54 am

    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.

    Code:
    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

    # March 14, 2009 at 12:15 pm

    [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

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".