ugrás a tartalomhoz

Archívum - Okt 20, 2011 - Fórum téma

Line-height + vertical-align

Creative · 2011. Okt. 20. (Cs), 14.39
Üdv,

Az alábbi két aprósággal lennének gondjaim, s fordulok segítségért a szakavatott, sokat-tapasztalt sitebuilder-zsenikhez ^^

1. A line-height css tulajdonságot ha megadom body-ban, hiába resetelem előtte a böngésző alapértelmezett css-formázásait, böngészőnként más és más eredményt kapok. Próbáltam px és em, valamint % megadásával is. A legpontosabb eredményt em -el kapom, azonban így is az alábbi eltéréseket tapasztalom:
Firefox és Safari megfelelően mutatja, míg a Chrome, Opera és IE alatt sokkal nagyobbak a sorközök. Jelenleg alkalmazott idevágó css-részletem:
  1. body {  
  2.   font-size: 12px;  
  3.   line-height: 1.41em; /*12 * 1.41 ~ 17px, ez kell nekem :) */  
  4. }  
2. Adva vagyon egy div, mely minden böngészőben, minden körülmények között szépen jelenik meg, tartalmával vertikálisan középen, amit a height és line-height attribútumokkal értem el. És most jön a nagy De! Ahogy ígértem :) ... de ha kompatibilitási módban, vagy alap IE 7 -ben nézem, akkor a tartalma felülre igazítva jelenik meg. Itt pedig az ide-vágó css-részletem:
  1. #footer {   
  2.   background: #1e8041 url("../images/footer_bg.gif") bottom center repeat-x;  
  3.   color: #bdc087;  
  4.   font-size: 11px;  
  5.   height: 35px;  
  6.   line-height: 16px;  
  7.   position: relative;  
  8.   width: 960px;  
  9.   margin: 10px 15px;  
  10.   -webkit-border-radius: 7px;  
  11.   -moz-border-radius: 7px;  
  12.   border-radius: 7px;  
  13.   behavior: url("../css/pie.htc");  
  14. }  
  15. #copyright {  
  16.   float: left;  
  17.   padding: 0 0 0 13px;  
  18. }  
  19. #social {  
  20.   float: left;  
  21.   padding: 0 0 0 15px;  
  22. }  
  23. #social a {  
  24.   height: 16px;  
  25.   display: block;  
  26.   overflow: hidden;  
  27.   position: relative;  
  28.   width: 16px;  
  29. }  
  30. #social a span {  
  31.   background-image: url("../images/icon_facebook.png");  
  32.   background-position: 0 0;  
  33. }  
  34. #social a:hover span {  
  35.   background-position: -16px 0;  
  36. }  
  37. #created {  
  38.   position: absolute;  
  39.   right: 13px;  
  40.   top: 0;  
  41. }  
Várom a sokat-látott builderek hozzászólásait :$ ^^

C.
 ■