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:
  1. .button {  
  2. height: 20px;  
  3. line-height: 20px;  
  4. background: #f00;  
  5. padding: 0 10px;  
  6. color: #fff;  
  7. text-decoration: none;  
  8. text-align: center;  
  9. vertical-align: middle;  
  10. }  
  11. .icon_1, .icon_2 {  
  12. margin-left: 10px;  
  13. width: 10px;  
  14. height: 20px;  
  15. background: url(http://placehold.it/10x10) no-repeat left center;  
  16. }  
  17.   
  18. .float_left {  
  19. display: inline;  
  20. float: left;  
  21. }  
  22. .float_right {  
  23. display: inline;  
  24. float: right;  
  25. }  
  26.   
  27. .cf:before,  
  28. .cf:after {  
  29. content:"";  
  30. display:table;  
  31. }  
  32. .cf:after {  
  33. clear:both;  
  34. }  
  35. .cf {  
  36. zoom:1;  
  37. }  
  1. <div class="cf">  
  2.     <a class="button float_right" href="/" title="">  
  3.         <span class="float_left">LOREM IPSUM</span>  
  4.         <span class="icon_1 float_right"></span>  
  5.         <span class="icon_2 float_right"></span>  
  6.     </a>  
  7. </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
  1. <div class="cf">  
  2.     <a class="button float_right" href="/" title="">  
  3.         <span>LOREM IPSUM</span><span class="icon_1"></span><span class="icon_2"></span>  
  4.     </a>  
  5. </div>  
  1. .button {  
  2.     height: 20px;  
  3.     line-height: 20px;  
  4.     background: #c00;  
  5.     padding: 0 10px;  
  6.     color: #fff;  
  7.     text-decoration: none;  
  8.     text-align: center;  
  9.     vertical-align: middle;  
  10. }  
  11. .icon_1, .icon_2 {  
  12.     margin-left: 10px;  
  13.     width: 10px;  
  14.     height: 20px;  
  15.     background: url(http://placehold.it/10x10) no-repeat left center;  
  16.     display: inline-block;  
  17. }  
  18.   
  19. .float_left {  
  20.     display: inline;  
  21.     float: left;  
  22. }  
  23. .float_right {  
  24.     display: inline;  
  25.     float: right;  
  26. }  
  27.   
  28. .cf:before,  
  29. .cf:after {  
  30.     content:"";  
  31.     display:table;  
  32. }  
  33. .cf:after {  
  34.     clear:both;  
  35. }  
  36. .cf {  
  37.     zoom:1;  
  38. }  
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! :)