CSS - kłopot z tabelami - Grupy dyskusyjne w eGospodarka.pl

eGospodarka.pl › Grupy › pl.comp.www › CSS - kłopot z tabelami

« poprzedni wątek

następny wątek »

Ilość wypowiedzi w tym wątku: 9

1. Data: 2012-07-11 00:38:49
Temat: CSS - kłopot z tabelami
Od: Marek <p...@s...com>

Witam,

Czy ktoś z Was wie dlaczego pod obrazkiem rysuje się zielona linia o
grubości ok 3 px? Przynajmniej pod IE9. Gdy włączę tryb kompatybilności
wstecznej - linia znika i wszystko wygląda poprawnie.

Gdy dostawimy kolejne wiersze (kopiując ten jeden), to każdy z nich będzie
miał tą linię. Tak jakby narzucony był padding-bottom: 3px dla <td>.

Jak się pozbyć tego dziwacznego efektu?

Pozdrawiam,
Marek

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Bez tytulu</title>
<style>
table {
border-collapse:collapse;
background-color:#00FF00;
}
td {
padding: 0;
line-height: 100%;
}
</style>
</head>

<body>
<table>
<tr>
<td><img src="pictures/p1.jpg" width="218" height="95"></td>
</tr>
</table>
</body>
</html>

[ pokaż wiadomość z nagłówkami ]

do góry
2. Data: 2012-07-11 01:29:21
Temat: Re: CSS - kłopot z tabelami
Od: Cezary Tomczyk <c...@g...pl>

W dniu 2012-07-11 00:38, Marek pisze:
> Witam,
>
> Czy ktoś z Was wie dlaczego pod obrazkiem rysuje się zielona linia o
> grubości ok 3 px? Przynajmniej pod IE9. Gdy włączę tryb kompatybilności
> wstecznej - linia znika i wszystko wygląda poprawnie.
>
> Gdy dostawimy kolejne wiersze (kopiując ten jeden), to każdy z nich będzie
> miał tą linię. Tak jakby narzucony był padding-bottom: 3px dla <td>.
>
> Jak się pozbyć tego dziwacznego efektu?
>
> Pozdrawiam,
> Marek
>
> <!DOCTYPE HTML>
> <html>
> <head>
> <meta charset="utf-8">
> <title>Bez tytulu</title>
> <style>
> table {
> border-collapse:collapse;
> background-color:#00FF00;
> }
> td {
> padding: 0;
> line-height: 100%;
> }

Dodałbym:

td img{
display:block;
}

> </style>
> </head>
>
> <body>
> <table>
> <tr>
> <td><img src="pictures/p1.jpg" width="218" height="95"></td>
> </tr>
> </table>
> </body>
> </html>
>

--
Cezary Tomczyk
http://www.ctomczyk.pl/

[ pokaż wiadomość z nagłówkami ]

do góry
3. Data: 2012-07-11 10:04:24
Temat: Re: CSS - kłopot z tabelami
Od: NotBear <p...@i...pl>

W dniu 2012-07-11 00:38, Marek pisze:
> Czy ktoś z Was wie dlaczego pod obrazkiem rysuje się zielona linia o
> grubości ok 3 px? Przynajmniej pod IE9. Gdy włączę tryb kompatybilności
> wstecznej - linia znika i wszystko wygląda poprawnie.

Element IMG domyślnie należy do kategorii flow content, czyli zachowuje
się jak fragment tekstu. Pozycjonuje się na linii bazowej pisma, a to co
interpretujesz jako padding jest obszarem w którym pojawiłyby się
"ogonki" tekstu.

> Jak się pozbyć tego dziwacznego efektu?

Nadać obrazkow tryb blokowy, zaleznie od sytuacji za pomocą np.
display:block lub float:left/right. Jesli wraz z obrazkiem wystepuje
tekst, ktorego nie chcesz lamac, vertical-align z wartoscia inna niz
baseline moze byc pomocny.

--
NotBear

[ pokaż wiadomość z nagłówkami ]

do góry
4. Data: 2012-07-11 10:15:23
Temat: Re: CSS - kłopot z tabelami
Od: Piotr Chamera <p...@p...onet.pl>

W dniu 2012-07-11 00:38, Marek pisze:
> Witam,
>
> Czy ktoś z Was wie dlaczego pod obrazkiem rysuje się zielona linia o
> grubości ok 3 px? Przynajmniej pod IE9. Gdy włączę tryb kompatybilności
> wstecznej - linia znika i wszystko wygląda poprawnie.

Obrazek inline jest wyrównany do linii bazowej pisma,
tu jest opis co i jak:
https://developer.mozilla.org/pl/Obrazki,_tabele_i_t
ajemnicze_dziury

> Gdy dostawimy kolejne wiersze (kopiując ten jeden), to każdy z nich będzie
> miał tą linię. Tak jakby narzucony był padding-bottom: 3px dla <td>.
>
> Jak się pozbyć tego dziwacznego efektu?

[ pokaż wiadomość z nagłówkami ]

do góry
5. Data: 2012-07-11 10:42:41
Temat: Re: CSS - kłopot z tabelami
Od: Marek <p...@s...com>

Dnia Wed, 11 Jul 2012 01:29:21 +0200, Cezary Tomczyk napisał(a):

> W dniu 2012-07-11 00:38, Marek pisze:
>> Witam,
>>
>> Czy ktoś z Was wie dlaczego pod obrazkiem rysuje się zielona linia o
>> grubości ok 3 px? Przynajmniej pod IE9. Gdy włączę tryb kompatybilności
>> wstecznej - linia znika i wszystko wygląda poprawnie.
>>
>> Gdy dostawimy kolejne wiersze (kopiując ten jeden), to każdy z nich będzie
>> miał tą linię. Tak jakby narzucony był padding-bottom: 3px dla <td>.
>>
>> Jak się pozbyć tego dziwacznego efektu?
>>
>> Pozdrawiam,
>> Marek
>>
>> <!DOCTYPE HTML>
>> <html>
>> <head>
>> <meta charset="utf-8">
>> <title>Bez tytulu</title>
>> <style>
>> table {
>> border-collapse:collapse;
>> background-color:#00FF00;
>> }
>> td {
>> padding: 0;
>> line-height: 100%;
>> }
>
> Dodałbym:
>
> td img{
> display:block;
> }
>
>> </style>
>> </head>
>>
>> <body>
>> <table>
>> <tr>
>> <td><img src="pictures/p1.jpg" width="218" height="95"></td>
>> </tr>
>> </table>
>> </body>
>> </html>
>>

Za dużo z kodu wyciąłem aby uprościć przykład :(

<td><img src="pictures/p1.jpg" width="218" height="95"><img
src="pictures/p1.jpg" width="218" height="95"></td>

Chciałbym aby te obrazki były obok siebie. Czyli display: inline-block ale
to też nie działa.

[ pokaż wiadomość z nagłówkami ]

do góry
6. Data: 2012-07-11 10:55:54
Temat: Re: CSS - kłopot z tabelami
Od: Marek <p...@s...com>

Dnia Wed, 11 Jul 2012 10:04:24 +0200, NotBear napisał(a):

>> Jak się pozbyć tego dziwacznego efektu?
>
> Nadać obrazkow tryb blokowy, zaleznie od sytuacji za pomocą np.
> display:block lub float:left/right. Jesli wraz z obrazkiem wystepuje
> tekst, ktorego nie chcesz lamac, vertical-align z wartoscia inna niz
> baseline moze byc pomocny.

Za bardzo zredukowałem przykład niechcący. W tabeli miały być 2 obrazki
obok siebie występujące - tak aby się nie zawijały. Kombinowałem z
display:inline-block ... ale pomogło nadanie jednocześnie - tak jak
sugerujesz - vertical-align dla obrazków . Ustawiłem "top".

Można uznać problem za rozwiązany ale nie rozumiem dlaczego. Obrazki są w
końcu jednakowej wysokości. Po drugie nawet gdyby była w nich rezerwacja na
"ogonki", to wyrównanie w pionie nie powinno niczego zmienić.

[ pokaż wiadomość z nagłówkami ]

do góry
7. Data: 2012-07-11 10:57:47
Temat: Re: CSS - kłopot z tabelami
Od: Marek <p...@s...com>

Problem rozwiązałem:

img {
display:inline-block;

oraz koniecznie

vertical-align: top;
}

[ pokaż wiadomość z nagłówkami ]

do góry
8. Data: 2012-07-11 11:03:43
Temat: Re: CSS - kłopot z tabelami
Od: Marek <p...@s...com>

Dnia Wed, 11 Jul 2012 10:15:23 +0200, Piotr Chamera napisał(a):

> Obrazek inline jest wyrównany do linii bazowej pisma,
> tu jest opis co i jak:
> https://developer.mozilla.org/pl/Obrazki,_tabele_i_t
ajemnicze_dziury

Ahhhh... wreszcie pojąłem w czym rzecz. Zasugerowałem się tym, że obrazki
nie mają ogonków, są jednakowej wysokości - a więc mylnie uznałem, że linia
bazowa tekstu nie ma tu zastosowania. :-)))

Dzięki!

[ pokaż wiadomość z nagłówkami ]

do góry
9. Data: 2012-07-11 11:06:36
Temat: Re: CSS - kłopot z tabelami
Od: Marek <p...@s...com>

Dnia Wed, 11 Jul 2012 10:55:54 +0200, Marek napisał(a):

> Można uznać problem za rozwiązany ale nie rozumiem dlaczego. Obrazki są w
> końcu jednakowej wysokości. Po drugie nawet gdyby była w nich rezerwacja na
> "ogonki", to wyrównanie w pionie nie powinno niczego zmienić.

Już wiem dlaczego tak jest. Piotr podał mi link z interpretacją przyczyn
problemu :-) Do tej pory na zasadzie magicznego zaklęcia stosowałem
vertical-align dla obrazków i w związku z tym zapominałem o jego użyciu
(tak jak i tym razem).

[ pokaż wiadomość z nagłówkami ]

do góry