Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]
Forum PHP.pl > Forum > Przedszkole
bodek22
witam,
Mam problem z prawildowym wyswietleniem przycisku w IE
przycisk wyglada tak

  1. <input type="submit" name="submit" class=inputbox value="Utwórz nowe konto">


css do przycisku wyglada tak

  1. .inputbox {
  2. height: 23px;
  3. width: 55px;
  4. border: none;
  5. background: url("../images/new.jpg") no-repeat 0 0;
  6. font: bold 1.25em/1.1em Lucida, sans;
  7. color: #3d2d06;
  8.  
  9. }

obrazek new.jpg ma wymiary takie jak podano w stylu.

W FF wszystko dziala prawidlowo, natomiast w IE po nacisnieciu przycisku napis "Utwórz nowe konto" przemieszcza sie nieznacznie w dół i w prawo.
Czy to jakis bug? Czy ktos zna rozwiazanie aby napis nie przemieszczal sie.
Musi byc obrazek jako tlo, nie moze byc obrazka z napisem.
lord_t
Spróbuj ustawić marginesy i paddingi na 0.
bodek22
  1. .inputbox {
  2. height: 23px;
  3. width: 155px;
  4. border: none;
  5. padding:0px;
  6. margin:0px;
  7. background: url("../images/new.jpg") no-repeat 0 0;
  8. font: bold 1.25em/1.1em Lucida, sans;
  9. color: #3d2d06;
  10.  
  11. }


bez zmian w IE
erix
To normalne dla IE.

Spróbuj w pseudoklasie :active dać ujemne marginesy.
bodek22
niestety ale :active nie dziala z IE w polaczeniu z input.
erix
whatever:hover winksmiley.jpg
bodek22
hover dziala, ale niestety przy kliknieciu myszka polozenie napisu zmienia sie.
erix
Musisz użyć nowej wersji. winksmiley.jpg

Na stronie projektu są dwie - nowsza umożliwi użycie :focus/:active, pokombinuj troszkę. winksmiley.jpg
bodek22
niestety w IE 7 uzycie obu klas nie daje efektu. Interesuje mnie rozwiazania dla IE 7.

Po przeczetyaniu for anglojezycznej dochodze do wniosku ze nie mozna tego rozwiazac. Jesli ktos jednak zna rozwiazanie powyzszego problemu prosze napisac.
wookieb
Zapodaj link do stronki.
franki01
Ja praktykuje inne rozwiązanie.
  1. <input type="image" src="1x1px_przezroczysty.gif" class="send" alt="Tekst alternatywny" />

CSS:
Kod
.send
{
width: 100px;
height: 30px;
padding: 0px;
background: url('my_image.png') left top no-repeat;
}

Będziesz musiał zrobić jeszcze przezroczysty pikselowy gif.
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.