Layout w XHTML i problemy z przegl±darkami

Strona pocz±tkowa
 
JavaScript
 
Max dla RAM
 
Quick Time
 
phpBB skins

Podstrony

telcocafe

Czesc
Ostatnio postanowi³em nauczyæ siê XHTML, i jako¶ tam idzie. Z³o¿y³em ju¿ stronê, nawet g³adko posz³o, ale w³a¶nie mam taki problem, i¿ pod Oper± wszystko wygl±da b. dobrze, pod Firefoxem w menu pojawia siê scroll a w IE to wogóle wszystko siê rozlatuje :blink:
Tu kod:
(strona)
<!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=iso-8859-2" /> <title>[ aftersound.info ]</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="main_div">  <div id="upper_menu"><img src="images/img_01.jpg" alt="" width="302" height="70" /><img src="images/img_02.jpg" alt="" width="97" height="70" /><img src="images/img_03.jpg" alt="" width="124" height="70" /><img src="images/img_04.jpg" alt="" width="127" height="70" /></div>  <div id="logo"><img src="images/img_05.jpg" alt="" width="399" height="77" /></div>  <div id="navigator">    <div id="nav_up"><img src="images/img_06.jpg" alt="" width="251" height="34" /></div>    <div id="nav_back"><img src="tytul.jpg" alt="" width="220" height="200" /></div>  </div>  <div id="forum">    <div id="forum_up"><img src="images/img_08.jpg" alt="" width="399" height="26" /></div>    <div id="forum_left"><img src="images/img_09.jpg" alt="" width="17" height="149" /></div>    <div id="forum_bg">      <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit </a></p>      <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit </a></p>      <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit </a></p>      <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit</a></p>      <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit</a></p>      <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit</a></p>      <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit</a></p>    </div>  </div>  <div id="left"><img src="images/img_11.jpg" alt="" width="11" height="478" /></div>  <div id="menu">    <div id="menu_up"><img src="images/img_12.jpg" alt="" width="205" height="41" /></div>    <div id="menu_main">      <p class="strzalka_imp">Strona</p>      <p class="strzalka"><a href="#">Wiadomo¶ci</a></p>      <p class="strzalka"><a href="#">Ekipa</a></p>      <p class="strzalka"><a href="#">Historia strony</a></p>      <p class="strzalka"><a href="#">Ciekawe odno¶niki</a></p>      <p>&nbsp;</p>      <p>&nbsp;</p>      <p class="strzalka_imp">Zespo³y</p>      <p class="strzalka"><a href="#">A Perfect Circle</a></p>      <p class="strzalka"><a href="#">At The Drive-In</a></p>      <p class="strzalka"><a href="#">Bjork</a></p>      <p class="strzalka"><a href="#">Cire</a></p>      <p class="strzalka"><a href="#">Coldplay</a></p>      <p class="strzalka"><a href="#">Dredg</a></p>      <p class="strzalka"><a href="#">Day One Symphony</a></p>      <p class="strzalka"><a href="#">Feeder</a></p>      <p class="strzalka"><a href="#">Lenny Valentino</a></p>      <p class="strzalka"><a href="#">Marilyn Manson</a></p>      <p class="strzalka"><a href="#">Mars Volta, The</a></p>      <p class="strzalka"><a href="#">Mass Hysteria</a></p>      <p class="strzalka"><a href="#">Mayan Factor, The</a></p>      <p class="strzalka"><a href="#">Mindless Self Indulgence</a></p>      <p class="strzalka"><a href="#">Muse</a></p>      <p class="strzalka"><a href="#">Myslovitz</a></p>      <p class="strzalka"><a href="#">Nine Inch Nails</a></p>      <p class="strzalka"><a href="#">Orgy</a></p>      <p class="strzalka"><a href="#">Placebo</a></p>      <p class="strzalka"><a href="#">Radiohead</a></p>      <p class="strzalka"><a href="#">Team Sleep</a></p>      <p class="strzalka"><a href="#">Tool </a></p>      <p>&nbsp;</p>      <p>&nbsp;</p>      <p class="strzalka_imp">Interakcja</p>      <p class="strzalka"><a href="#">Forum</a></p>      <p class="strzalka"><a href="#">Ksiêga Go¶ci</a></p>      <p>&nbsp;</p>      <p>&nbsp;</p>      <p class="strzalka_imp">Multimedia</p>      <p class="strzalka">Galerie</p>      <p class="strzalka">Audio</p>      <p class="strzalka">Wideo</p>      <p class="strzalka">Inne</p>      <p>&nbsp;</p>      <p>&nbsp;</p>      <p class="strzalka_imp">Wspólpracujemy z...</p>      <p class="link_button"><a href="http://dredg.fan.pl/" onclick="target='_blank';"><img src="http://www.dredg.inside.net.pl/pics/bannery/button.gif" alt="" width="88" height="31" border="0" class="button_img" longdesc="http://dredg.fan.pl" /></a></p>      <p class="link_button"><a href="http://dredg.fan.pl/" onclick="target='_blank';"><img src="http://www.dredg.inside.net.pl/pics/bannery/button.gif" alt="dredg" width="88" height="31" border="0" class="button_img" longdesc="http://dredg.fan.pl" /></a></p>      <p class="link_button"><a href="http://dredg.fan.pl/" onclick="target='_blank';"><img src="http://www.dredg.inside.net.pl/pics/bannery/button.gif" alt="" width="88" height="31" border="0" class="button_img" longdesc="http://dredg.fan.pl" /></a></p>    </div>  </div>  <div id="odstep"><img src="images/img_13.jpg" alt="" width="20" height="478" /></div>  <div id="content">    <div id="content_up"><img src="images/img_14.jpg" alt="" width="410" height="41" /></div>    <div id="content_main">      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc id felis at elit aliquam ullamcorper. Phasellus arcu tellus, varius ac, bibendum id, rutrum id, sem. Mauris pretium mollis nisi. Cras ut eros. Ut sed mauris vitae risus euismod bibendum. Nulla facilisi. In malesuada ullamcorper tellus. Vivamus sed pede. Vestibulum elementum urna quis sapien. Quisque egestas, massa vehicula tempor mollis, metus nisl eleifend velit, eget laoreet leo tellus nec lacus. Pellentesque eu metus sed metus placerat nonummy. Praesent mollis, purus vitae dapibus ornare, velit libero eleifend erat, quis egestas leo purus vitae est. </p>      <p>Sed lobortis, massa non interdum ornare, quam orci venenatis augue, scelerisque porttitor metus libero vel augue. Aenean non enim non libero mollis hendrerit. Suspendisse potenti. Maecenas elementum, tellus ut tincidunt ultricies, ipsum urna vulputate leo, id tristique leo quam id justo. Nunc et eros sed neque laoreet varius. Nulla in nunc ut pede nonummy imperdiet. Suspendisse quis quam. Nulla in dui vitae felis viverra laoreet. In hac habitasse platea dictumst. Aliquam ligula turpis, eleifend eu, sodales sed, semper sed, purus. Phasellus egestas egestas erat. </p>      <p>Nulla blandit. Duis ut augue. Fusce pharetra. Sed orci. Nulla nisl. Morbi sapien. In at pede. Maecenas sit amet tortor vel justo adipiscing eleifend. Nunc nec orci. Nullam arcu. Vivamus elementum magna sed nulla. Cras quis neque. Sed vestibulum, risus non convallis rhoncus, velit justo porttitor dolor, iaculis porttitor enim erat a risus. Proin justo. In at enim. Sed enim risus, sagittis id, pellentesque at, auctor et, eros. Morbi pharetra lacus a pede. Curabitur lobortis ipsum nec augue. Duis accumsan. </p>      <p>Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed et justo non lectus commodo tempor. Vestibulum quis nulla pretium diam elementum laoreet. Morbi ullamcorper, nibh vitae interdum congue, sem nisi semper elit, ac bibendum ligula odio ac nulla. Morbi auctor, lorem vel sodales tristique, pede lacus luctus ipsum, in hendrerit tellus tellus ut arcu. Maecenas cursus cursus nulla. Ut tincidunt, tellus cursus tempor varius, sapien tellus sodales augue, in interdum nisl leo quis neque. Maecenas libero ligula, viverra et, vehicula quis, lacinia sed, urna. Vivamus arcu. Nam pharetra. Nullam in lectus. Quisque ac diam. Sed dolor felis, dapibus vitae, gravida sed, venenatis ut, tellus. Nunc elementum nonummy lectus. Nulla facilisi. Pellentesque semper purus pellentesque risus. Cras venenatis leo quis urna. Quisque quam sem, euismod nec, pretium vitae, rhoncus nec, felis. Phasellus ullamcorper posuere quam. </p>      <p>Aliquam eu leo. Mauris arcu justo, interdum sed, laoreet nec, laoreet sed, turpis. Praesent ipsum mi, rhoncus at, placerat et, gravida at, purus. Maecenas aliquet ligula tincidunt leo. Nullam a quam. In placerat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed venenatis, neque ac posuere auctor, nisi risus facilisis augue, eu ornare ligula lectus ac ipsum. In aliquet dictum dui. Suspendisse non eros. Maecenas iaculis mauris sed tellus. In eros arcu, vehicula non, luctus a, accumsan vel, nibh. Vivamus quam.</p>    </div>  </div>  <div id="righ"><img src="images/img_15.jpg" alt="" /></div>  <div id="footer">[ w3c buttons ]</div> </div> </body> </html>

(css)
body { margin: 0px; padding: 0px; background-image: url(images/bg.gif); } #content_up { height: 41px; width: 401px; margin: 0px; padding: 0px; } #content_main { width: 400px; padding-right: 5px; padding-left: 5px; text-align: justify; vertical-align: top; margin: 0px; padding-top: 0px; padding-bottom: 0px; } #main_div { margin: auto; width: 650px; overflow: auto; border-right-width: 15px; border-left-width: 15px; border-right-style: solid; border-left-style: solid; border-right-color: #3F3D36; border-left-color: #3F3D36; background-color: #000; padding: 0px; } #left { width: 11px; float: left; margin: 0px; padding: 0px; } #menu { float: left; width: 205px; background-image: url(images/img_18.jpg); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #4C483F; overflow: auto; height: auto; z-index: auto; margin: 0px; padding: 0px; } #menu_main { background-image: url(images/img_16.jpg); background-repeat: no-repeat; overflow: auto; z-index: auto; visibility: visible; height: auto; margin: 0px; padding: 0px; } #menu_up { height: 41px; width: 205px; float: none; margin: 0px; padding: 0px; } #odstep { float: left; width: 20px; } #content { float: left; width: 410px; margin: 0px; overflow: auto; background-image: url(images/img_19.jpg); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #4C483F; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; } #righ { float: right; width: 4px; } #forum_left { float: left; width: 17px; height: 149px; } #forum_bg { background-image: url(images/img_10.jpg); float: right; height: 149px; width: 382px; } #logo { float: left; height: 77px; width: 399px; } #navigator { float: right; width: 251px; height: 252px; } #nav_up { height: 34px; width: 251px; clear: none; float: none; } #nav_back { background-image: url(images/img_07.jpg); height: 218px; width: 251px; text-align: center; vertical-align: middle; } #forum { float: left; height: 175px; width: 399px; } #forum_up { height: 26px; } #upper_menu { width: 650px; height: 70px; } .strzalka_imp { margin-top: 2px; padding-top: 2px; background-image: url(images/arrow.gif); background-repeat: no-repeat; background-position: 10px 4px; text-indent: 22px; font-weight: bolder; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #5C5B52; margin-bottom: 2px; padding-bottom: 2px; width: 95%; border-top-width: 1px; border-top-style: dotted; border-top-color: #5C5B52; font-variant: normal; text-transform: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; cursor: default; } #footer { height: 50px; width: 650px; clear: both; float: none; vertical-align: middle; text-align: center; margin-top: 15px; padding-top: 15px; } img { border: 0px; } .link_button { background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #5C5B52; width: 95%; text-align: center; } .button_img { margin-top: 5px; margin-bottom: 5px; padding-top: 5px; padding-bottom: 5px; border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-style: none; border-bottom-style: none; border-left-style: none; border-color: #5C5B52; } .screen_wideografia { margin: 5px; padding: 5px; } .punkt { background-image: url(images/arrow.gif); background-repeat: no-repeat; background-position: 2px 2px; text-indent: 14px; margin-bottom: 2px; padding-bottom: 2px; width: 95%; } td, div { vertical-align: top; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #787669; } .strzalka { margin-top: 1px; padding-top: 1px; background-image: url(images/arrow.gif); background-repeat: no-repeat; background-position: 2px 3px; text-indent: 14px; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #5C5B52; margin-bottom: 2px; padding-bottom: 2px; width: 95%; } a { color: #827260; text-decoration: none; } p { margin: 0px; padding: 0px; }
i screeny:
Opera
Firefox Fixed
Internet Explorer

EDIT: Poradzi³em sobie z problemem z FF :) Tylko IE zosta³o...
Dziêki za jak±kolwiek pomoc :)

EDIT2:
Dziêki za codeboxy:)
Kolega sugerowa³ tabelki... Nie chce ich u¿ywaæ. To przestarza³a metoda. Dla mnie budowanie na div'ach jest wygodniejsze itp. ale niestety powoduje problemy z IE. Co ciekawe, inna strona na diviciakach idzie dobrze pod wszystkim...
U¿ytkownik spit edytowa³ ten post 27 listopad 2005, 19:16

{OT} daj linke do dzia³aj±cej strony - pro¶ciej siê analizuje i szybciej znajdzie siê b³êdy

Nie umieszcza³em strony na ¿adnym serwerze, ale przedwczoraj jeszcze raz usiad³em, po kolei z³o¿y³em ca³o¶c i gra gitara :D Dzia³a pod ka¿d± przegl±dar±.

  • zanotowane.pl
  • doc.pisz.pl
  • pdf.pisz.pl
  • nvm.keep.pl
    		•
    Sitedesign by AltusUmbrae.