In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > browser specific extensions > MozFloatEdge

MozFloatEdge style property

Browser support:

Specifies or retrieves whether the height and width properties of the element include the margin, border, or padding thickness.

In other browsers you can get the same functionality with table cells.

Syntax:

object.MozFloatEdge;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: -moz-float-edge

Possible values:

The type of this property is string.

One of the following values:

border-box

The height and width properties include the padding and the border but not the margin.

content-box

The height and width properties include the content but not the margin, border and the padding.

inherit

Takes the value of this property from the computed style of the parent element.

margin-box

The height and width properties include everything (margin, border, padding, content).

padding-box

The height and width properties include the padding but not the margin and the border.

Default: content-box.

Example HTML code 1:

This example illustrates the use of the -moz-float-edge property:

<head>
    <style>
        .floating {
            float: left;
            background-color: #ffbc79;
            width: 30px;
            height: 20px;
        }
        ul {
            margin: 0px;
            padding: 0px;
        }
        li {
            list-style-position: inside;
            background-color: #aae3ff;
            color: black;
            margin-bottom: 5px;
            margin-left: 5px;
            border: 3px dashed gray;
            display: block;
        }

        li.contentBox {
            -moz-float-edge: content-box;
        }
        li.paddingBox {
            -moz-float-edge: padding-box;
        }
        li.borderBox {
            -moz-float-edge: border-box;
        }
        li.marginBox {
            -moz-float-edge: margin-box;
        }
    </style>
</head>
<body>
    <div class="floating"></div>
    <ul>
        <li class="contentBox">content-box</li>
        <li class="contentBox">content-box</li>
    </ul>
    <br />
    <div class="floating"></div>
    <ul>
        <li class="paddingBox">padding-box</li>
        <li class="paddingBox">padding-box</li>
    </ul>
    <br />
    <div class="floating"></div>
    <ul>
        <li class="borderBox">border-box</li>
        <li class="borderBox">border-box</li>
    </ul>
    <br />
    <div class="floating"></div>
    <ul>
        <li class="marginBox">margin-box</li>
        <li class="marginBox">margin-box</li>
    </ul>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the MozFloatEdge property in JavaScript:

<head>
    <style>
        .floating {
            float: left;
            background-color: #ffbc79;
            width: 30px;
            height: 20px;
        }
        ul {
            margin: 0px;
            padding: 0px;
        }
        li {
            list-style-position: inside;
            background-color: #aae3ff;
            color: black;
            margin-bottom: 5px;
            margin-left: 5px;
            border: 3px dashed gray;
            display: block;
            -moz-float-edge: content-box;
        }
    </style>

    <script type="text/javascript">
        function ChangeFloatEdge (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the text of the selected option
            var floatEdge = selectTag.options[whichSelected].text;

            var menu = document.getElementById ("menu");
            var liTags = menu.getElementsByTagName ("li");

            if (liTags[0].'MozFloatEdge' in style) {
                for (var i = 0; i < liTags.length; i++) {
                    liTags[i].style.MozFloatEdge = floatEdge;
                }
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <div class="floating"></div>
    <ul id="menu">
        <li>first menu</li>
        <li>second menu</li>
    </ul>
    <br />
    <select onchange="ChangeFloatEdge (this);" size="5">
        <option selected="selected" />content-box
        <option />padding-box
        <option />border-box
        <option />margin-box
        <option />inherit
    </select>
</body>