Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [html][css] Problem ze stylizacją buttonów
Zwariowany
post 21.12.2009, 22:11:10
Post #1





Grupa: Zarejestrowani
Postów: 201
Pomógł: 0
Dołączył: 6.01.2009

Ostrzeżenie: (20%)
X----

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?



--------------------
Wyrostek robaczkowy - informacje.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 6)
vokiel
post 21.12.2009, 23:01:03
Post #2





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

Ostrzeżenie: (0%)
-----

Dodać height, line-height. Border podawać tylko raz (masz raz na początku, potem drugi raz na końcu)


--------------------
"It's in our hands... It always was..." | It's in my hands: blog.vokiel.com... It always be...
Go to the top of the page
+Quote Post
Zwariowany
post 21.12.2009, 23:37:33
Post #3





Grupa: Zarejestrowani
Postów: 201
Pomógł: 0
Dołączył: 6.01.2009

Ostrzeżenie: (20%)
X----

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.


--------------------
Wyrostek robaczkowy - informacje.
Go to the top of the page
+Quote Post
vokiel
post 22.12.2009, 09:46:37
Post #4





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

Ostrzeżenie: (0%)
-----

Daj to gdzieś na żywo, może wina leży po stronie nieprawidłowego doctype lub styl jest przysłaniany gdzieś indziej w kodzie


--------------------
"It's in our hands... It always was..." | It's in my hands: blog.vokiel.com... It always be...
Go to the top of the page
+Quote Post
Zwariowany
post 22.12.2009, 13:56:39
Post #5





Grupa: Zarejestrowani
Postów: 201
Pomógł: 0
Dołączył: 6.01.2009

Ostrzeżenie: (20%)
X----

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




--------------------
Wyrostek robaczkowy - informacje.
Go to the top of the page
+Quote Post
vokiel
post 22.12.2009, 15:09:11
Post #6





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

Ostrzeżenie: (0%)
-----

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


--------------------
"It's in our hands... It always was..." | It's in my hands: blog.vokiel.com... It always be...
Go to the top of the page
+Quote Post
Zwariowany
post 22.12.2009, 18:48:47
Post #7





Grupa: Zarejestrowani
Postów: 201
Pomógł: 0
Dołączył: 6.01.2009

Ostrzeżenie: (20%)
X----

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?


--------------------
Wyrostek robaczkowy - informacje.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 19.07.2025 - 10:19
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn