hier die domain: neu.marchl.at
hallo,
ich habe ein problem mit einer website an der ich gearde arbeite. hab eine testseite auf den server gestellt und bin daraufgekommen, dass sie nur im safari nicht richtig angezeigt wird. bzw wird sie gar nicht angezeigt. er ließt zwar den title, aber sonst ist nur weiß zu sehen. hier der code der seite:
würde mich um hilfe und ratschläge sehr freuen!HTML-Code:<html> <head> <title>MARCHL - Wohndesign in seiner schönsten Form</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <!-- Save for Web Styles (Design.psd) --> <style type="text/css"> <!-- /* @font-face { font-family:'titillium'; src:url('fonts/TitilliumMaps26L004.otf'); format:('opentype'); src:url('fonts/Thaitillium.ttf'); format:('truetype'); }*/ h1 { font-family:titillium, arial, helvetica, sans-serif; font-size:14px; color:#CCC; font-weight:100; } h2 { font-family:titillium, arial, helvetica, sans-serif; font-size:16px; color:#FFF; font-weight:bolder; line-height:normal; } #container { position:relative; margin:auto; width:999px; height:643px; } #logo { position:absolute; left:0px; top:0px; width:332px; height:169px; } #Slice-02 { position:absolute; background-image:url(bilder/Slice_02.png); left:332px; top:0px; width:667px; height:126px; } #Slice-03 { position:absolute; left:332px; top:126px; width:95px; height:19px; } #Slice-04 { position:absolute; left:427px; top:126px; width:81px; height:19px; } #Slice-05 { position:absolute; left:508px; top:126px; width:77px; height:19px; } #Slice-06 { position:absolute; left:585px; top:126px; width:68px; height:19px; } #Slice-07 { position:absolute; left:653px; top:126px; width:141px; height:19px; } #Slice-08 { position:absolute; left:794px; top:126px; width:168px; height:19px; } #Slice-09 { position:absolute; background-image:url(bilder/Slice_09.png); left:962px; top:126px; width:37px; height:19px; } #Slice-10 { position:absolute; background-image:url(bilder/Slice_10.jpg); left:332px; top:145px; width:667px; height:24px; } #Slice-11 { position:absolute; background-image:url(bilder/Slice_11.png); left:0px; top:169px; width:39px; height:392px; } #Slice-12 { position:absolute; background-image:url(bilder/content_bg.png); background-repeat:repeat-x; left:39px; top:169px; width:923px; height:392px; } #Slice-13 { position:absolute; background-image:url(bilder/Slice_13.png); left:962px; top:169px; width:37px; height:392px; } #Slice-14 { position:absolute; left:0px; top:561px; width:999px; height:82px; } .menu {font-family:Arial, Helvetica, sans-serif; width:95px; height:19px; position:relative; font-size:11px; color:#999; margin:0px; padding-top:0px;} .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; width:95px; height:19px; text-align:left; color:#999; padding-left:10px; border:1px solid #930132; border-width:0px 0px 0px 3px; background-image:url(bilder/Slice_03.jpg); line-height:13px; font-size:11px;} .menu ul {display:block; padding:0px; margin:0px;list-style-type: none; } .menu ul li {float:left; position:relative;} .menu ul li ul {visibility:hidden; position:absolute;} .menu ul li:hover ul, .menu ul li a:hover ul {visibility:visible; bottom:19px; left:0; padding-top:10px;} .menu ul li:hover ul li a, .menu ul li a:hover ul li a {display:block; background:none; color:#666; width:100%; padding-left:5px;} /* mouseover menüpunkte */ .menu ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover {background:none; color:#FFF;} /* mouseover untermenüpunkte */ /*-------------------------------------------------------------*/ .menu2 {font-family:Arial, Helvetica, sans-serif; width:78px; height:19px; position:relative; font-size:11px; color:#999; margin:0px; padding-top:0px;} .menu2 ul li a, .menu2 ul li a:visited {display:block; text-decoration:none; width:78px; height:19px; text-align:left; color:#999; padding-left:10px; border:1px solid #333; border-width:0px 0px 0px 3px; background-image:url(bilder/Slice_04.jpg); line-height:13px; font-size:11px;} .menu2 ul {display:block; padding:0px; margin:0px;list-style-type: none; } .menu2 ul li {float:left; position:relative;} .menu2 ul li ul {visibility:hidden; position:absolute;} .menu2 ul li:hover ul, .menu2 ul li a:hover ul {visibility:visible; bottom:19px; left:0; padding-top:10px;} .menu2 ul li:hover ul li a, .menu2 ul li a:hover ul li a {display:block; background:none; color:#666; width:100%; padding-left:5px;} /* mouseover menüpunkte */ .menu2 ul li:hover ul li a:hover, .menu2 ul li a:hover ul li a:hover {background:none; color:#FFF;} /* mouseover untermenüpunkte */ /*-------------------------------------------------------------*/ .menu3 {font-family:Arial, Helvetica, sans-serif; width:74px; height:19px; position:relative; font-size:11px; color:#999; margin:0px; padding-top:0px;} .menu3 ul li a, .menu3 ul li a:visited {display:block; text-decoration:none; width:74px; height:19px; text-align:left; color:#999; padding-left:10px; border:1px solid #333; border-width:0px 0px 0px 3px; background-image:url(bilder/Slice_05.jpg); line-height:13px; font-size:11px;} .menu3 ul {display:block; padding:0px; margin:0px;list-style-type: none; } .menu3 ul li {float:left; position:relative;} .menu3 ul li ul {visibility:hidden; position:absolute;} .menu3 ul li:hover ul, .menu3 ul li a:hover ul {visibility:visible; bottom:19px; left:0; padding-top:10px;} .menu3 ul li:hover ul li a, .menu3 ul li a:hover ul li a {display:block; background:none; color:#666; width:100%; padding-left:5px;} /* mouseover menüpunkte */ .menu3 ul li:hover ul li a:hover, .menu3 ul li a:hover ul li a:hover {background:none; color:#FFF;} /* mouseover untermenüpunkte */ /*-------------------------------------------------------------*/ .menu4 {font-family:Arial, Helvetica, sans-serif; width:65px; height:19px; position:relative; font-size:11px; color:#999; margin:0px; padding-top:0px;} .menu4 ul li a, .menu4 ul li a:visited {display:block; text-decoration:none; width:65px; height:19px; text-align:left; color:#999; padding-left:10px; border:1px solid #333; border-width:0px 0px 0px 3px; background-image:url(bilder/Slice_06.jpg); line-height:13px; font-size:11px;} .menu4 ul {display:block; padding:0px; margin:0px;list-style-type: none; } .menu4 ul li {float:left; position:relative;} .menu4 ul li ul {visibility:hidden; position:absolute;} .menu4 ul li:hover ul, .menu4 ul li a:hover ul {visibility:visible; bottom:19px; left:0; padding-top:10px;} .menu4 ul li:hover ul li a, .menu4 ul li a:hover ul li a {display:block; background:none; color:#666; width:100%; padding-left:5px;} /* mouseover menüpunkte */ .menu4 ul li:hover ul li a:hover, .menu4 ul li a:hover ul li a:hover {background:none; color:#FFF;} /* mouseover untermenüpunkte */ /*-------------------------------------------------------------*/ .menu5 {font-family:Arial, Helvetica, sans-serif; width:138px; height:19px; position:relative; font-size:11px; color:#999; margin:0px; padding-top:0px;} .menu5 ul li a, .menu5 ul li a:visited {display:block; text-decoration:none; width:138px; height:19px; text-align:left; color:#999; padding-left:10px; border:1px solid #333; border-width:0px 0px 0px 3px; background-image:url(bilder/Slice_07.jpg); line-height:13px; font-size:11px;} .menu5 ul {display:block; padding:0px; margin:0px;list-style-type: none; } .menu5 ul li {float:left; position:relative;} .menu5 ul li ul {visibility:hidden; position:absolute;} .menu5 ul li:hover ul, .menu5 ul li a:hover ul {visibility:visible; bottom:19px; left:0; padding-top:10px;} .menu5 ul li:hover ul li a, .menu5 ul li a:hover ul li a {display:block; background:none; color:#666; width:100%; padding-left:5px;} /* mouseover menüpunkte */ .menu5 ul li:hover ul li a:hover, .menu5 ul li a:hover ul li a:hover {background:none; color:#FFF;} /* mouseover untermenüpunkte */ /*-------------------------------------------------------------*/ .menu6 {font-family:Arial, Helvetica, sans-serif; width:165px; height:19px; position:relative; font-size:11px; color:#999; margin:0px; padding-top:0px;} .menu6 ul li a, .menu6 ul li a:visited {display:block; text-decoration:none; width:165px; height:19px; text-align:left; color:#999; padding-left:10px; border:1px solid #333; border-width:0px 0px 0px 3px; background-image:url(bilder/Slice_08.jpg); line-height:13px; font-size:11px;} .menu6 ul {display:block; padding:0px; margin:0px;list-style-type: none; } .menu6 ul li {float:left; position:relative;} .menu6 ul li ul {visibility:hidden; position:absolute;} .menu6 ul li:hover ul, .menu6 ul li a:hover ul {visibility:visible; bottom:19px; left:0; padding-top:10px;} .menu6 ul li:hover ul li a, .menu6 ul li a:hover ul li a {display:block; background:none; color:#666; width:100%; padding-left:5px;} /* mouseover menüpunkte */ .menu6 ul li:hover ul li a:hover, .menu6 ul li a:hover ul li a:hover {background:none; color:#FFF;} /* mouseover untermenüpunkte */ #textbox { position:absolute; top:30px; left:15px; width:365px; height:340px; text-align:left; background:none; overflow:hidden; } #large_img { position:absolute; top:20px; left:391px; width:510px; height:350px; overflow:hidden; padding-left:10px; text-align:left; } #small_img { margin-top:10px; float:left; height:50px; width:74px; overflow:hidden; margin-right:8px; border-right: 3px solid; border-color:none; } #small_img:hover { border-color:#900; } body { background-image:url(bilder/Design_bg.png); background-repeat:repeat-x; background-color: #000; } </style> <!-- End Save for Web Styles --> </head> <body style="text-align:center; background-image:url(bilder/Design_bg.png); background-color:#000; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;"> <!-- Save for Web Slices (Design.psd) --> <div id="container"> <div id="logo"> <img src="bilder/Slice_01.png" alt="" width="332" height="169" border="0" usemap="#Map"> <map name="Map"> <area shape="rect" coords="39,0,214,145" href="index.html"> </map> </div> <div id="Slice-02"> </div> <div id="Slice-03"> <div class="menu"> <ul> <li><a href="index.html"> </a> <ul> <li><a href="../menu/zero_dollars.html">Zero dollars</a></li><br> <li><a href="../menu/embed.html">Wrapping text</a></li><br> <li><a href="../menu/form.html">Styled form</a></li> </ul> </li> </ul> </div> </div> <div id="Slice-04"> <div class="menu2"> <ul> <li><a href="../menu/index.html"> </a> <ul> <li><a href="../menu/zero_dollars.html">Zero dollars</a></li><br> <li><a href="../menu/embed.html">Wrapping text</a></li><br> <li><a href="../menu/form.html">Styled form</a></li> </ul> </li> </ul> </div> </div> <div id="Slice-05"> <div class="menu3"> <ul> <li><a href="../menu/index.html"> </a> <ul> <li><a href="../menu/zero_dollars.html">Zero dollars</a></li><br> <li><a href="../menu/embed.html">Wrapping text</a></li><br> <li><a href="../menu/form.html">Styled form</a></li> </ul> </li> </ul> </div> </div> <div id="Slice-06"> <div class="menu4"> <ul> <li><a href="../menu/index.html"> </a> <ul> <li><a href="../menu/zero_dollars.html">Zero dollars</a></li><br> <li><a href="../menu/embed.html">Wrapping text</a></li><br> <li><a href="../menu/form.html">Styled form</a></li> </ul> </li> </ul> </div> </div> <div id="Slice-07"> <div class="menu5"> <ul> <li><a href="../menu/index.html"> </a> <ul> <li><a href="../menu/zero_dollars.html">Zero dollars</a></li><br> <li><a href="../menu/embed.html">Wrapping text</a></li><br> <li><a href="../menu/form.html">Styled form</a></li> </ul> </li> </ul> </div> </div> <div id="Slice-08"> <div class="menu6"> <ul> <li><a href="../menu/index.html"> </a> <ul> <li><a href="../menu/zero_dollars.html">Zero dollars</a></li><br> <li><a href="../menu/embed.html">Wrapping text</a></li><br> <li><a href="../menu/form.html">Styled form</a></li> </ul> </li> </ul> </div> </div> <div id="Slice-09"> </div> <div id="Slice-10"> </div> <div id="Slice-11"></div> <div id="Slice-12"> <div id="textbox"> <h2>Philosophie</h2> <h1> Die Symbiose aus gekonnter Planung, ausgesuchten, vorgefertigten Materialeien in Verbindung mit handwerklicher Perfektion.<br><br> Meist beginnt das schon beim Bauen - z.B. welche Fenster, welche Türen, welche Böden oder Decken, und, und, und...<br><br> Um Wohnen für Sie schöner zu machen, steht Ihnen ein Team von Fachleuten zur Verfügung, das Ihnen mit Rat und Tips zur Seite steht. </h1> </div> <div id="large_img"> <img src="bilder/Pictures/philosophie_1.jpg" width="499" height="290" title="philosophie_large"> <div id="small_img"> <img src="bilder/Pictures/philosophie_1.jpg" height="50" width="87"> </div> <div id="small_img"> <img src="bilder/Pictures/philosophie_2.jpg" height="50" width="87"> </div> <div id="small_img"> <img src="bilder/Pictures/philosophie_3.jpg" height="50" width="87"> </div> <div id="small_img"> <img src="bilder/Pictures/philosophie_4.jpg" height="50" width="87"> </div> <div id="small_img"> <img src="bilder/Pictures/philosophie_5.jpg" height="50" width="87"> </div> <div id="small_img"> <img src="bilder/Pictures/philosophie_6.jpg" height="50" width="87"> </div> </div> </div> <div id="Slice-13"> </div> <div id="Slice-14"> <img src="bilder/Slice_14.png" width="999" height="82" alt=""> </div> </div> <!-- End Save for Web Slices --> </body> </html>
lg![]()
hier die domain: neu.marchl.at
Deiner Seite fehlt das wichtigste überhaupt: ein Doctype. Füg den ein und pass dann ggf. deinen Quellcode an die damit verbundenen Regeln an. Dabei hilft auch der Validator: http://validator.w3.org/check?verbos...u.marchl.at%2F
Weiterhin: verzichte auf absolute Positionierung. Sowas geht in der Form wie Du es umgesetzt hast immer nach hinten los. Bei mir verschiebt sich z.B. die Ansicht im FF sobald ich das Fenster mal kleiner mache. Sobald Du o.g. Quellcode einfügst wird die Seite höchstwahrscheinlich auch in jedem Browser anders dargestellt werden.
Mein Tipp: neu machen.
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)