ugrás a tartalomhoz

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.
‹ jQuery + PHP real-time ellenőrzés OFF: Levlista ›
 ■
1

Válaszok

Poetro · 2011. Okt. 20. (Cs), 15.21
Az egyes kérdés esetében az a probléma, hogy a böngészők máshogyan kerekítenek. Ezért érdemes nekik minél pontosabban megadni a méreteket, ez jelen esetben három tizedesjegyig értendő. Azaz 1.417em-et kellene megadni, mivel 17 / 12 = 1.4166666666.... Ekkor minden böngészőben a megfelelő eredményt fogod kapni.

A második kérdésre a HTML ismeretének hiányában nem igazán lehet válaszolni.
2

Additional :)

Creative · 2011. Okt. 20. (Cs), 16.21
Köszönöm az extra információt. Ezt az 'em-megadáshoz 3 tizedesjegy kell' -módit nem ismertem eddig. Itt a css-hez tartozó html-kód:
  1. <div id="footer">  
  2.   <p id="copyright">Copyright 2011</p>  
  3.   <p id="social"><a href="#" target="_blank" title="Facebook">Facebook</a></p>  
  4.   <p id="created">created by <a href="#" target="_blank" title="Z">Z</a></p>  
  5. </div>  
C.
3

Margin

Poetro · 2011. Okt. 20. (Cs), 16.42
Mivel a p margin-ja kilóg a dobozból, ezért tolódik el az elem a középtől.
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <title>Page Title</title>  
  5.   <style type="text/css">  
  6. #footer {  
  7.   background: #1e8041 url("../images/footer_bg.gif") bottom center repeat-x;  
  8.   color: #bdc087;  
  9.   font-size: 11px;  
  10.   height: 16px;  
  11.   line-height: 16px;  
  12.   position: relative;  
  13.   width: 944px;  
  14.   margin: 10px 15px;  
  15.   padding: 11px 13px;  
  16.   -webkit-border-radius: 7px;  
  17.   -moz-border-radius: 7px;  
  18.   border-radius: 7px;  
  19.   behavior: url("../css/pie.htc");  
  20. }  
  21. #copyright,  
  22. #social {  
  23.   float: left;  
  24. }  
  25. #footer p {  
  26.   margin: 0;  
  27. }  
  28. #social a {  
  29.   display: block;  
  30.   overflow: hidden;  
  31.   position: relative;  
  32.   width: 16px;  
  33. }  
  34. #social a span {  
  35.   background-image: url("../images/icon_facebook.png");  
  36.   background-position: 0 0;  
  37. }  
  38. #social a:hover span {  
  39.   background-position: -16px 0;  
  40. }  
  41. #created {  
  42.   float: right;  
  43. }  
  44.   </style>  
  45. </head>  
  46. <body>  
  47. <div id="footer">  
  48.   <p id="copyright">Copyright 2011</p>  
  49.   <p id="social"><a href="#" target="_blank" title="Facebook">Facebook</a></p>  
  50.   <p id="created">created by <a href="#" target="_blank" title="Z">Z</a></p>  
  51. </div>  
  52. </body>  
  53. </html>  
4

valóban

Creative · 2011. Nov. 1. (K), 10.45
Valóban, görögök a falóban ^^
Ezer hála és köszönet Poetro :)

C.