Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: FF blednie interpretuje xHTML
Forum PHP.pl > Forum > Po stronie przeglądarki
Sl0wik
Spedzilem kilka godzin próbując zrobić prostą tabele z 3 obrazkami tak aby byla kompatybilna ze wszystkimi obrazkami i niestety powoli sie podddaje!!!
W IE nie ma najmniejszych klopotow, Opera trybi no ale oczywiscie FF musi sie wysypac!

Kod wyglada w nastepujacy sposob:
Kod
<?echo '<?xml version="1.1" encoding="UTF-8"?>';?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="780" class="table_top">
<tbody>
      <tr>
        <td><img src="images/general/design/logo.gif" alt="" width="180" height="112" /></td>
        <td><img src="images/general/design/top01.jpg" alt="" width="430" height="112" /></td>
        <td><img src="images/general/design/ok50.gif" alt="" width="168" height="112" /></td>
      </tr>
</tbody>
</table>
</body>
</html>


Dostepny jest pod http://www.estatecy.com/testy/.
Powiedzcie mi do %!#$! nedzy co zrobic z tym odstepem na dole tabeli (http://www.estatecy.com/testy/to.jpg) pod FF!?
W temacie napisalem ze blednie interpretuje xHTML bo jak usune deklaracje xHTML`a wszystko jest ok.

Dodam ze kod jest xhtml i css valid.

Jak mi ktos napisze 'to nie uzywaj tabel' to dostane zapasci smile.gif.
dr_bonzo
Na razie 1 rada:
XML jest na razie tylko w wersji 1.0 -->
  1. <?xml version="1.1" encoding="UTF-8"?>

to XHTML jest w 1.0 i 1.1

i druga:
XHTML w wersji 1.1 jest tylko w jednej odmianie -- strict -- ktora jest domyslna i nie trzeba jej wypisywac

albo zmien XHTML na 1.0 -- wtedy mozesz uzyc transitional,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
albo na 1.1
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Sl0wik
W 1.0 dziala ok ale niesety w 1.1 i 1 strict dalej jest odstep. Czy to znaczy ze nie moge uzyc strict xhtml`a pod firefox?
Sl0wik
A czy tabela nie powinna byc defaultowo fixed? O ile pamietam prubowalem z height=0px i nic.
Strus
Cytat(Sl0wik @ 2005-04-15 10:25:32)
Jak mi ktos napisze 'to nie uzywaj tabel' to dostane zapasci smile.gif.

No ale jak tak nie napisać? Jak widzę jak się męczysz z tymi tabelami i wykorzystujesz je niezgodnie z przeznaczeniem, to aż się ciśnie na klawiature nie używaj tabel, odudź się.
Dajesz divy obok siebie ustawiasz im pozycjonowanie absolutne i wszystko jest piękne.
xarr
Dokladnie tak jak napisal Strus. Tabela ze swojego zalozenia nie jest do tego typu rzeczy. Jak usilnie uzywasz jej do takich celow to jedyne co sie sypie to ty. Napewno nie FF.

Jesli jednak cos ci moge poradzic to powiem, ze FF nie ma problemu z tabelkami smile.gif
No i... przekonaj sie do cssow w pelni dbajacych o twoj layout. To nie takie straszne jak sie wydaje, a korzysci masz naprawde wielkie.
Sl0wik
Uzywam tylko css`ow ... powinienes sie chyba domyslic ze skoro pracuje na strict xhtmlu to musze uzywac css`ow!?

Dobra ... skoro twiedzicie ze z div`ami jest wszystko ok to czemu ten dokument:
http://www.estatecy.com/testy/test.html
"znacznie" roznie sie na FF i IE? Naj bardziej nie rozumiem czemu ten sirodkowy dib zajmuje tak malo pod FF.
Oczywiscie wszystko xhtml valid.
revyag
Dlatego że nadałeś divom styl display:inline. Czyli zachowują się jak elementy liniowe i nie możesz nadawać im szerokości.
Sl0wik
To jak mam uzyskac efekt widoczny pod IE?
revyag
Kod
<style type="text/css">
body{
    text-align:center;
}
.cont{
    width:800px;
    margin:0 auto;
}
.dv{
    padding: 0px;
    float:left;
}
</style>

  1. <div id="cont">
  2. <div class="dv"><img src="images/general/design/logo.gif" alt="Logo" /></div>
  3. <div class="dv"><img src="images/general/design/top01.jpg" alt="" /></div>
  4. <div class="dv"><img src="images/general/design/ok50.gif" alt="Ok 50" /></div>
  5. <br style="clear:both" />
  6. <div class="dv"><img src="images/general/design/headings/quick_search.gif" alt="" /></div>
  7. <div class="dv" style="width:479px">-</div>
  8. <div class="dv"><img src="images/general/design/buttons/free_registaration.gif" alt="" /></div>
  9. </div>
Sl0wik
Dobra rada: sprawdz zanim wkleisz.
Zlozone ok ale nie wycentrowane.
text-align:center; <- pod FF to odnosi sie do teksu nie do obiektow
revyag
To działa na 100%, jeśli nie to coś zmieniasz.
Cytat
text-align:center; <- pod FF to odnosi sie do teksu nie do obiektow

Styl text-align dla body zrobiłem specjalnie z myślą o super IE snitch.gif. Firefox radzi sobie bez tego równie dobrze, a wcześniej wspomniana przelądarka ma kłopoty biggrin.gif
Sl0wik
Kod
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<style type="text/css">
body {
   text-align:center;
}
.cont{
   width:800px;
   margin:0 auto;
}
.dv{
   padding: 0px;
   float:left;
}
</style>

</head>
<body>

<div id="cont">
<div class="dv"><img src="images/general/design/logo.gif" alt="Logo" /></div>
<div class="dv"><img src="images/general/design/top01.jpg" alt="" /></div>
<div class="dv"><img src="images/general/design/ok50.gif" alt="Ok 50" /></div>
<br style="clear:both" />

<div class="dv"><img src="images/general/design/headings/quick_search.gif" alt="" /></div>
<div class="dv" style="width:479px">-</div>
<div class="dv"><img src="images/general/design/buttons/free_registaration.gif" alt="" /></div>
</div>

</body>
</html>


FF 1.0.2

exclamation.gif NIE CENTRUJE SIE exclamation.gif
revyag
Sory, literówka smile.gif
W deklaracji styli zamiast .cont napisz #cont i będzie ok.
Sl0wik
Dzieki, znacznie mi ten kod pomogl ale natknelem sie na kolejne klopoty.
IE i FF innaczej interpretuja obramowania blokow. O ile sie nie myle FF taktuje obramowanie jako dodatkowe piksele tabeli a IE jako punkty nalezace do tabeli przezco uzyskuje taki efekt:
http://www.estatecy.com/testy/test2.html
Pod IE i FF wyglada chyba nieco innaczej winksmiley.jpg?
Co mam zrobic by uzyskac jednolita wersje obramkowana, i odpowiedzice mi dlaczego FF obramowal tylko czesc bloku?
revyag
Dodaj do styli:
Kod
#bd{
    width:780px;
}

a kodzie html zrób tak:
  1. <div id="cont">
  2. <div id="bd">
  3. <div class="dv"><img src="images/general/design/logo.gif" alt="Logo" /></div>
  4. <div class="dv"><img src="images/general/design/top01.jpg" alt="" /></div>
  5. <div class="dv"><img src="images/general/design/ok50.gif" alt="Ok 50" /></div>
  6. <br style="clear:both" />
  7. <div class="dv"><img src="images/general/design/headings/quick_search.gif" alt="" /></div>
  8. <div class="dv" style="width:479px; height: 35px; background-image: url(images/general/design/topLinkbg.gif);">-</div>
  9. <div class="dv"><img src="images/general/design/buttons/free_registaration.gif" alt="" /></div>
  10. <br style="clear:both" />
  11. <div class="dv" style="width:180px; background-color: #E8E8E8;">fff</div>
  12. <div class="dv" style="width:420px; background-color: #FFFFFF;">-</div>
  13. <div class="dv" style="width:180px; background-color: #FBF2C7;">dsfdsfd</div>
  14. <br style="clear:both" />
  15. </div>
  16. </div>
Sl0wik
Pod IE ok ale pod FF dalej zanika borderder w dolnej sekcji.
http://www.estatecy.com/testy/test3.html

P.S.
Zalecam update FF do wersji 1.0.3. Poprzednie wersje zawieraja luki umozliwiajace wykonanie kodu.
Wiecej informacji:
http://www.mozilla.org/security/announce/mfsa2005-37.html
http://www.mozilla.org/security/announce/mfsa2005-39.html
revyag
Jest luka bo brakuje
  1. <br style="clear:both" />
przed przedostatnim znacznikiem zamykającym div. Końcówka kodu powinna wyglądać tak:
  1. <br style="clear:both" />
  2. </div>
  3. </div>
  4. </body>
  5. </html>
Sl0wik
Super ... dziala. A masz moze pojecie jak ustalic wysokosc tabeli na 100%?
revyag
Kod
<style type="text/css">
body{
    margin:0;
    padding:0;
}
table{
    height:100%;
    width:100%;
    background-color:green;
}
</style>

  1. <table class="tb"><tr><td></td></tr></table>

cała strona powinna być zielona smile.gif
Sl0wik
Agh ... przejezyczylem sie ;]. Chodzilo mi o ustalenie maksymalnej wysokosci tego glownego diva na stronie z poprzedniego przykladu.
revyag
Stosując tamten kod nie wiem czy jest to możliwe, bo strona i tak się rozciągnie jak będzie więcej rzeczy ponad określoną wysokość.
Można zastosować styl overflow, ale pojawi się wtedy pasek przewijania po prawej i będzie to nieciekawie wyglądać.
A właściwie czemu chcesz ograniczyć wysokość ? Czy nie lepiej jak strona będzie ja dopasowywać ilości treści ?
Sl0wik
Nie jestem grafikiem ... daja mi design i mam go uczynic optymalnym smile.gif... a na designie jest ze strona jest od gry do dolu.

Nom i co ... musze wracac do poczatku? Bo chyba tylko tabela moze miec height: 100% smile.gif.

Gdzie zadeklarowac ten styl overflow?
revyag
Chyba się nie rozumiemy. Dla diva też możesz zrobić height:100% i wtedy strona będzie ciągle rozciągnięta.
Myślałem, że chodzi ustaloną w pixelach wysokość, wtedy gdy treść nie będzie się mieścić div się rozciągnie ponad ustaloną wcześniej wysokość.
Więc jak chcesz żeby główny div wysokość na całą stronę to daj dodatkowo ald niego styl height:100%.
Sl0wik
Moje nerwy sa juz postrzepione na maxa!
http://www.estatecy.com/testy/test4.html
Czemu tekst np w #location nie jest middle skoro tak ustalilem w stylach?
Czemu ta durna przegladarka (FF) dodaje padding do rozmiaru tabeli i co z tym zrobic?
Strus
Cytat(Sl0wik @ 2005-04-20 11:11:00)
Czemu ta durna przegladarka (FF) dodaje padding do rozmiaru tabeli i co z tym zrobic?

Może ustawić padding ? laugh.gif
A durny to jest kod smile.gif
Sl0wik
Kod jest niemalze dokladnie taki jak mi podal revyag.

A padding jest ustawiony: padding: 5px 0px 5px 5px;
revyag
Geez, kod podałem Ci do poprzedniego problemu. Zanim coś napiszesz zastanów się i pomyśl a nie leć od razu na forum.
Jak nie chcesz żeby div się rozszerzał to po prostu wsadź w niego dodatkowy div i w nim ustaw padding.
Kod
<div class="head_right"><div style="padding: 5px 0px 5px 5px;">Subscribers</div></div>
Strus
Heh jak pisałem posta wyżej to widziałem kod innej strony tongue.gif

Co do paddingu to musisz zmienić szerokość tego diva na width: 175px
Była zmiana pomiędzy CSS1 a CSS2.1 i właśnie tak namieszali, że padding wypycha tak dziwnie na zewnątrz. W ogóle do dupy to zrobili IMHO w CSS1 było lepiej, ale co ja mogę, a producenci przeglądarek zaimplementowali to i po sprawie.

BTW. O jakich tabelach Ty mówisz ?
Sl0wik
Strus: a nie przeszlo ci przez mysl ze wtedy pod IE sie smniejszy?
revyag: Tak tez pomyslalem od razu ale myslalem ze jest jakas inna opcja lepsza niz ladowanie bloku w blok. Przeciez to teoretycznie powinno dzialac bez dodawania blokow!!!

Swoja droga to mam znowu klopot z tymi divami. Dajac im height: 100% nie rozciagaja sie. A z kolei jak dam np 100px i napisze za duzo to wychodzi text poza blok zamiast rozciagnac.

Przyklad: http://www.estatecy.com/testy/test5.html
Strus
Cytat(Sl0wik @ 2005-04-20 14:48:11)
Strus: a nie przeszlo ci przez mysl ze wtedy pod IE sie smniejszy?

Nie nieprzyszło tongue.gif Nie mam tej przeglądarki, więc Ci nie pomogę, bo nie mam jak sprawdzić co się pod nią dzieje.
Sl0wik
Kurde juz powoli nie mam sily smile.gif.
Nie moge sobie dac rady z rozciagnieciem wysokosci tabel, FF nie reaguje na height: 100% na height: 100px nie przedluza bloku a IE przemieszcza bloki jak text jest zbyt dlugi.

http://www.estatecy.com/ sadsmiley02.gif

Kod
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv=Content-Type content="text/html; charset=UTF-8" /><title>Ok50</title><link href="/styles/ok50.main.css" type="text/css" rel="stylesheet" /></head><body>

<div id="cont">
 <div id="bd">
   <div><img src="/images/ok50/design/logo.gif" alt="Ok Cyprus Home Finder" /></div>
   <div><img src="/images/ok50/design/top01.jpg" alt="Property" /></div>
   <div><img src="/images/ok50/design/ok50.gif" alt="Ok Cyprus" /></div>
   <br style="clear:both" />
   <div><img src="/images/ok50/design/quick_search.gif" alt="Find Property" /></div>
   <div id="location"><h3>Ok50 >> location1 >> location2</h3></div>
   <div><img src="/images/ok50/design/free_registaration.gif" alt="Free Registration" /></div>
   <br style="clear:both" />
   <div id="col_left">
     <div id="quicksearch">
     <!-- Quick Search -->

     <table>
       <tr>
         <td>District:</td>
         <td>
           <select>
             <option>Any District</option>
             <option>Nicosia</option>
             <option>Limassol</option>
             <option>Larnaca</option>
             <option>Paphos</option>
             <option>Famagusta</option>
           </select>
         </td>
       </tr>
       <tr>
         <td>Min.Price</td>
         <td>
           <select>
             <option value=0>&pound; 0</option>
             <option value=20000 selected>&pound; 20.000</option>
             <option value=30000>&pound; 30.000</option>
             <option value=50000>&pound; 50.000</option>
             <option value=100000>&pound; 100.000</option>
             <option value=150000>&pound; 150.000</option>
             <option value=200000>&pound; 200.000</option>
             <option value=300000>&pound; 300.000</option>
             <option value=10000000>More...</option>
           </select>
         </td>
       </tr>
       <tr>
         <td>Max.Price</td>
         <td>
           <select>
             <option value=20000>&pound; 20.000</option>
             <option value=30000>&pound; 30.000</option>
             <option value=50000>&pound; 50.000</option>
             <option value=100000>&pound; 100.000</option>
             <option value=150000 selected>&pound; 150.000</option>
             <option value=200000>&pound; 200.000</option>
             <option value=300000>&pound; 300.000</option>
             <option value=10000000>More...</option>
           </select>
         </td>
       </tr>
       <tr>
         <td colspan="2"><input type="submit" class="button" value="Search" /></td>
       </tr>
       <tr>
         <td colspan="2"><a href="" class="linkwhitesmall">Regional Search</a> | <a href="" class="linkwhitesmall">Advanced Search</a></td>
       </tr>
       <tr class="space"><td></td></tr>        
     </table>

     <!-- End: Quick Search -->
     </div>
     <div id="code">Code: <input type="text" style="width: 90px"> <input type="submit" class="button" value="Go"></div>
     <div class="head_left" style="text-align: left;"><div>Main Menu</div></div>
     <div>
       <table class="linkslist" align="left">
       <tbody>
<tr><td>::</td><td><a href="#">menu title</a></td></tr><tr><td> </td><td class="slimlinks"><a href="#">sub menu_title</a><br /></td></tr><tr><td>::</td><td><a href="#">neew</a></td></tr><tr><td> </td><td class="slimlinks"><a href="#">new subb</a><br /></td></tr>        </tbody>
       </table>
     </div>
     <div class="head_left" style="text-align: left;"><div>Tools</div></div>
     <div>
       <table class="linkslist" align="left">
       <tbody>
         <tr><td>::</td><td><a href="">mortgage calculator</a></td></tr>
         <tr><td>::</td><td><a href="">metric converter</a></td></tr>
       </tbody>
       </table>
     </div>
   </div>
   <div id="col_center">
     <div id="content">
     Welcome to okCyprus Home Finder, your portal to buying and selling a home in Cyprus.
     <div>Cyprus is a wonderful place to live! At okCyprus Home finder, we are a bit partial, but we think the quality of life in Cyprus is unmatched anywhere. </div>
     <div>Search on-line for a huge variety of Budget &amp; VIP properties...... just click on the Quick Search facility on the top left of the homepage to access more properties.</div>
     <div>We are a Cyprus estate agency backed by an established UK organisation experienced in property sales, with 1000s of properties listed on our database, ranging from small apartments to luxury developments. </div>
     <div>A team of dedicated professionals here in the UK, and in Cyprus, are on hand every step of the way to ensure that finding and purchasing the home of your dreams is easy and straightforward – as it should be! Our team removes all the worries of property purchase in Cyprus. </div>

     </div>
   </div>
   <div id="col_right">
     <div class="head_right"><div>Subscribers</div></div>text<br />text
     <div class="head_right"><div>Subscribers</div></div>text<br />text glkfjhklgfjh gjgfd lkhgfd;lkhj gfdhj lkgfjhlkgfjdlkhj lkhjgfdlk h;lkgfdjh;jhlkgfdjh gjhgkl;fdj
   </div>
   <br style="clear:both" />
   <div id="copyrights">test</div>
   <br style="clear:both" />
 </div>

</div>

</body>
</html>



Kod
body {
  margin: 0px;
  text-align:center;
  background-image: url(/images/ok50/design/bg.gif);
}

div, td, input, select {
    font-family: Tahoma;
    font-size: 11px;
}

input, select {
    font-size: 8pt;
    color: #006699;
    height: 18px;
    border-top: 1px solid #006699;
    border-right: 1px solid #006699;
    border-bottom: 1px solid #006699;
    border-left: 1px solid #006699;

}

A {
    color: #003399;
    font-weight: bold;
    text-transform: capitalize;
}

#cont{
  width:780px;
  margin:0 auto;
  border-right: 1px solid black;
  border-left: 1px solid black;
  height: 100%;
}


#bd {
  width:780px;
  height: 100%;
}

#copyrights {
    width:780px;
    height: 45px;
    background-color: #CCCCCC;
}

#col_right {
    width:180px;
    background-color: #FBF2C7;
    border-left: 1px dotted black;
   height: 100%;
}

#col_center {
    width:419px;
    background-color: #FFFFFF;
   height: 50px;
}

#col_left {
    width:180px;
    background-color: #E8E8E8;
   height: 100%;
}

#location {
    width:479px;
    height: 35px;
    background-image: url(/images/ok50/design/topLinkbg.gif);
    text-align: left;
}

#location h3 {
    margin-top: 8px;
    margin-left: 10px;
    margin-bottom: 0px;
    font-size: 13px;
    color: #990000;
}

#quicksearch {
    background-color: #247094;
    width: 180px;
}

#quicksearch td {
    color: #FFFFFF;
}

#code {
    color: #FFFFFF;
    background-color: #2A7F9E;
    width: 180px;
    border-top: 1px dotted white;
    border-bottom: 1px dotted white;
}

#content {
    margin: 10px;
}

#bd div {
  float:left;
}

.head_right {
    background-color: #557DBC;
   width: 180px;
   text-align:left;
}

.head_right div {
    padding: 5px 0px 5px 5px;
    font-size: 12px;
    font-weight: bold;
    text-transform: capitalize;
    color: #FFFFFF;
}

.head_left {
    background-color: #B1B1B1;
   width: 180px;
   text-align:left;
}

.head_left div {
    padding: 5px 0px 5px 5px;
    font-size: 12px;
    font-weight: bold;
    text-transform: capitalize;
    color: #000000;
}

.button {
    color: #FFFFFF;
    background-color: #1A586D;
    font-weight: bold;
    border: 1px solid #92CAE4;
}

.linkwhitesmall {
    font-size: 10px;
    color: #FFFFFF;
    font-weight: normal;
}

.space {
    height: 10px;
}

.linkslist {
    text-align: left;
}

.slimlinks A {
    font-weight: normal;    
}



JAK KTOS SIE CZUJE NAPRAWDE MOCNY W CSS+XHTML TO ZAPRASZAM NA GG: 934514. CHETNIE ZAPLACE ZA POMOC smile.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.