box-sizing: border-box and IE7

Internet Explorer 7 doesn’t support box-sizing: border-box. You can, however, achieve the same thing with nested divs.

Replace

<div class="border-box">

    ... content ...

</div>
.border-box {
    box-sizing: border-box;
    width: 50%;
    font-size: 50%;
    margin-bottom: 0.5em;
    background: green;
    padding: 5em;
    border: 5px solid red;
    overflow: hidden;
}

with

<div class="border-boxish">
    <div class="border-boxish-inner">

        ... content ...

    </div>
</div>
.border-boxish {
    width: 50%;
    font-size: 50%;
    margin-bottom: 0.5em;
    background: green;
}

.border-boxish-inner {
    padding: 5em;
    border: 5px solid red;
    overflow: hidden;
}

You don’t need to use all css-rules from the example. I just included them to show what goes where.

Split Pane jQuery plugin

I have created a jQuery plugin for adding split panes to you web site or web application.

Split panes can be nested. Component min-widths and min-heights are supported. I have not implemented support for max-width and max-height, yet.

Component size can be set programmatically.

I’ve tested the code in the latest versions of Chrome, Firefox and Safari on OS X, and in IE8 on XP.

The source code can be found at github.

Please give me you feed back!

Check out the following pages for examples on how to use it:

N.B., not all markup in the examples are needed for setting up the split panes. <div class="pretty-split-pane-frame"> and <div class="pretty-split-pane-component-inner"> are used for styling purposes only. Feel free to use them, but you might want to style things your own way.

CSS only drop-down menus (with submenus)

Who needs JavaScript to do drop-down menus on a HTML web-page? Anyway, I gave it a try.

This does not work in IE6, since I’m using the child selector and the :hover pseudo class. Personally, I think that we should stop supporting IE6, so that we can all focus on other things.

I’m using a CSS IE hack below since IE doesn’t do inline-block on block elements.

With the following HTML:

<ul class="navbar">
    <li>Meat</li>
    <li>Vegetables</li>
    <li>Fruit and lots of fruit
        <ul>
            <li>Organge</li>
            <li>Apple
                <ul>
                    <li>Fuji</li>
                    <li>Gala</li>
                    <li>Granny Smith
                        <ul>
                            <li>Red</li>
                            <li>Green</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>Pomgranade</li>
        </ul>
    </li>
</ul>

just add this CSS:

.navbar, .navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.navbar li {
    position: relative;
    padding: 0.5em;
    white-space: nowrap;
}

.navbar > li {
    display: inline-block;
    zoom: 1;
    *display: inline; 
}

.navbar ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
}

.navbar li:hover > ul {
    display: block;
}

.navbar ul ul {
    left: 100%;
    top: 0;
}

If you put it all together, this is what it looks like, with a tiny theme added: