ďťż

[CSS, HTML] Dobre wyświetlanie w Mozilli natomiast złe w IE, dlaczego?

Podstrony

telcocafe

Witam
Mam projekt strony, które bezbłędnie jest interpretowana przez Mozille Firefox, jednak w Internet Explorerze jest źle wyświetlana (niebieskie tło zamiast białego, złe położenie menu - nadole zamiast z prawej).
Co w kodzie jest źle napisane?
Czy mógłbyć ktoś sprawdzić jegos poprawność i powiedzieć co nie tak?
Bardzo bym prosił.
POZDRAWIAM
matmic.fm.interia.pl/strona.rar

Tak na przyszłośc mówię, że przy tworzeniu layoutu na divach korzystając z float najwygodniej jest wyrównywać do lewej. Czyli kolejność elementów na stronie będzie taka nagłówek -> menu (float: left) -> content (float:left) -> stopka..., a nie że tworzysz w kodzie najpierw content, a potem menu i cudami starasz się przesnąc go z lewej strony przed content. Nie wiem po co się tak męczyć. Nie wiem też gdzie ma być poziome menu, ale to juz sobie poprawisz. Co do białego tła. Nigdzie tego nie miałem, ale coś jest i tak źle bo w Operze wychodzą zalążki ramki (ma białe tło ale taki jest gif), a w FF i IE nie. Więc jeszcze musisz się z tym trochę pomęczyć. Tutaj masz pliki trochę poprawione pliki:
index.html<html> <head> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" /> <meta http-equiv="Content-Language" content="pl" /> <meta name="Keywords" content="keywords" /> <meta name="Description" content="description" /> <meta name="Author" content="author" /> <link rel="stylesheet" type="text/css" href="default.css" media="screen"/> <title>Indigo</title> </head> <body> <div class="container"> <div class="header"> <div class="title"> <h1>MATMIC.pl <sub>BETA</sub></h1> </div> <div class="navigation"> <a href="index.html">News</a> <a href="index.html">Vista</a> <a href="index.html">Office 2007</a> <a href="index.html">Porady</a> <a href="index.html">Kontakt</a> <div class="clearer"><span></span></div> </div> </div> <div class="main"> <div class="sidenav"> <h1>Wyszukaj</h1> <form action="index.html"> <div> <input type="text" name="search" class="styled" /> <input type="submit" value="Szukaj" class="button" /> </div> </form> <h1>News</h1> <ul> <li><a href="index.html">Pierwszy</a></li> <li><a href="index.html">Drugi</a></li> <li><a href="index.html">Trzeci</a></li> </ul> <h1>Vista</h1> <ul> <li><a href="index.html">Testy</a></li> <li><a href="index.html">Galeria</a></li> <li><a href="index.html">Wersje</a></li> </ul> <h1>Office 2007</h1> <ul> <li><a href="index.html">Testy</a></li> <li><a href="index.html">Galerie</a></li> <li><a href="index.html">Wersje</a></li> </ul> </div> <div class="content"> <h1>Tytuł</h1> <div class="descr">15 sierpnia 2006</div> <p>Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt.</p> <cite>Cytat, Cytat, Cytat, Cytat, Cytat, Cytat.</cite> <p>Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt.</p> <p>Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt. </p> <h1>Tytuł</h1> <div class="descr">15 sierpnia 2006</div> <p>Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt.</p> <ul> <li>Lista</li> <li>Lista</li> <li>Lista</li> </ul> <p>Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt.</p> <h1>Tytuł</h1> <div class="descr">15 sierpnia 2006</div> <p>Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt.</p> <code>Kod, Kod, Kod, Kod, Kod, Kod, Kod, Kod, Kod, Kod, Kod, Kod, Kod, Kod, Kod, Kod, Kod, Kod, Kod.</code> <p>Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt.</p> </div> <div class="clearer"><span></span></div> </div> </div> <div class="footer">© 2006 <a href="index.html">MATMIC.pl</a> <sub>BETA</sub> </div> </body> </html>
default.css/* standard elements */ * { margin: 0; padding: 0; } a { color: #F70; } a:hover { color: #C60; } body { background: #0094D6 url(img/bg.gif) repeat-x; color: #466; font: normal 62.5% "Lucida Sans Unicode",sans-serif; margin: 0; } input { color: #555; font: normal 1.1em "Lucida Sans Unicode",sans-serif; } p,cite,code,ul { font-size: 1.2em; padding-bottom: 1.2em; } h1 { font-size: 1.4em; margin-bottom: 4px; } code { background: url(img/bgcode.gif); border: 1px solid #F0F0F0; border-left: 6px solid #39F; color: #555; display: block; font: normal 1.1em "Lucida Sans Unicode",serif; margin-bottom: 12px; padding: 8px 10px; white-space: pre; } cite { background: url(img/quote.gif) no-repeat; color: #666; display: block; font: normal 1.3em "Lucida Sans Unicode",serif; padding-left: 28px; } h1,h2,h3 { color: #06C; padding-top: 6px; } /* misc */ .clearer { clear: both; } /* structure */ .container { background: url(img/topleft.gif) no-repeat; } .header { height: 92px; } /* title */ .title { float: right; padding: 28px 0 0 76px; } .title h1 { color: #FFF; font: normal 2em Verdana,sans-serif; } /* navigation */ .navigation { float: right; height: 92px; margin-left: 24px; padding: 0 16px; } .navigation a { color: #FFF; float: right; font: bold 1.2em "Trebuchet MS",sans-serif; margin-top: 56px; padding: 8px 18px; text-align: center; text-decoration: none; } .navigation a:hover { background-color: #4A91C3; color: #FFF; } /* main */ .main { background: #FFFFF url(img/bgmain.gif) no-repeat; clear: both; padding: 12px 12px 0 52px; } /* main left */ .sidenav { float: left; width: 24%; } .sidenav h1 { border-bottom: 1px dashed #DDD; color: #E73; font-size: 1.2em; height: 20px; margin-top: 1.2em; } .sidenav ul { margin: 0; padding: 0; } .sidenav li { border-bottom: 1px dashed #EEE; list-style: none; margin: 0; } .sidenav li a { color: #777; display: block; font-size: 0.9em; padding: 3px 6px 3px 18px; text-decoration: none; } .sidenav li a:hover { color: #111; background: url(img/nav_li.gif) no-repeat; } /* content */ .content { float: left; margin-right: 4%; width: 67%; } .content .descr { color: #C60; margin-bottom: 6px; } .content li { list-style: url(img/li.gif); margin-left: 18px; } /* search form */ .styled { border: 3px double #E5E5E5; padding: 2px 3px; } .button { border: 1px solid #AAA; margin-left: 5px; padding: 2px 3px; } /* footer */ .footer { background: #0094D6 url(img/bgfooter.gif) repeat-x; color: #C1DEF0; font-size: 1.1em; line-height: 40px; text-align: center; } .footer a { color: #FFF; text-decoration: none; } .footer a:hover { color: #FFF; text-decoration: underline; }

Dzięki wielkie za zainteresowanie się.
Jednak nie zmienia to postaci. W IE jest nadal źle. Jednak z mozilli działa nadal dobrze - jedyna różnica, to że przestawiłeś menu pionowe z prawej na lewą (ma być po prawej).
Menu poziome ma być po prawej i nie co niżej od napisu MATMIC.pl BETA - tak jak jest.

A menu ma być po prawej... zasugerowałem się tym żę w FF miało być dobrze, a u mnie w FF menu po ściągnięciu było z lewej strony...

A mógłbyś jeszcze raz zerknąć na tą stronke?

Poprawiłem część, mam nadzieję, że teraz będzie lepiej. Z tym poziomym menu wyjechałem poza div header bo do niego nie należał. Zamieniłem kolejnośc na poprawną. Muszę ostrzec, że strasznie namieszałeś z marginesami bo przy szerokości content 67% w każdej przeglądarce wygląda to inaczej (i to dobrze widać). W IE jest najszerzej i gdy braknie miejsca dla content to menu wyląduje automatycznie pod spodem (stąd też bład)
index2.html<html> <head> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" /> <meta http-equiv="Content-Language" content="pl" /> <meta name="Keywords" content="keywords" /> <meta name="Description" content="description" /> <meta name="Author" content="author" /> <link rel="stylesheet" type="text/css" href="default.css" media="screen"/> <title>Indigo</title> </head> <body> <div class="container"> <div class="header"> <div class="title"> <h1>MATMIC.pl <sub>BETA</sub></h1> </div> </div> <div class="navigation"> <a href="index.html">News</a> <a href="index.html">Vista</a> <a href="index.html">Office 2007</a> <a href="index.html">Porady</a> <a href="index.html">Kontakt</a> <div class="clearer"><span></span></div> </div> <div class="main"> <div class="content"> <h1>Tytuł</h1> <div class="descr">15 sierpnia 2006</div> <p>Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt.</p> <cite>Cytat, Cytat, Cytat, Cytat, Cytat, Cytat.</cite> <p>Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt.</p> <p>Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt. </p> <h1>Tytuł</h1> <div class="descr">15 sierpnia 2006</div> <p>Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt.</p> <ul> <li>Lista</li> <li>Lista</li> <li>Lista</li> </ul> <p>Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt.</p> <h1>Tytuł</h1> <div class="descr">15 sierpnia 2006</div> <p>Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt.</p> <code>Kod, Kod, Kod, Kod, Kod, Kod, Kod, Kod, Kod, Kod, Kod, Kod, Kod, Kod, Kod, Kod, Kod, Kod, Kod.</code> <p>Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt, Teskt.</p> </div> <div class="sidenav"> <h1>Wyszukaj</h1> <form action="index.html"> <div> <input type="text" name="search" class="styled" /> <input type="submit" value="Szukaj" class="button" /> </div> </form> <h1>News</h1> <ul> <li><a href="index.html">Pierwszy</a></li> <li><a href="index.html">Drugi</a></li> <li><a href="index.html">Trzeci</a></li> </ul> <h1>Vista</h1> <ul> <li><a href="index.html">Testy</a></li> <li><a href="index.html">Galeria</a></li> <li><a href="index.html">Wersje</a></li> </ul> <h1>Office 2007</h1> <ul> <li><a href="index.html">Testy</a></li> <li><a href="index.html">Galerie</a></li> <li><a href="index.html">Wersje</a></li> </ul> </div> <div class="clearer"><span></span></div> </div> </div> <div class="footer">© 2006 <a href="index.html">MATMIC.pl</a> <sub>BETA</sub> </div> </body> </html>
default.css/* standard elements */ * { margin: 0; padding: 0; } a { color: #F70; } a:hover { color: #C60; } body { background: #0094D6 url(img/bg.gif) repeat-x; color: #466; font: normal 62.5% "Lucida Sans Unicode",sans-serif; margin: 0; } input { color: #555; font: normal 1.1em "Lucida Sans Unicode",sans-serif; } p,cite,code,ul { font-size: 1.2em; padding-bottom: 1.2em; } h1 { font-size: 1.4em; margin-bottom: 4px; } code { background: url(img/bgcode.gif); border: 1px solid #F0F0F0; border-left: 6px solid #39F; color: #555; display: block; font: normal 1.1em "Lucida Sans Unicode",serif; margin-bottom: 12px; padding: 8px 10px; white-space: pre; } cite { background: url(img/quote.gif) no-repeat; color: #666; display: block; font: normal 1.3em "Lucida Sans Unicode",serif; padding-left: 28px; } h1,h2,h3 { color: #06C; padding-top: 6px; } /* misc */ .clearer { clear: both; } /* structure */ .container { background: url(img/topleft.gif) no-repeat; } .header { height: 92px; } /* title */ .title { float: right; padding: 28px 0 0 76px; } .title h1 { color: #FFF; font: normal 2em Verdana,sans-serif; } /* navigation */ .navigation { float: right; height: 20px; margin-left: 24px; padding: 0 16px; } .navigation a { color: #FFF; float: right; font: bold 1.2em "Trebuchet MS",sans-serif; margin-top: 0px; padding: 8px 18px; text-align: center; text-decoration: none; } .navigation a:hover { background-color: #4A91C3; color: #FFF; } /* main */ .main { background: #FFFFF url(img/bgmain.gif) no-repeat; clear: both; padding: 12px 12px 0 52px; } /* main left */ .sidenav { float: right; width: 24%; } .sidenav h1 { border-bottom: 1px dashed #DDD; color: #E73; font-size: 1.2em; height: 20px; margin-top: 1.2em; } .sidenav ul { margin: 0; padding: 0; } .sidenav li { border-bottom: 1px dashed #EEE; list-style: none; margin: 0; } .sidenav li a { color: #777; display: block; font-size: 0.9em; padding: 3px 6px 3px 18px; text-decoration: none; } .sidenav li a:hover { color: #111; background: url(img/nav_li.gif) no-repeat; } /* content */ .content { float: left; margin-right: 4%; width: 67%; } .content .descr { color: #C60; margin-bottom: 6px; } .content li { list-style: url(img/li.gif); margin-left: 18px; } /* search form */ .styled { border: 3px double #E5E5E5; padding: 2px 3px; } .button { border: 1px solid #AAA; margin-left: 5px; padding: 2px 3px; } /* footer */ .footer { background: #0094D6 url(img/bgfooter.gif) repeat-x; color: #C1DEF0; font-size: 1.1em; line-height: 40px; text-align: center; } .footer a { color: #FFF; text-decoration: none; } .footer a:hover { color: #FFF; text-decoration: underline; }

Nadal jest źle. Teraz nawet w FF menu jest źle wyświetlane.
Sam próbowałem troche pozmieniach w kodzie od ciebie. Ale jakoś mi nie wyszło - nie potrafię.

U mnie wygląda to tak:
http://www.fotosik.p...0920ede6b5.html
Więc chyba jest ok. Sam już nie mogę z tymi przeglądarkami...

Mam prośbę do ciebie.
Ściągnij jeszcze raz tą strone z linka na pierwszym poście. Trochę zmieniłem. I teraz w FF powinno być wszystko ok, jednak w IE nadal nie tak.

Ustaw float content na left, float menu na right lub left i zmniejsz szerokość content. Ja już sam nie wiem kiedy ma być dobrze bo teraz w FF mam menu z lewej, a sam mówiłeś, że ma być z prawej...

:) ja też się już pogubiłem i nie wiem jak ma być. Ale tak czy inaczej wielkie dzięki za pomoc.

Sitedesign by AltusUmbrae.

Darmowy hosting zapewnia PRV.PL