ugrás a tartalomhoz

dinamikus szélesség float-on belüli float-tal böngészőfüggetlenül (IE7+)?

asam9 · 2012. Feb. 12. (V), 12.45
Sziasztok,

Az a problémám, hogy IE7 alatt a gomb 100% szélességet vesz fel, nem pedig a tartalmától függően változik. Chrome, Firefox, Opera és IE8 alatt megy.
Valakinek lenne rá ötlete, miként működhetne ez elképzeléseim szerint IE7 (6 nem annyira fontos) alatt is?

Íme a kód:

.button {
height: 20px;
line-height: 20px;
background: #f00;
padding: 0 10px;
color: #fff;
text-decoration: none;
text-align: center;
vertical-align: middle;
}
.icon_1, .icon_2 {
margin-left: 10px;
width: 10px;
height: 20px;
background: url(http://placehold.it/10x10) no-repeat left center;
}

.float_left {
display: inline;
float: left;
}
.float_right {
display: inline;
float: right;
}

.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}


<div class="cf">
	<a class="button float_right" href="/" title="">
		<span class="float_left">LOREM IPSUM</span>
		<span class="icon_1 float_right"></span>
		<span class="icon_2 float_right"></span>
	</a>
</div>
itt kipróbálható
‹ JS + hozzá tartozó sallang beillesztése (css, képek, stb) Hogy "csapjam be" a böngészőm? ›
 ■
1

<div class="cf"> <a

Poetro · 2012. Feb. 12. (V), 13.22
<div class="cf">
    <a class="button float_right" href="/" title="">
        <span>LOREM IPSUM</span><span class="icon_1"></span><span class="icon_2"></span>
    </a>
</div>
.button {
    height: 20px;
    line-height: 20px;
    background: #c00;
    padding: 0 10px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
}
.icon_1, .icon_2 {
    margin-left: 10px;
    width: 10px;
    height: 20px;
    background: url(http://placehold.it/10x10) no-repeat left center;
    display: inline-block;
}

.float_left {
    display: inline;
    float: left;
}
.float_right {
    display: inline;
    float: right;
}

.cf:before,
.cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
.cf {
    zoom:1;
}
2

Köszönöm szépen :) Így még

asam9 · 2012. Feb. 12. (V), 14.40
Köszönöm szépen :) Így még hatos alatt is jó.

Viszont a szöveg vertikális középre igazítása nem akar menni, bármit is teszek vele. (paddinggal jó lenne, ha nincs más mód, akkor úgy lesz)
3

inline-block

Poetro · 2012. Feb. 12. (V), 16.57
Tedd azt is inline-block-ká. Vagy játsz a line-height-tal.
4

tök jó lenne, de ie8 alatt,

asam9 · 2012. Feb. 12. (V), 18.33
tök jó lenne, de ie8 alatt, hogy mit művel az utolsó gombbal, nem is értem.

http://jsfiddle.net/gMvbQ/

szerk.:

bekerült az ikonok mellé egy "float: right\9;", mostmár mindenhol jó, köszi mégegyszer! :)