HTML5 Elements - Display Block (5 posts)

  1. jumpswimmer
    Posted 5 years ago #

    I built a child theme locally using Toolbox and was in for quite the surprise when I uploaded it to a server and ran it through crossbrowsertesting.com. My header was collapsing in certain browsers causing the navigation to be unusable. A few hours of headaches later I finally realized that the header element isn't set to display: block anywhere in the Toolbox CSS (that I can see). I made the change and it seems to be fine for the most part now (Firefox 3.0.6 and Ubuntu 8.10 don't quite get it right).

    Why aren't all the HTML5 elements set to display:block? That's one of the first things I learned about when starting into HTML5.

  2. Lance Willett
    Posted 5 years ago #

    Hi jumpswimmer,

    Toolbox does set the "header" element to display: block using the #branding selector in the CSS file.

  3. jumpswimmer
    Posted 5 years ago #

    Thanks for the reply Lance!

    I looked through style.css in my copy and in all previous versions of Toolbox listed here:

    #branding doesn't appear in any of them.

    I was about to post this, then I noticed toolbox/bonus. There is a file called sample.css in there that does reference #branding. I hadn't touched that file previously as I saw no need to go into bonus features of something that was brand new to me.

    Anyway, it's a problem I won't run into again, but new users of the theme might get lost in the same way I did.

  4. Lance Willett
    Posted 5 years ago #

    Thanks for your feedback, I know we have some other small fixes to Toolbox -- so we'll probably update the W.org version soon.

  5. Peter Wooster
    Posted 4 years ago #

    As of version toolbox 1.3 the new html5 block elements still are not set to display:block. Particularly annoying are header and hgroup. This shows up as backgrounds that do not display in IE8 or lower.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic