Redundant CSS Rules Ie Float & Display:Block

Redundant CSS rules ie float & display:block

I just found out that floating an
element will also make it a block,
therefore specifying a float property
and display:block is redundant.

Yes, display: block is redundant if you've specified float: left (or right).

(What would happen if you tried to
specify display:inline and float:left?
)

display: inline will not make any difference, because setting float: left forces display: block "no matter what":

http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo

Otherwise, if 'float' has a value
other than 'none', the box is floated
and 'display' is set according to the
table below.

To summarize said table: float = display: block.

However, your specific example of float: left; display: inline is useful in one way - it fixes an IE6 bug.

Are there any other examples of
redundant combinations to watch out
for? block & width ? etc,

Some examples:

• If you set position: absolute, then float: none is forced.
• The top, right, bottom, left properties will not have any effect unless position has been set to a value other than the default of static.

Is there a tool that can check for
such things?

I don't think so. It's not something that is ever needed, so I can't see why anybody would have written such a tool.

Difference Between 'display: block; float: left' vs. 'display: inline-block; float: left'?

An answer by @thirtydot might help you... Question's link

I just found out that floating an
element will also make it a block,
therefore specifying a float property
and display:block is redundant.

Yes, display: block is redundant if you've specified float: left (or right).

(What would happen if you tried to
specify display:inline and float:left?
)

display: inline will not make any difference, because setting float: left forces display: block "no matter what":

http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo

Otherwise, if 'float' has a value
other than 'none', the box is floated
and 'display' is set according to the
table below.

To summarize said table: float = display: block.

However, your specific example of float: left; display: inline is useful in one way - it fixes an IE6 bug.

Are there any other examples of
redundant combinations to watch out
for? block & width ? etc,

Some examples:

• If you set position: absolute, then float: none is forced.
• The top, right, bottom, left properties will not have any effect unless position has been set to a value other than the default of static.

Is there a tool that can check for
such things?

I don't think so. It's not something that is ever needed, so I can't see why anybody would have written such a tool.

Reduce the repeat codes in css

make use of a class can reduce your code

.item { display: block; float: left; margin: 1% 0 1% 1.6%; }

#logo {margin-left:0; width: 15.33%;}
#social-media {  width: 6.86%; }
#search { width: 49.2%;}
#login { width: 23.8%;}
#category { margin-left:0; width:15.33%}
#menu{ width:57.66%}
#cart {width:23.8%}

<header>
    <div id="primary-header">
        <div class="item" id="logo">logo</div>
        <div class="item" id="social-media">social media</div>
        <div class="item" id="search">You search here</div>
        <div class="item" id="login">Login</div>
    </div>
    <div id="secondary-header">
        <div class="item" id="category">for category</div>
        <div class="item" id="menu">If you have menu</div>
        <div class="item" id="cart">well another column, add a cart</div>
    </div>
</header>

How would I make these two elements on the same line?

You can do this by simply floating the elements.

CSS

.box{
    border: 1px solid #333;
    padding: 14px 27px 10px 15px;
    min-height: 60px;
    min-width: 60px;
}

.box .text-one{
    display: block;
    text-align: left;
    float:left;
}

.box .text-two{
    display: block;
    text-align: right;
    float:right;
}

http://jsfiddle.net/sLj65/7/

CSS set as display inline, but inspector showing block

That looks simple: you use float property on inline element which forces inline element to become a block element.

Read this CSS specs to learn more.

Essential part is here:

left
The element generates a block box that is floated to the left.
Content flows on the right side of the box, starting at the top
(subject to the 'clear' property).

CSS Floating inline elements (960 GS)

An element with float: left is forced to have a computed display value of block.

For more information on that, see: jQuery in Chrome returns "block" instead of "inline"

The purpose of also adding display: inline is to fix an IE6 bug, the "double margin bug":

http://www.positioniseverything.net/explorer/doubled-margin.html

A coder innocently places a left float
into a container box, and uses a left
margin on the float to push it away
from the left side of the container.
Seems pretty simple, right? Well it is
until it's viewed in IE6. In that
browser the left float margin has
mysteriously been doubled in length!

It's a free fix with no downsides (even in IE6):

That means that {display: inline;} on
a float should be no different than
using {display: block;} (or no display
value at all), and indeed all browsers
follow this specification, including
IE. But, this does somehow trigger IE
to stop doubling the float's margin.
Thus, this fix can be applied
straight, without any fussy hiding
methods.

In fact, you could just apply the
Inline Fix to all floats if you like,
since there are no known side-effects.
That way the bug can never gain
traction regardless of any margins you
might or might not use.

IE9 css issue, forced to use float:left / float:right

apply this css thi will work in all browser i have check in chrome, Firefox, safari, opera, ie-7, ie-8, ie-9

background: #12a4b3; /* Old browsers */
background: -moz-linear-gradient(top,  #12a4b3 0%, #19d7e3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#12a4b3), color-stop(100%,#19d7e3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #12a4b3 0%,#19d7e3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #12a4b3 0%,#19d7e3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #12a4b3 0%,#19d7e3 100%); /* IE10+ */
background: linear-gradient(top,  #12a4b3 0%,#19d7e3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#12a4b3', endColorstr='#19d7e3',GradientType=0 ); /* IE6-9 */

---

Related Topics