ďťż

[HTML/CSS] Problem z DIV w Firefoxie i Operze DIVy się rozjeżdżają

       

Podstrony


telcocafe

Jest sobie oto taka strona: <?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"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head><title>Strona</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <link rel="stylesheet" href="style.css" /> </head> <body> <div id="glowna"> <div id="tytul">Strona domowa Marcina</div> <div id="menu">Strona główna O mnie Mój komputer Widok z okna</div> <div id="text">Wstecz Dalej Domowa Ulubione Jeste¶ teraz w dziale Strona główna.</div> <div id="tresc">Bardzo ciekawe rzeczy które s± zrobione przeze mnie.</div> <div id="stopka1">Data ostatniej modyfikacji: 24 lutego 2007 16:04:01.</div> </div> <div id="nfo"> <div id="top2">Pierdoły</div> <div id="kontakt">Kontakt z autorem</div> <div id="danekont">Numer GG:</div> <div id="bzdety">Inne bzdety</div> <div id="obrazki"> <a href="http://validator.w3.org/"><img src="valid-xhtml11-blue.png" alt="Valid XHTML 1.1" height="31" width="88" /></a><br /><br /> <a href="http://jigsaw.w3.org/css-validator"><img src="valid-css2-blue.png" alt="Valid CSS 2" height="31" width="88" /></a> </div> <div id="stopka2">Designed by yojo2</div> </div> </body> </html>Plik style.css: body { background: #3B4C5C; font-family: Tahoma; font-size: 11px; color: #3B4C5C; margin: 2px 2px 2px 2px; padding: 0; } img { border: 0; } #glowna { width: 619px; float: left; } #tytul { height: 26px; background: #3B4C5C url(top1.bmp) no-repeat; color: #DBD5C7; font-weight: bold; padding: 6px 0 0 24px; } #menu { height: 23px; background: #DBD5C7 url(menu.bmp) no-repeat; padding: 3px 0 0 14px; } #text { height: 26px; background: #DBD5C7 url(text.bmp) no-repeat; padding: 4px 0 0 0; text-align: center; } #tresc { background: #FFFFFF url(bg1.bmp) repeat-y; padding: 3px 9px 5px 9px; } #stopka1 { height: 26px; background: #DBD5C7 url(bot1.bmp) no-repeat; padding: 6px 0 0 0; text-align: center; } #nfo { width: 155px; float: left; padding: 0 0 0 5px } #top2 { height: 23px; background: #DBD5C7 url(top2.bmp) no-repeat; font-weight: bold; padding: 6px 0 0 24px; } #bzdety, #kontakt { height: 22px; font-weight: bold; text-align: center; padding: 3px 0 0 0; } #bzdety { background: #DBD5C7 url(kontakt.bmp) no-repeat; } #kontakt { background: #DBD5C7 url(kontakt.bmp) no-repeat; } #danekont { background: #DBD5C7 url(bg2.bmp) repeat-y; padding: 3px 9px 5px 9px; } #obrazki { background: #DBD5C7 url(bg2.bmp) repeat-y; padding: 3px 0 5px 0; text-align: center; } #stopka2 { height: 26px; background: #DBD5C7 url(bot2.bmp) no-repeat; padding: 6px 0 0 0; text-align: center; }Problem jest takiej natury, że w IE strona jest wyświetlana tak, jak według mojego zamysłu powinna wyglądać:
http://files.myopera...adstrona-IE.PNG

Natomiast w Firefoxie i Operze wyświetlana jest tak:
http://files.myopera...dstrona-FxO.PNG

Z bliżej niewiadomego mi powodu DIV'y rozjeżdzają sie. Ktoś potrafi mi powiedzieć, gdzie leży błąd?

Próbowałem wstawiać do CSSa *{margin:0;padding:0}, ale to nic nie pomagało.
Użytkownik yojo2 edytował ten post 07 luty 2008, 15:46


A więc tak. Było już o tym na forum napewno ale tak czy inaczej można to zrobić w ten sposób:

XHTML1.1 nie ma takiego atrybutu jak lang="pl". powinno być:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">

No a odnosnie css to proponował bym użyć dla #tytul, #menu, #text itd. padding: 0px; np:
#tytul { height: 26px; background: #3B4C5C url(top1.bmp) no-repeat; color: #DBD5C7; font-weight: bold; padding: 0px; }
utworzyć odpowiednie klasy dla marginesów np dla #tytul:
.klasa { padding: 6px 0px 0px 24px; }

i tą klasą obiąć tekst np:
<div id="tytul"><div class="klasa">Strona domowa Marcina</div></div>

lub zmieniać zawartość odstępów w biegu bez tworzenia klas np:
<div id="tytul"><div style="padding: 6px 0px 0px 24px">Strona domowa Marcina</div></div>
Użytkownik Mumas edytował ten post 07 luty 2008, 16:31
Stworzyłem odpowiednie klasy i problem jest rozwiązany. Wielkie dzięki za pomoc ;)
Temat można zamknąć.

  • zanotowane.pl
  • doc.pisz.pl
  • pdf.pisz.pl
  • nvm.keep.pl

  • Sitedesign by AltusUmbrae.