Error Showing CSS Shorthand Declarations

DrDave45

unread,

Jun 20, 2013, 5:30:30 PM6/20/13

to fir...@googlegroups.com

I have quite a few shorthand declarations for margins, padding, etc. When specifying all four, FireBug only reports the first two when the second is zero, e.g. .mymargin{margin:10px 0px 10px 0px;}

This is true whether the second is 0 or 0px.

<html>
   <head>
   <style type="text/css">
.ItemWithPx{z-index:4320;margin:10px 0px 10px 0px;}
.ItemWOPx{z-index:4320;margin:10px 0 10px 0;}
.divRed{background-color:red;height:40px;width:100%;}
.divYellow{background-color:yellow;width:100%}
   </style>
</head>
<body>
<div class="divred">The following has margin:10px 0px 10px 0px</div>
<div class="divyellow ItemWithPx">This is a menu item</div>
<div class="divred">The following has margin:10px 0 10px 0</div>
<div class="divyellow ItemWOPx">This is a menu item</div>
<div class="divred">Bottom div</div>
<br>
</body>
</html>

From the CSS FierBug tab:

.ItemWithPx {
    margin: 10px 0;
    z-index: 4320;
}
.ItemWOPx {
    margin: 10px 0;
    z-index: 4320;
}
.divRed {
    background-color: red;
    height: 40px;
    width: 100%;
}
.divYellow {
    background-color: yellow;
    width: 100%;
}

The "Q" webtools inspect element also only reports the first two. However, FireBug reports both 0px and 0 as "0", while the "Q" webtools inspect element reports both as "0px".

The good news is that all four ARE processed in FireFox - I was worried that the browser was dropping some of my CSS rule properties, but it is only in the reporting.

Sebastian Zartner

unread,

Jun 21, 2013, 3:27:38 AM6/21/13

to fir...@googlegroups.com

The CSS panel in Firebug just displays the CSS like it is interpreted by Firefox. And Firefox interprets margin: 10px 0px 10px 0px; as margin: 10px 0;. Also 0px is of course equal to 0em or simply 0. I.e. both definitions have the same meaning. See the Mozilla documentation about margin for more info.

Sebastian

Sebastian Zartner

unread,

Jun 21, 2013, 3:43:09 AM6/21/13

to fir...@googlegroups.com

I added this point to our FAQ, so people may get to know about that more easily.

Sebastian

DrDave45

unread,

Jun 21, 2013, 11:44:52 AM6/21/13

to fir...@googlegroups.com

Thank you Sebastian:

I should have realized what FireFox/FireBug were doing: two values = value for top/bottom and value for right/left!

Since both top and bottom are the same, and both right and left are the same, FireFox need only interpret the declaration as if it had two values.

I should change the topic to "subtle", rather than "Error" .

Reply all

Reply to author

Forward