Forum PHP.pl > [HTML/CSS]Określanie maksymalnej wysokości komórki

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML/CSS]Określanie maksymalnej wysokości komórki

Zick4

6.01.2008, 00:55:47

Komórka z imgiem ma czarnego bordera. Widać na tym rysunku, że komórka jest troszeczkę za duża. Chiałem zmniejszyć wysokość komórki, ale nie wiem jak ustawić maksymalną wysokość.

http://www.fotosik.pl/pokaz_obrazek/pelny/...b03b90c940.html tak wygląda w firefoxie (źle wygląda)
http://www.fotosik.pl/pokaz_obrazek/pelny/...87cae8d60f.html a tak wygląda w IE (dobrze o to mi chodzi)

Oto mój kod

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
    <head>
        <title>WWW</title>    
        <meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-2" />
        <meta http-equiv="content-language" content="pl" />
    </head>
    <body>
        <table style="border: 1px solid black;">
            <tr>
             <td><img src="1.jpg" alt="aa" /></td>                                                               
         </tr>
    </body>
</html>
[HTML] pobierz, plaintext

Jednym słowem efekt z widziany w Internet Explorerze chciciałbym mieć w każdej przeglądarce w szczególności w firefoxie.

devnul

6.01.2008, 01:07:04

w css

Kod

img {display:block}

firefox ma smieszne podejscie do renderowania obrazków zawsze dodaje pod nimi puste miejsce i tylko tak mi się to udawało załątwić

Zick4

6.01.2008, 01:40:50

Cytat(devnul @ 6.01.2008, 01:07:04 )

w css

Kod

img {display:block}

Niestety, ale te rozwiązanie mimo, że pomysłowe to jednak rozwala mi stronę.
http://www.fotosik.pl/pokaz_obrazek/pelny/...a9ba53258d.html

devnul

6.01.2008, 01:54:57

wszystko zależy od tego co chcesz osiągnąć na końcu
dodaj float:left
albo prościej - nadaj border samemu obrazkowi

Zick4

6.01.2008, 03:10:06

Niestety to nie pomaga. Jeżeli stanie dostanie floata to nastepne elementy po opływają i wszystko sie krzaczy,

Sebastian003

6.01.2008, 10:45:20

Dodaj takie coś na pewno będzie działać !

Miałeś błędny DOCTYPE i to dlatego !

Pozdrawiam !

Kod

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>WWW</title>
<meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-2" />
<meta http-equiv="content-language" content="pl" />
</head>
<body>
<table border="1" style="border-collapse: collapse; border: 1px solid black;">
<tr>
<td><img src="1.jpg" alt="aa"></td>
</tr>
</table>
</body>
</html>

Zick4

6.01.2008, 12:51:35

Cytat(Sebastian003 @ 6.01.2008, 10:45:20 )

Miałeś błędny DOCTYPE i to dlatego !

[HTML] pobierz, plaintext 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
[HTML] pobierz, plaintext

Dostałem nakaz pisania w XHTML 1.0 i raczej nie piszę w HTML 4.01. Moze istnieje jakies wyjście? Dzieki wszystkim za pomoc!

Sebastian003

6.01.2008, 13:10:50

To dodaj coś takiego

Kod

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">

dadexix

6.01.2008, 13:37:40

http://www.webinside.pl/css/artykuly/257 może tam znajdziesz pomoc:)

Jest tam nawet przykład dokladnie taki jaki Ty masz problem - i jak sobie poradzić:)

lord_t

6.01.2008, 14:52:41

Cytat(devnul @ 6.01.2008, 01:07:04 )

w css

Kod

img {display:block}

A może zamiast block daj inline

edit:

Być może trzeba będzie też dodać szerokość do tego w czym są te obrazki menu.

Zick4

6.01.2008, 16:30:27

Niestety, ale to tyczy modelu BOX, a nie samego <img> zwróciłem uwagę, że problem rozwiązuje zmiana doctype z XHTML 1.0 Strict na XHTML 1.0 Transitional. To może wynikać zatem z różnic między standardami? Może ktoś wpadł jak to zmienić w Strict?

Sebastian003

6.01.2008, 16:50:18

Po prostu za pomocą Strict nie zrobisz tego efektu musisz użyć Transitional.

Bo ja się nie mylę Strict oparty jest na atrybucie div i "nie lubi tabelek".

Zick4

9.01.2008, 01:00:55

Chłopaki znalazłem rozwiązanie. Jak się okazuje przeglądarka Firefox (jak zwykle) działa zgodnie w pełni ze standardami jeżeli zadeklarujemy DTD jako Strict. Chodzi o to, że w tabeli elementy stają się "pływające". wszystkie elementy pływające są ustawiane w tzw. linii bazowej i robi się pod nimi miejsce na przestrzeń dla opuszczonych liter takich jak g j q p. Wystarczy dodać taki CSS

[HTML] pobierz, plaintext 
<style type="text/css">
  img {display: block;}
 .inline {display: inline;}
</style>
[HTML] pobierz, plaintext

Natomiast obrazkom dać klasę

[HTML] pobierz, plaintext 
<img class="inline" src="1.jpg" />
[HTML] pobierz, plaintext

Pierwszy eliminuje tę lukę a druga sprawia, że img znowu jest wyświetlany jako element liniowy.
Natomiast jako Transitional przeglądarka na silniku Gecko działa "prawie" zgodnie ze standardami czyli tak jak IE stąd nie trzeba było robić powoższego tricku.

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.