Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html][css] Problem ze stylizacją buttonów
Forum PHP.pl > Forum > Przedszkole
Zwariowany
21.12.2009, 22:11:10
Witam mam takie style do buttonu:

[HTML] pobierz, plaintext 
  1.  
  2. button.stylizowany
  3. {
  4. border:0;
  5. font-size: 11px;
  6. background: url(images/tab.gif) repeat-x #044152;
  7. color: #ffffff;
  8. padding: 2px 5px;
  9. border: 1px solid #01429a;
  10. }
[HTML] pobierz, plaintext


W operze button wyświetla się tak jak powinień, lecz w firefoxie padding na dole jest 3px, a w internet explorerze border wyświetla się 3px.

Jak zrobić, by button wyglądał wszędzie tak samo?

vokiel
21.12.2009, 23:01:03
Dodać height, line-height. Border podawać tylko raz (masz raz na początku, potem drugi raz na końcu)
Zwariowany
21.12.2009, 23:37:33
Dało to tyle, że w IE tekst był na dole przycisku, a border jaki był taki był dalej. Czyli praktycznie nic to nie dało. No nic, szukam sposobu dalej.
vokiel
22.12.2009, 09:46:37
Daj to gdzieś na żywo, może wina leży po stronie nieprawidłowego doctype lub styl jest przysłaniany gdzieś indziej w kodzie
Zwariowany
22.12.2009, 13:56:39
Oto cały kod:

index.php:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <head>
  5.  
  6. <title>Społ</title>
  7.  
  8. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2;" />
  9.  
  10. <link rel="stylesheet" type="text/css" href="stylebutton.css" />
  11.  
  12. </head>
  13.  
  14. <body>
  15.  
  16. <button class="stylized" style="margin-left: 20px; margin-top: 20px;">Treść przycisku</button>
  17. </body>
  18. </html>
[HTML] pobierz, plaintext


kod stylebutton.css

[HTML] pobierz, plaintext 
  1.  
  2. body,div,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,textarea,p,th,td,
    a {margin: 0; padding: 0;}
  3. h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:400;}
  4.  
  5. html, body {font-family: Tahoma, Helvetica, Verdana, sans-serif; font-size: 12px;}
  6.  
  7. html {background-color: #ffffff;}
  8.  
  9. button.stylized
  10. {
  11. font-size: 11px;
  12. background-color:  #0a4172;
  13. color: #ffffff;
  14. padding: 0px 5px;
  15. height: 21px; line-height: 21px;
  16. border: 1px solid #01549a;
  17. }
  18.  
  19.  
  20.  
  21.  
[HTML] pobierz, plaintext


vokiel
22.12.2009, 15:09:11
Rozważałeś możliwość kodowania dokumentu jako utf-8?
Może tak, u mnie wygląda tak samo na IE8, FF 3.5.6, Opera 10.10, Safari 3.2.1
[CSS] pobierz, plaintext 
  1. button.stylized{
  2.     font-size: 11px;
  3.     background-color:  #0a4172;
  4.     color: #ffffff;
  5.     padding: 3px 5px;
  6.     border: 1px solid #01549a;
  7. }
[CSS] pobierz, plaintext

Przycisk można zrobić jako odpowiednie ostylowanie elementu a
Zwariowany
22.12.2009, 18:48:47
U mnie niestety w IE7 nie wygląda tak samo. W operze ma 22px wysokości, a w IE 25px wysokosci po zastosowaniu Twoich stylów. A zrobienie z tego elementu a odpada, bo potrzebne mi to do formularzy.

Czyli nie ma sposobu żeby w najważniejszych przeglądarkach wyglądało to tak samo?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.