Text-align nie działa do końca poprawnie w mozilli, na chromie jest ok

0

Czy jest mi ktoś w stanie pomóc w tym problemie?

<div class="pierwszyDiv">
       <div class="drugiDiv">
                  <img src="smiley.gif" alt="Smiley face" height="42" width="42">
       </div>
</div>

Style do tego:

.pierwszyDiv {
    position: absolute;
    top: 0px;
    height: 70px;
   width: 150px;
}

.drugiDiv {
    text-align: right;
}

Dlaczego w przypadku przeglądarki chrome wszystko działa ok i obrazek za pomocą text-align jest przesuniety maksymalnie do prawej strony diva. Natomiast w przypadku firefox co prawda ten obrazek przesunął się trochę w prawo stronę, ale nie maksymalnie do prawej strony diva.

0

Może jest coś źle w pozostałej części kodu?
Bo ten kod wyrównuje poprawnie treść do prawej strony bloku div.

divalignright.jpg

0

W sumie nad tymi divami jest jeszcze jeden nadrzędny div z takimi stylami:

.divNadrzedny {
    width: 280px;
    height: 280px;
    margin-right: 16px;
    margin-bottom: 16px;
    position: relative;
    display: inline-block;
}
0

Działa nadal na Firefox.
Chyba, że chcesz wyrównać obrazek do prawej krawędzi tego diva, który ma czerwone tło na rysunku poniżej.

div_align_3.jpg

0

Tak chcę wyrównać obrazek do prawej krawędzi tego diva, który ma czerwone tło na rysunku

1
kaczor19 napisał(a):

chcę wyrównać obrazek do prawej krawędzi tego diva, który ma czerwone tło na rysunku

To umieść obrazek w tym czerwonym bloku div :)

div_align_4.jpg

<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: lightgreen; }
.divNadrzedny {
    width: 280px;
    height: 280px;
    margin-right: 16px;
    margin-bottom: 16px;
    position: relative;
    display: inline-block;
    background-color: #FF0000; /* !!! */
}
.pierwszyDiv { position: absolute;
    top: 0px;
    height: 70px;
    width: 150px;
    background-color: #000000; }
.drugiDiv { text-align: right; }
</style>
</head>
<body>
<div class="divNadrzedny">
  <div class="pierwszyDiv">

  </div>
  <div class="drugiDiv">
      <img src="http://placehold.it/42x42" alt="Smiley face" height="42" width="42">
    </div>
</div>
</body>
</html>

0

Zapomniałem dodać, że im ma taki styl:

img {
 zoom: 65%;
        -moz-transform: scale(0.65);
}

Chyba przez to mi nie wyrównuje do końca do prawej strony tego obrazka na firefoxie.

0
kaczor19 napisał(a):
img {
 zoom: 65%;
        -moz-transform: scale(0.65);
}

Chyba przez to mi nie wyrównuje do końca do prawej strony tego obrazka na firefoxie.

Zgadzam się. To przez to skalowanie obrazek ma odstęp od krawędzi bloku div.

0
vxer napisał(a):
kaczor19 napisał(a):
img {
 zoom: 65%;
        -moz-transform: scale(0.65);
}

Chyba przez to mi nie wyrównuje do końca do prawej strony tego obrazka na firefoxie.

Zgadzam się. To przez to skalowanie obrazek ma odstęp od krawędzi bloku div.

Czy w takim przypadku da się jakoś tak zrobić aby w przypadku chrome i firefoxa obrazek przylegał do prawej krawędzi diva?

0

Można zrobić:

img {
    zoom: 65%;
    -moz-transform: scale(0.65);
    margin-right: -7px;
    margin-top: -7px;
}

Działa, ale to trochę obejście. Może lepiej zmniejszyć ten obrazek w edytorze graficznym, niż skalować go kodem.

Za łapkę przy poście w jednej z pięciu odpowiedzi bym się też nie obraził ;)

0
vxer napisał(a):

Można zrobić:

img {
    zoom: 65%;
    -moz-transform: scale(0.65);
    margin-right: -7px;
    margin-top: -7px;
}

Działa, ale to trochę obejście. Może lepiej zmniejszyć ten obrazek w edytorze graficznym, niż skalować go kodem.

Za łapkę przy poście w jednej z pięciu odpowiedzi bym się też nie obraził ;)

To nie zadziała, bo marginesy przecież na obu przeglądarkach się zmienia a nie na firefoxie tylko.

0
kaczor19 napisał(a):

To nie zadziała, bo marginesy przecież na obu przeglądarkach się zmienia a nie na firefoxie tylko.

A skalowanie też jest chyba na obu przeglądarkach.
Może Ci na jednej przeglądarce nie skaluje i przez to nie ma odstępu. Hm.


VX Blog | Asembler - Pisma zebrane | YT

1 użytkowników online, w tym zalogowanych: 0, gości: 1