ugrás a tartalomhoz

XHTML 1.1 doctype-ot megadva szétcsúszik az oldal

levipadre · 2007. Jún. 14. (Cs), 10.36
Sziasztok!

Egy olyan probléma jelentkezett honlapkészítés közben, hogy:

A HTML kódban indítottam a DOCTYPE-ot, majd a szokásos dolgokat. IE7 és Mozilla 2.0.0.4 alatt teszteltem a lapot.
Mindkettőnél szét volt csúszva az egész, sőt, némely elemeket meg sem jelenített a böngésző.
Azt vettem észre, hogy ha kiveszem a DOCTYPE-ot a kódból, akkor az IE tökéleteen megjeleníti az oldalt, Mozillánál viszont minden marad ugyanolyan rosszul.
Már kipróbáltam szerintem az összes DOCTYPE deklarálást, de akkor is szétesik az egész, úgyhogy ezért fordultam hozzátok.
A CSS-sel úgy gondolom, nem lehet baj, mert megjeleník az oldal ahogy kell, de csak akkor, ha nincsen doctype.

Nem tudom, kapásból tudja-e valaki a megoldást, ha szükséges, persze megadok kódot is, de talán elsőre elég lesz ennyi.

HTML(így ment az odal): 

<html>
<head>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
      <meta http-equiv="content-language" content="hu" />
      <meta name="description" content="kresz-oktatás" />
      <meta name="keywords"  content="lwdesign,webdegign,design,honlap,honlapkészítés,logo,céglogo,névjegykártya,készítés,tervezés" />
      <meta name="author" content="Levente" />
      <meta name="copyright" content="Levente, 2007" />
		
		<link rel="shortcut icon" href="images/logo_s.ico" />
		<link rel="stylesheet" href="style_varosszepe.css" type="text/css">
		<link rel="stylesheet" href="flexcrollstyles.css" type="text/css">
		<link rel="stylesheet" href="tutorsty.css" type="text/css">
		<script language="JavaScript" type='text/javascript' src="flexcroll.js"></script>

		<title>LW Design - Város Szépe</title>
</head>


HTML (így már szétcsúszott)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
      <meta http-equiv="content-language" content="hu" />
      <meta name="description" content="kresz-oktatás" />
      <meta name="keywords" content="lwdesign,webdegign,design,honlap,honlapkészítés,logo,céglogo,névjegykártya,készítés,tervezés" />
      <meta name="author" content="Levente" />
      <meta name="copyright" content="Levente, 2007" />
		
		<link rel="shortcut icon" href="images/logo_s.ico" />
		<link rel="stylesheet" href="style_varosszepe.css" type="text/css">
		<link rel="stylesheet" href="flexcrollstyles.css" type="text/css">
		<link rel="stylesheet" href="tutorsty.css" type="text/css">
		<script language="JavaScript" type='text/javascript' src="flexcroll.js"></script>

		<title>LW Design - Város Szépe</title>
</head>
Tudom, hogy rátok számíthatok, kb. egy hete is segítettetek rajtam. Hát ez van, úgy tűnik, mostanában belebotlok érdekes dolgokba.

A segítséget előre is köszönöm.
‹ javascript + űrlap + háttérváltoztatás background probléma ›
 ■
1

Box model

attlad · 2007. Jún. 14. (Cs), 11.04
DOCTYPE nélkül az Explorer hibás CSS box modelt alkalmaz. Adj meg DOCTYPE-ot és írd át a CSS-t hogy úgy jó legyen az oldal, lehetőleg közben FF-ban ellenőrizve, a végén nézd meg IE-ben is. Végül ha szükséges, conditional comments részben be tudod csatolni a fix-et az IE-nek.

Ja és használd a CSS és a HTML validátort ellenőrzésre.
2

IE és XHTML 1.1? Viccelsz?

Wabbitseason · 2007. Jún. 14. (Cs), 11.05
http://www.webdevout.net/articles/beware-of-xhtml
http://www.sitepoint.com/forums/showthread.php?t=393445
http://www.sitepoint.com/forums/showthread.php?t=320391
5

Atyagatya

janoszen · 2007. Jún. 14. (Cs), 15.20
Te jesszus... elolvastam és nagyon gyorsan leizzadtam, majd félálom állapotomban rémképek kergetődztek előttem az említett rondaságokból...
6

válasz proclub számára

levipadre · 2007. Jún. 14. (Cs), 18.00
Nagyon szépen köszönöm az építő jellegű hozzászólást. Azt hiszem, kár volt így dícsérnem a weblabort (vagy talán nem kellene általánosítanom).
Idő közben rájöttem, mit szúrtam el, bár szerinted biztos az egész kukába való. Én jelenleg erre vagyok képes, és ha az olyan emberek, mint te, ilyeneket írnak a másiknak, akkor nehéz lesz így bárkinek is fejlődnie.
Amúgy egyáltalán nem vettem fel, de azért megkérdezném tőled: Te egyáltalán minek fórumozol? Láttam a honlapod, nagyon ügyes vagy, meg látszik, értesz is ahhoz, amit csinálsz, de csak ha ennyit tudsz írni, kár bármit is írnod.

Ha pedig esetleg félreértettem a hozzászólásodat, akkor elnézésedet kérem, nem szóltam semmit.

Üdv: levipadre
7

jaj

Hojtsy Gábor · 2007. Jún. 14. (Cs), 18.11
Ahogy a behúzásból is látszik, Proclub az őt megelőző Wabbitseason hozzászólására reagált, tehát az XHTML vs. HTML témában linkelt dokumentumokra írta, amit reagált, nem pedig a te honlapodra.

Nem értem ezért miért kellene neki beszólni, az meg eléggé sovány, hogy ennyi leszólás után beírod, hogy ha félreértetted, akkor mégis nem szóltál semmit.
8

igaz

levipadre · 2007. Jún. 14. (Cs), 18.25
Értem, a behúzást nem vettem észre. Ebben az esetben proclubnak tartozok egy bocsánatkéréssel.
Nem vagyok kötekedős típus, csak kezdő, és ezért rosszul esett a hozzászólás. De úgy tűnik még figyelmetlen is voltam. Többet egy szót se szólok.
9

elnézést

levipadre · 2007. Jún. 14. (Cs), 18.29
Tartozok neked egy bocsánatkéréssel. A szerkesztő felhívta a figyelmemet valamire, és teljesen igaza volt. Nem akartalak megsérteni, félreértettem az egészet dolgot. Kérlek ne haragudj. Mégegyszer bocsánat, hülye voltam.
11

Semmi gond

janoszen · 2007. Jún. 14. (Cs), 19.14
Semmi gond, én is néztem már el rossz napomon dolgokat és csináltam bakikat, mindenkivel előfordul. :)

Egyébként tényleg elolvastam az XHTML-es doksit és attól kezdtem el szédülni...
12

Ú, ez nagyon hasznos volt.

Fraki · 2007. Jún. 14. (Cs), 19.53
Ú, ez nagyon hasznos volt, amiket belinkeltél.

Már egy ideje teljesen elfogadott, hogy az xhtml a trendi és a jövő, csak azon folyt legfeljebb vita, hogy strict vagy transitional, erre meg kiderül, hogy az egész zsákutca...!

Én meg még büszke voltam, hogy valid xhtml-t csinálok, persze text/html content type-pal, pf...

A helyzetet bonyolítja, hogy az xhtml már annyira elfogadott, hogy pl. a php nl2br is <br /> -rel helyettesít, de mostmár ugye tudjuk, hogy ezeknek a tageknek a 99.99%-a (ill. még ennél is több) egy sgml-parseren megy keresztül, hibával...

Hát ez engem most mellbevágott.
13

A nemzetközi helyzet egyre fokozódik

Wabbitseason · 2007. Jún. 15. (P), 09.50
Ja kérem, az élet nem habostorta! :)

Én is köpködtem nagyokat, hogy de hát az XHTML az milyen szép kis poroszos szabvány, de mostanra körülbelül beletörődtem abba, hogy nem zárom le az üres tageket (mert jobbára ez a fő különbség, amit kénytelenek vagyunk betartani, amennyiben valid kódot szeretnénk készíteni).

Nyilván abban az esetben, amikor valamilyen XML alapú keretrendszert használunk -- pl. Tapestry --, oda jó, ha XHTML 1 Strict szerinti template-eket fabrikálunk, és csak mi tudjuk, hogy az eredmény attól még "tag soup". Viszont a böngészők simán boldogulnak ezekkel, ezért nincs ok a pánikra, csak épp nem árt, ha tudjuk, hogy valójában mit csinálunk.
14

és megint csak az IE miatt

Fraki · 2007. Jún. 17. (V), 10.08
És mindez megint csak és csak és csak és kizárólag az IE miatt...

Egyébként sokat segítene, ha a HTML megengedné az önlezáró tageket, mert hiába hibatűrő az SGML-parser, az ember tényleg szeretne valid lenni, és, ahogy írod, ez az egyetlen szabály, amiben a két szabvány kizárja egymást, és nem simán a HTML megengedőbb.

Innen egy kiút van csak: explicit lezárni minden taget. (Broáf.) (Mondjuk idáig is voltak ezzel problémák, például az <a> taget nem lehetett önlezárva lezárni (mostmár tudom, hogy miért, MUHAHA!)

De nem tudok nem folyamatosan elképedni, mikor most is olvasom a különböző okos írásokat HTML vs XHTML oldalakon (XHTML 1 is ready for future stb. stb.....)
15

mégse

Fraki · 2007. Jún. 17. (V), 11.26
Mégse kiút, mert a html-ben meg tilos lezárni néhány taget, köztük olyan fontosakat, mint az input vagy img...
16

Nincs katasztrófa

Wabbitseason · 2007. Jún. 22. (P), 10.13
Szerintem nem ennyire szomorú a helyzet, inkább gusztus dolga, hogy amennyiben nem kötnek technológiai megfontolások vagy megrendelői elvárások, XHTML 1-et vagy HTML 4-et használunk-e.

A böngészők úgyis megeszik a text/html-ként kiszolgált XHTML 1-et, és úgyis többféle böngészőn kell tesztelni.

Az XHTML mellett az volt annak idején a "nagy érv", hogy egyszerűbb parser kell hozzá, és az azért jó, mert a csekély teljesítményű kenyérpirítók és mobiltelefonok is meg tudnak majd jeleníteni komplex weboldalakat. Csakhogy az Opera mobilra készített böngészője simán parse-ol HTML "tag soup"-ot, tehát az xml parser előnye továbbra is elméleti előny marad, amit a gyakorlatban nem sikerült igazolni, tehát nincs rákényszerítve senki az xml parser használatára a böngészőkben.
3

És a body?

Nagy Gusztáv · 2007. Jún. 14. (Cs), 11.06
Namost ha az oldalból nem látjuk a body-t, akkor nehéz lesz megmondani, miért csúszik szét :(
4

kód

levipadre · 2007. Jún. 14. (Cs), 12.31
HTML: 
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
      <meta http-equiv="content-language" content="hu" />
      <meta name="description" content="kresz-oktatás" />
      <meta name="keywords" content="lwdesign,webdegign,design,honlap,honlapkészítés,logo,céglogo,névjegykártya,készítés,tervezés" />
      <meta name="author" content="Kósa Levente" />
      <meta name="copyright" content="Kósa Levente, 2007" />
		
		<link rel="shortcut icon" href="images/logo_s.ico" />
		<link rel="stylesheet" href="style_varosszepe.css" type="text/css">
		<link rel="stylesheet" href="flexcrollstyles.css" type="text/css">
		<link rel="stylesheet" href="tutorsty.css" type="text/css">
		<script language="JavaScript" type='text/javascript' src="flexcroll.js"></script>

		<title>LW Design - Város Szépe</title>
</head>
<body>
   <div id="container">
      <table cellpadding="0" cellspacing="0" border="0">
      	<tr>
      		<td id="01"></td>
      		<td id="02"></td>
      		<td id="03">
               <div id="menu">
                  <ul>
                     <li><a href="#">Bemutatkozás</a></li>
                     <li><a href="#">Történetünk</a></li>
                     <li><a href="#">Város Szépe 2007</a></li>
                     <li><a href="#">Archívum</a></li>
                     <li><a href="#"><span>Galéria</span></a></li>
                     <li><a href="#">Támogatóink</a></li>
                     <li><a href="#">Elérhetőség</a></li>
                     <li><a href="#">Vendégkönyv</a></li>
                  </ul>
               </div>
            </td>
      	</tr>
      	<tr>
      		<td id="04">
               <div id="galeria">

                  <div id='mycustomscroll' class='flexcroll'>
              		    <div class="kepek">
                        <img src="../img_varosszepe/kep1_s.jpg" width="100" height="67"><p>
                        <img src="../img_varosszepe/kep2_s.jpg" width="100" height="67"><p>
                        <img src="../img_varosszepe/kep3_s.jpg" width="100" height="67"><p>
                        <img src="../img_varosszepe/kep4_s.jpg" width="100" height="67"><p>
                        <img src="../img_varosszepe/kep5_s.jpg" width="100" height="67"><p>
                        <img src="../img_varosszepe/kep6_s.jpg" width="100" height="67"><p>
                        <img src="../img_varosszepe/kep7_s.jpg" width="100" height="67"><p>
                        <img src="../img_varosszepe/kep8_s.jpg" width="100" height="67"><p>
                        <img src="../img_varosszepe/kep9_s.jpg" width="100" height="67"><p>
                        <img src="../img_varosszepe/kep10_s.jpg" width="100" height="67"><p>

                        <img src="../img_varosszepe/kep1_s.jpg" width="100" height="67"><p>
                        <img src="../img_varosszepe/kep2_s.jpg" width="100" height="67"><p>
                        <img src="../img_varosszepe/kep3_s.jpg" width="100" height="67"><p>
                        <img src="../img_varosszepe/kep4_s.jpg" width="100" height="67"><p>
                        <img src="../img_varosszepe/kep5_s.jpg" width="100" height="67"><p>
                        <img src="../img_varosszepe/kep6_s.jpg" width="100" height="67"><p>
                        <img src="../img_varosszepe/kep7_s.jpg" width="100" height="67"><p>
                        <img src="../img_varosszepe/kep8_s.jpg" width="100" height="67"><p>
                        <img src="../img_varosszepe/kep9_s.jpg" width="100" height="67"><p>
                        <img src="../img_varosszepe/kep10_s.jpg" width="100" height="67"><p>
                        
                        <img src="../img_varosszepe/kep1_s.jpg" width="100" height="67"><p>
                        <img src="../img_varosszepe/kep2_s.jpg" width="100" height="67"><p>
                        <img src="../img_varosszepe/kep3_s.jpg" width="100" height="67"><p>
                        <img src="../img_varosszepe/kep4_s.jpg" width="100" height="67"><p>
                        <img src="../img_varosszepe/kep5_s.jpg" width="100" height="67"><p>
                        <img src="../img_varosszepe/kep6_s.jpg" width="100" height="67"><p>
                        <img src="../img_varosszepe/kep7_s.jpg" width="100" height="67"><p>
                        <img src="../img_varosszepe/kep8_s.jpg" width="100" height="67"><p>
                        <img src="../img_varosszepe/kep9_s.jpg" width="100" height="67"><p>
                        <img src="../img_varosszepe/kep10_s.jpg" width="100" height="67"><p>
                      </div>
              	   </div>


               </div>
            </td>
      		<td id="05">
               <div id="content">
                  <div id="cim">Galéria</div>
                  <div id="datum">2006</div>
                     <img src="../img_varosszepe/kep1.jpg" width="450" height="300" />
                     <div class="caption">XI. Tőserdő Szépe / 2006. 07. 29. &nbsp;&nbsp;&nbsp; Estélyiruhás fellépés</div>
               </div>
            </td>
      		<td id="06"></td>
      	</tr>
         <tr>
      		<td id="07"></td>
      		<td id="08">
               <div id="copyright">Copyright &copy; Város Szépe 1996 - 2007.</div>
            </td>
      		<td id="09">
               <div id="mzaszlo"><a href="#"></a></div>
               <div id="nzaszlo"><a href="#"></a></div>
               <div id="azaszlo"><a href="#"></a></div>
            </td>
      	</tr>
      </table>
   </div>
</body>
</html>
CSS: 
body {margin: 0;
      padding: 0;
      background: #d9969d;
      color: #fff;
      font: 11px Arial,Verdana;
     }
     
#container {
           position: absolute;
           top: 10px;
           left: 10px;
           margin: 0;
           padding: 0;
           width: 950px;
           height: 600px;
           background: url(../img_varosszepe/background.jpg) repeat;
           }
           
#content{
         position: relative;
         top: 0px;
         left: 65px;
         width: 500px;
         height: 400px;
         text-align: justify;
        }

table {margin: 0;
       padding: 0;
       width: 950px;
       height: 600px;
      }

#01 {
     width: 130px;
     height: 40px;
     background-color: #d9969d;
    }

#02 {
     width: 605px;
     height: 40px;
     background: url(../img_varosszepe/td_02.jpg) no-repeat;
    }

#03 {
     width: 215px;
     height: 40px;
     background: url(../img_varosszepe/td_03.jpg) no-repeat;
    }

#04 {
     width: 130px;
     height: 495px;
     background: url(../img_varosszepe/td_04.jpg) no-repeat;
    }

#05 {
     width: 605px;
     height: 495px;
     background: url(../img_varosszepe/td_05_gal.jpg) no-repeat;
    }

#06 {
     width: 215px;
     height: 495px;
     background: url(../img_varosszepe/td_06.jpg) no-repeat;
    }

#07 {
     width: 130px;
     height: 65px;
     background-color: #d9969d;
    }

#08 {
     width: 605px;
     height: 65px;
     background: url(../img_varosszepe/td_08.jpg) no-repeat;
    }

#09 {
     width: 215px;
     height: 65px;
     background: url(../img_varosszepe/td_09.jpg) no-repeat;
    }

#copyright {
            position: relative;
            top: -5px;
            left: 100px;
            font-size: 9pt;
            font-style: italic;
           }

#mzaszlo a {
            position: relative;
            width: 34px;
            height: 34px;
            float: left;
            top: -10px;
            left: 40px;
            text-decoration: none;
            background: url(../img_varosszepe/mzaszlo.jpg) no-repeat;
           }



#mzaszlo a:hover {
                 position: relative;
                 width: 34px;
                 height: 34px;
                 top: -10px;
                 left: 40px;
                 text-decoration: none;
                 background: url(../img_varosszepe/mzaszlo_h.jpg) no-repeat;
                 }
                 
#nzaszlo a {
            position: relative;
            width: 34px;
            height: 34px;
            float: left;
            top: -10px;
            left: 50px;
            text-decoration: none;
            background: url(../img_varosszepe/nzaszlo.jpg) no-repeat;
           }



#nzaszlo a:hover {
                 position: relative;
                 width: 34px;
                 height: 34px;
                 top: -10px;
                 left: 40px;
                 text-decoration: none;
                 background: url(../img_varosszepe/nzaszlo_h.jpg) no-repeat;
                 }

#azaszlo a {
            position: relative;
            width: 34px;
            height: 34px;
            top: -10px;
            left: 60px;
            text-decoration: none;
            background: url(../img_varosszepe/azaszlo.jpg) no-repeat;
           }



#azaszlo a:hover {
                 position: relative;
                 width: 34px;
                 height: 34px;
                 top: -10px;
                 left: 40px;
                 text-decoration: none;
                 background: url(../img_varosszepe/azaszlo_h.jpg) no-repeat;
                 }

#menu {
      position: absolute;
      top: 65px;
      left: 748px;
      width: 154px;
      margin: 0;
      padding: 0;
      margin-left: auto;
      margin-right: auto;
      }

#menu ul {
         margin: 0;
         padding: 0;
         list-style-type: none;
         }

#menu ul li {
            padding-bottom: 5px;
            width: 154px;
            height: 18px;
            background: url(../img_varosszepe/btn.gif) no-repeat;
            }

#menu ul li a  {
               font: italic 12px arial;
               font-weight: bold;
               color: #48030a;
               width: 154px;
               height: 18px;
               text-decoration: none;
               }

#menu ul li a:hover {
                    font: italic 12px arial;
                    font-weight: bold;
                    text-decoration: none;
                    color: #f0cfd2;
                    width: 154px;
                    height: 18px;
                    background: url(../img_varosszepe/btn_h.gif) no-repeat;
                    }
                    
span {
     text-decoration: none;
     color: #f0cfd2;
     width: 154px;
     height: 18px;
     background: url(../img_varosszepe/btn_h.gif) no-repeat;
     }

#cim {
     position: absolute;
     top: 10px;
     left: 0px;
     float: left;
     width: 500px;
     color: #2f2e2e;
     border-bottom-width: 2px;
     border-bottom-style: solid;
     font: italic 18px arial;
     }
     
#datum {
       position: absolute;
       top: 10px;
       left: 450px;
       color: #2f2e2e;
       font: italic 18px arial;
       }

img {
    position: relative;
    top: 68px;
    left: 20px;
    }
    
.caption {
         position: relative;
         top: 90px;
         left: 90px;
         font-size: 12px;
         color: #2f2e2e;
         clear: both;
         }
         
#galeria {
         position: absolute;
         width: 142px;
         height: 485px;
         top: 70px;
         left: 10px;
         background: url(../img_varosszepe/galeria.jpg) no-repeat;
         }
         
.kepek {
       position: relative;
       top: -60px;
       right: 26px;
       }
10

Megjelenítési mód

Jano · 2007. Jún. 14. (Cs), 18.36
Elősorban nem az XHTML kiszolgálásával kapcsolatos irományokat kell bújnod, hanem a doctype-hoz kapcsolódó megjelenítési módváltás következményeit: keress doctype switch-re, szabvány módra ilyesmi.

Táblázat erősen beszólhat, javaslom ha tudod haggyad el a layout kialakításból!