nicht angemeldet
warum zerschießt mir NN 6.x das design?
moinmoin
ich bastel immo an einer schönen kleinen seite mit folgender source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>VBMZ Online Office</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function showMsg(text) {
document.picform.message.value = text;
}
// End -->
</script>
<style>
div.one { padding: 0px; margin: 0px; position: absolute; top: 0px; left: 0px; height: 57px; width: 750px; z-index: 10; background: #ffffff;}
div.two { padding: 0px; margin: 0px; position: absolute; top: 57px; left: 0px; height: 21px; width: 750px; z-index: 10; background: #8ab8f5;}
div.three { padding: 0px; margin: 0px; position: absolute; top: 78px; left: 0px; height: 18px; width: 300px; z-index: 10;}
div.four { padding: 5px; margin: 0px; position: absolute; top:96px; left: 0px; height: 350px; width: 150px; z-index: 10; background: #dddddd; border-right: solid 1px #003366; direction: rtl; overflow: auto; scrollbar-base-color: #dddddd; scrollbar-3dlight-color: #dddddd; scrollbar-darkshadow-color: #dddddd; scrollbar-arrow-color: #003366; scrollbar-face-color: #dddddd; scrollbar-highlight-color: #003366; scrollbar-shadow-color: #003366; scrollbar-track-color: #dddddd;}
div.five { padding: 0px; margin: 0px; position: absolute; top: 426px; left: 150px; height: 20px; width: 600px; z-index: 10; background: #8ab8f5; padding-left: 20px;}
div.six { padding: 5px; margin: 0px; position: absolute; top: 78px; left: 150px; height: 348px; width: 600px; z-index: 0; border-right: solid 1px #8ab8f5; overflow: auto; scrollbar-base-color: #8ab8f5; scrollbar-3dlight-color: #8ab8f5; scrollbar-darkshadow-color: #8ab8f5; scrollbar-arrow-color: #003366; scrollbar-face-color: #8ab8f5; scrollbar-highlight-color: #003366; scrollbar-shadow-color: #003366; scrollbar-track-color: #8ab8f5;}
body { padding: 0px; margin: 0px;}
form { padding: 0px; margin: 0px; border: 0px; font-family: arial,helvetica,sans-serif; font-size: 10px;}
form.nachrichten { padding: 0px; margin: 0px; border: 0px;}
input.message { padding: 0px; margin: 0px; border: 0px; width: 550px; background: #8ab8f5; font-family: arial,helvetica,sans-serif; font-size: 10px;}
input.zahl { padding: 0px; margin: 0px; border: 0px; width: 30px; background: #ffffff; font-family: arial,helvetica,sans-serif; font-size: 10px;}
input.nachricht { padding: 0px; margin: 0px; border: 0px; width: 100px; background: #ffffff; font-family: arial,helvetica,sans-serif; font-size: 10px;}
button { padding: 0px; margin: 0px; width: 60px; height: 40px; background: #dddddd;}
img { padding: 0px; margin: 0px; border: 0px;}
div.nachrichten { padding: 0px; margin: 0px; padding-left: 8px; position: absolute; right: 10px; top: 10 px; width: 150px;}
div.chat { padding: 0px; margin: 0px; padding-left: 8px; position: absolute; right: 10px; bottom: 10px; width: 150px;}
div.termine { padding: 0px; margin: 0px; padding-left: 8px; position: absolute; left:: 10px; top: 25 px; width: 400px;}
div.ueberschrift { padding: 0px; margin: 0px; padding-left: 8px; position: absolute; right: 10px; top: 2px; width: 150px; font-family: arial,helvetica,sans-serif; font-size: 15px; font-weight: bold; color: #003366;}
table.nachrichten { font-family: arial,helvetica,sans-serif; font-size: 11px;}
legend { font-family: arial,helvetica,sans-serif; font-size: 11px; text-decoration: none; color: #000000;}
fieldset { border: solid 1px #003366;}
ul { padding-top: 5px; padding-bottom: 5px; padding-right: 30px; padding-left: 30px; margin: 0px; border: 0px;}
</style>
</head>
<body>
<div name="one" class="one"><img src="img/top_graphic.jpg" width=633 height=57 alt=""></div>
<div name="two" class="two"><div name="ueberschrift" class="ueberschrift" align=right>VBMZ Online Office</div></div>
<div name="three" class="three"><img src="img/1x1.gif" width=250 height=18 alt="" border="0"><img src="img/template3_07.gif" width=34 height=18 alt="" border="0"></div>
<!--- Navigation Anfang --->
<div name="four" class="four">
<form action="dummie.html">
<br>
<p align="center"><button type="button" value="Übersicht" onClick="self.location.href='dummie.html'" onFocus="if(document.all) this.blur()"><img src="img/icon_notizen.gif" width=45 height=33 alt="" border=0 onmouseover="showMsg('Hier gelangen Sie zur Übersichtsseite');" onmouseout="showMsg('');"></button></p>
<p align="center"><button type="button" value="Nachrichten" onClick="self.location.href='dummie.html'" onFocus="if(document.all) this.blur()"><img src="img/icon_nachrichten.gif" width=46 height=32 alt="" border=0 onmouseover="showMsg('Hier gelangen Sie zur Nachrichtenseite');" onmouseout="showMsg('');"></button></p>
<p align="center"><button type="button" value="Kalender" onClick="self.location.href='dummie.html'" onFocus="if(document.all) this.blur()"><img src="img/icon_kalender.gif" width=45 height=31 alt="Kalender" titel="Hier gelangen Sie zur Kalenderseite" border=0 onmouseover="showMsg('Hier gelangen Sie zur Kalenderseite');" onmouseout="showMsg('');"></button></p>
<p align="center"><button type="button" value="Chat" onClick="self.location.href='dummie.html'" onFocus="if(document.all) this.blur()"><img src="img/1x1.gif" width=30 height=30 alt="" border="0" onmouseover="showMsg('Hier gelangen Sie zur Chatseite');" onmouseout="showMsg('');"></button></p>
</form>
</div>
<!--- Navigation Ende --->
<!--- Nachrichtenzeile Anfang --->
<div name="five" class="five">
<form name="picform">
<input class="message" type="text" name="message" value="">
<input type="hidden" name="go" value="">
</form>
</div>
<!--- Nachrichtenzeile Ende --->
<!--- Content Anfang --->
<div name="six" class="six">
<div name="Nachrichten" class="nachrichten">
<form>
<fieldset><legend> Nachrichten </legend>
<input class="zahl" type="text" name="neu" value="1234"><input class="nachricht" type="text" name="nachrichten1" value="Neue Nachrichten"><br>
<input class="zahl" type="text" name="neu" value="1234"><input class="nachricht" type="text" name="nachrichten1" value="Nachrichten gesamt">
</fieldset>
</form>
</div>
<div name="termine" class="termine">
<form>
<fieldset><legend> Termine </legend>
<ul>
<li>22-05-2002 | 16:23 Uhr | Termin 1
<li>23-05-2002 | 16:23 Uhr | Termin 2
<li>24-05-2002 | 16:23 Uhr | Termin 3
<li>25-05-2002 | 16:23 Uhr | Termin 4
<li>26-05-2002 | 16:23 Uhr | Termin 5
<li>27-05-2002 | 16:23 Uhr | Termin 6
<li>28-05-2002 | 16:23 Uhr | Termin 7
<li>29-05-2002 | 16:23 Uhr | Termin 8
<li>30-05-2002 | 16:23 Uhr | Termin 9
<li>31-05-2002 | 16:23 Uhr | Termin 10
</ul>
</fieldset>
</form>
</div>
<div name="Chat" class="Chat">
<form>
<fieldset><legend> Chat </legend>
<input class="zahl" type="text" name="neu" value="1234"><input class="nachricht" type="text" name="nachrichten1" value="User im Chat">
</fieldset>
</form>
</div>
</div>
<!--- Content Ende --->
</body>
</html>
von meinem verständniss her müßte das ganze im ie 5.x und nn 6.x identisch aussehen...tut es aber nicht :(.
kann mir jemand nen anhaltspunkt geben warum?
alles liebe und noch eine schönen montag morgen
ole
(8-)>
ps: vieleicht liegts einfach am montag das ich den fehler nicht finde *seuftz*
-
Hallo,
IMHO scheinen da ein paar kleine Fehlerchen versteckt sein.
Erstmal ist das Script falsch:
if(document.all||document.layers){
document.picform.message.value=text;}else{
document.getElementById("message").value=text;}Dann besorge Dir mal den HTMLTidy von W3C.org.
In den CSS sind die scrollbar-Definitionen falsch, der NS6 bricht hier ab. Am besten Du klammerst Sie zum test mal aus mit }/* scrollbars...}*/ auf die Klammer aufpassen.
if document.all{
document.write("<style type=text/css>div.four{scrollbar-base-color:#336699...</style>");}
im script wäre die bessere Lösung.untergeordnete DIVs in SPAN umwandeln und relativ positionieren.
Ich melde mich heute mittag nochmal ;-)
-
hi
In den CSS sind die scrollbar-Definitionen falsch, der NS6 bricht hier ab. Am besten Du klammerst Sie zum test mal aus mit }/* scrollbars...}*/ auf die Klammer aufpassen.
if document.all{
document.write("<style type=text/css>div.four{scrollbar-base-color:#336699...</style>");}
im script wäre die bessere Lösung.Käse. Solange die Dinger syntaktisch korrekt sind (und das sind sie), werden die von anderen Browsern einfach überlesen. Das Problem wird sein, dass der MSIE5 schlichtweg 'nen padding oder border von der width eines elementes abzieht (warum auch immer..).
Ole, versuch das mal in Opera - da sollte es mehr oder weniger so aussehen, wie in Mozilla/Netscape 6 ;)Grüße aus Lüneburg
Kai
-
hi
In den CSS sind die scrollbar-Definitionen falsch, der NS6 bricht hier ab. Am besten Du klammerst Sie zum test mal aus mit }/* scrollbars...}*/ auf die Klammer aufpassen.
if document.all{
document.write("<style type=text/css>div.four{scrollbar-base-color:#336699...</style>");}
im script wäre die bessere Lösung.Käse. Solange die Dinger syntaktisch korrekt sind (und das sind sie), werden die von anderen Browsern einfach überlesen. Das Problem wird sein, dass der MSIE5 schlichtweg 'nen padding oder border von der width eines elementes abzieht (warum auch immer..).
Ole, versuch das mal in Opera - da sollte es mehr oder weniger so aussehen, wie in Mozilla/Netscape 6 ;)Grüße aus Lüneburg
Kai
Hallo Kai,
was ist hier Käse ??? Mein NS6 (Linux/KDE) ist abgeschmiert, so !
Mozilla RC 1.0 übrigens auch.Syntaktisch korrekt ? Nee, ich habe über 40 Fehler gefunden und beseitigt.
Ausserdem zu Opera:
Der kann keine Stylessheet-Formatierungen bei Input-Tags korrekt ausführen. Hier braucht es eine DIV-Lösung mit Veränderung der Visibility, z.B. <span id="ausgabe1">hier geht es zur Übersicht</span>
und dem Aufruf onmouseover="showMsgOpera('1','inherit');" onmouseout=showMsgOpera('1','hidden');"function showMsgOpera(textnr,status){
var LayerID="ausgabe"+textnr;
document.getElementById(LayerID).style.visibility=status;
}Aber Opera war her ja nicht gefragt, das ist ein anderes Problem.
padding und margin arbeiten nicht korrekt, wenn ergänzende Angaben fehlen. padding:0px bedeutet padding-left:0px
Das Pading-Problem habe ich für Netscape mit einem eingefügten Span-Tag gelöst, siehe Code im neuen Posting von mir.Also, mach erstmal so eine Sache mit Hand und Fuss, bevor Du irgendwelche Aüsserungen wie Käse abgibst ;-)
-
hi
was ist hier Käse ??? Mein NS6 (Linux/KDE) ist abgeschmiert, so !
Mozilla RC 1.0 übrigens auch.ich meine, dass Mozilla ein body{scrollbar-face-color:red;} einfach überliest, wenn es auftaucht. Das er absemmelt wird als nicht daran liegen.
padding und margin arbeiten nicht korrekt, wenn ergänzende Angaben fehlen. padding:0px bedeutet padding-left:0px
Das Pading-Problem habe ich für Netscape mit einem eingefügten Span-Tag gelöst, siehe Code im neuen Posting von mir.padding als solches setzt für alle 4 Seiten. Is so und sollte auch jeder Browser verstehen (keine Garantie für NN4 ;)
Grüße aus Bleckede
Kai
-
-
-
-
hi,
ps: vieleicht liegts einfach am montag das ich den fehler nicht finde *seuftz*
ueberpruefe Deine padding Angaben, die erscheinen mir reichlich konfus., so entsteht z. B. der Abstand zwischen VBMZ Online Office und rechter Linie. Btw: was hat da "align=right" im div-tag zu suchen?
Ansonsten solltest Du Divs per ID positionieren, es handelt sich ja nicht um Class-Angaben, sondern um _individuelle_ Anweisungen.Gruesse Joachim
-
Hallo,
wie versprochen, hier der funktionierende Code. Fehler: zweimal :: im stylesheet abstand top: 20 px anstatt top: 20px ids fehlten.
Tip: nicht mit form und input-Tags arbeiten, das kann nämlich der Opera nicht, daher alle Buttons mit title="Beschreibung" versehen, besser wäre hier auch ein Span-Tag anstatt Button. Zunächst sollte das hier aber reichen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD>
<title>VBMZ Online Office</title>
<script type="text/javascript" language="JavaScript">
<!--
if(navigator.appName.indexOf("MSIE")==-1&&navigator.userAgent.indexOf("Opera")==-1){ document.write("<style type='text/css'> "+ "body{ scrollbar-base-color: #dddddd; scrollbar-3dlight-color: #dddddd; scrollbar-darkshadow-color: #dddddd; scrollbar-arrow-color: #003366; scrollbar-face-color: #dddddd; scrollbar-highlight-color: #003366; scrollbar-shadow-color: #003366; scrollbar-track-color: #dddddd;}"+ "div.four{direction: rtl; overflow: auto; scrollbar-base-color: #dddddd; scrollbar-3dlight-color: #dddddd; scrollbar-darkshadow-color: #dddddd; scrollbar-arrow-color: #003366; scrollbar-face-color: #dddddd; scrollbar-highlight-color: #003366; scrollbar-shadow-color: #003366; scrollbar-track-color: #dddddd;}"+ "div.six{overflow: auto; scrollbar-base-color: #8ab8f5; scrollbar-3dlight-color: #8ab8f5; scrollbar-darkshadow-color: #8ab8f5; scrollbar-arrow-color: #003366; scrollbar-face-color: #8ab8f5; scrollbar-highlight-color: #003366; scrollbar-shadow-color: #003366; scrollbar-track-color: #8ab8f5;}"+ "</style>"); } // --> </script> <script type="text/javascript" language="JavaScript"> <!-- function showMsg(text) { if (document.all||document.layers){ document.picform.message.value = text;} else if(document.getElementById){document.getElementById("five").innerHTML="<span style='position:relative;left:18px;width:350px;text-align:center'>"+text+"</span>";}
}
-->
</script>
<style type="text/css">
div.one { padding: 0px; margin: 0px; position: absolute; top: 0px; left: 0px; height: 57px; width: 750px; z-index: 10; background: #ffffff;}
div.two { padding: 0px; margin: 0px; position: absolute; top: 57px; left: 0px; height: 21px; width: 750px; z-index: 10; background: #8ab8f5;}
div.three { padding: 0px; margin: 0px; position: absolute; top: 78px; left: 0px; height: 18px; width: 300px; z-index: 10;}
div.four { padding: 0px; margin: 0px; position: absolute; top:96px; left: 1px; height: 348px; width: 150px; z-index: 11; background: #dddddd; border-right: solid 1px #003366; }
div.five {position:absolute; top: 425px; left: 152px; height: 20px; width: 600px; z-index: 10; background: #8ab8f5; }
div.six { padding: 0px; margin: 0px; position: absolute; top: 78px; left: 150px; height: 348px; width: 600px; z-index: 0; border-right: solid 1px #8ab8f5; }
body { padding: 0px; margin: 0px;font-size:0.8em/80%;}
form { padding: 0px; margin: 0px; border: 0px; font-family: arial,helvetica,sans-serif; font-size: 10px;}
form.nachrichten { padding: 0px; margin: 0px; border: 0px;}
input.message { padding-left:18px;margin: 0px; border: 0px; width: 550px; background: #8ab8f5; font-family: arial,helvetica,sans-serif; font-size: 10px;}
input.zahl { padding: 0px; margin: 0px; border: 0px; width: 30px; background: #ffffff; font-family: arial,helvetica,sans-serif; font-size: 10px;}
input.nachricht { padding: 0px; margin: 0px; border: 0px; width: 100px; background: #ffffff; font-family: arial,helvetica,sans-serif; font-size: 10px;}
button { padding: 0px; margin: 0px; width: 60px; height: 40px; background: #dddddd;}
div.nachrichten { padding: 0px; margin: 0px; padding-left: 8px; position: absolute; right: 10px; top: 10 px; width: 150px;}
div.chat { padding: 0px; margin: 0px; padding-left: 8px; position: absolute; right: 10px; bottom: 10px; width: 150px;}
div.termine { padding-left: 8px; position: relative; left: 10px; top: 25px; width: 400px;}
div.ueberschrift { padding: 0px; margin: 0px; padding-left: 8px; position: absolute; right: 10px; top: 2px; width: 150px; font-family: arial,helvetica,sans-serif; font-size: 15px; font-weight: bold; color: #003366;}
table.nachrichten { font-family: arial,helvetica,sans-serif; font-size: 11px;}
legend { font-family: arial,helvetica,sans-serif; font-size: 11px; text-decoration: none; color: #000000;}
fieldset { border: solid 1px #003366;}
ul { padding-top: 5px; padding-bottom: 5px; padding-right: 30px; padding-left: 30px; margin: 0px; border: 0px;}
</style>
<style type="text/css">
p.c2 {text-align: center;}
div.c1 {text-align: right;}
</style> </HEAD> <BODY scrolling="auto" >
<div name="one" id="one" class="one">
<img src="img/top_graphic.jpg" width="633px" height="57px" alt=
"1">
</div>
<div name="two" id="two" class="two c1">
<p>VBMZ Online Office
</div>
<div name="three" id="three" class="three"><span style="position:relative;height:18px;width:250px;">
<img src="img/1x1.gif" width="250px" height="18px" alt="3" border=
"0"></span><span style="position:relative;height:18px;width:34px;"> <img src="img/template3_07.gif" width="34px" height="18px"
alt="3" border="0"></span>
</div>
<!--- Navigation Anfang =-->
<div name="four" id="four" class="four">
<form action="dummie.html"><BR>
<p class="c2"><button type="button" value="Übersicht" onmouseover="showMsg('Hier gelangen Sie zur Übersichtsseite');"
onmouseout="showMsg('');"
onclick="self.location.href='dummie.html'" onfocus="if(document.all) this.blur()"><img src="img/icon_notizen.gif" width="45" height="33" alt="Übersicht" title="hier gelangen Sie zur Übersichtseite"
border="0" onmouseover="showMsg('Hier gelangen Sie zur Übersichtsseite');"
onmouseout="showMsg('');"></button></P>
<p class="c2"><button type="button" value="Nachrichten" onmouseover="showMsg('Hier gelangen Sie zur Nachrichtenseite');" onmouseout="showMsg('');"
onclick="self.location.href='dummie.html'" onfocus="if(document.all) this.blur()"><img src=
"img/icon_nachrichten.gif" width="46px" height="32px" alt="Nachricht"
border="0" onmouseover="showMsg('Hier gelangen Sie zur Nachrichtenseite');"
onmouseout="showMsg('');"></button></p>
<p class="c2"><button type="button" value="Kalender" onmouseover="showMsg('Hier gelangen Sie zur Kalenderseite');"
onmouseout="showMsg('');"
onclick="self.location.href='dummie.html'" onfocus="if(document.all) this.blur()"><img src="img/icon_kalender.gif" width="45" height="31" alt=
"Kalender" titel="Hier gelangen Sie zur Kalenderseite"
border="0" onmouseover="showMsg('Hier gelangen Sie zur Kalenderseite');"
onmouseout="showMsg('');"></button></p>
<p class="c2"><button type="button" value="Chat" onmouseover=
"showMsg('Hier gelangen Sie zur Chatseite');" onmouseout=
"showMsg('');" onclick=
"self.location.href='dummie.html'" onfocus=
"if(document.all) this.blur()"><img src="img/1x1.gif"
width="30px" height="30px" alt="Chat" border="0" onmouseover=
"showMsg('Hier gelangen Sie zur Chatseite');" onmouseout=
"showMsg('');"></button></p>
</form> <BR>
</div>
<!-- Navigation Ende -->
<!-- Nachrichtenzeile Anfang -->
<div name="five" id="five" class="five">
<form name="picform">
<input class="message" type="text" id="messgae" name="message" value="">
<input type="hidden" name="go" id="go" value="">
</form>
</div>
<!-- Nachrichtenzeile Ende -->
<!-- Content Anfang -->
<div name="six" id="six" class="six">
<div name="Nachrichten" class="nachrichten">
<form>
<fieldset>
<legend> Nachrichten </legend>
<p> <input class="zahl" type="text"
name="neu" id="neu" value="1234"><input class="nachricht" type="text" name="nachrichten1" value=
"Neue Nachrichten"><br>
<input class="zahl" type="text"
name="neu" value="1234"><input class="nachricht" type="text" id="nachrichten1" name="nachrichten1" value="Nachrichten gesamt">
</fieldset>
</form>
</div>
<div name="termine" id="termine" class="termine">
<form>
<fieldset>
<legend> Termine </legend>
<ul>
<li>
<p>22-05-2002 | 16:23 Uhr | Termin 1
<li>
<p>23-05-2002 | 16:23 Uhr | Termin 2
<li>
<p>24-05-2002 | 16:23 Uhr | Termin 3
<li>
<p>25-05-2002 | 16:23 Uhr | Termin 4
<li>
<p>26-05-2002 | 16:23 Uhr | Termin 5
<li>
<p>27-05-2002 | 16:23 Uhr | Termin 6
<li>
<p>28-05-2002 | 16:23 Uhr | Termin 7
<li>
<p>29-05-2002 | 16:23 Uhr | Termin 8
<li>
<p>30-05-2002 | 16:23 Uhr | Termin 9
<li>
<p>31-05-2002 | 16:23 Uhr | Termin 10
</ul>
</fieldset>
</form>
</div>
<div name="Chat" id="chat" class="Chat">
<form>
<fieldset>
<legend> Chat </legend>
<p> <input class="zahl" type="text"
name="neu" value="1234"><input class="nachricht" type=
"text" name="nachrichten1" id="nachrichten1" value="User im Chat">
</fieldset>
</form>
</div>
</div>
<!-- Content Ende --> </BODY> </HTML>
-
Ups - Noch ein Bug: im Script muss es natürlich if(navigator.userAgent.indexOf("MSIE")!=-1 heissen.
<script type="text/javascript" language="JavaScript">
<!--
if(navigator.userAgent.indexOf("MSIE")!=-1&&navigator.userAgent.indexOf("Opera")==-1){
document.write("<style type='text/css'> "+
"body{ scrollbar-base-color: #dddddd; scrollbar-3dlight-color: #dddddd; scrollbar-darkshadow-color: #dddddd; scrollbar-arrow-color: #003366; scrollbar-face-color: #dddddd; scrollbar-highlight-color: #003366; scrollbar-shadow-color: #003366; scrollbar-track-color: #dddddd;}"+
"div.four{direction: rtl; overflow: auto; scrollbar-base-color: #dddddd; scrollbar-3dlight-color: #dddddd; scrollbar-darkshadow-color: #dddddd; scrollbar-arrow-color: #003366; scrollbar-face-color: #dddddd; scrollbar-highlight-color: #003366; scrollbar-shadow-color: #003366; scrollbar-track-color: #dddddd;}"+
"div.six{overflow: auto; scrollbar-base-color: #8ab8f5; scrollbar-3dlight-color: #8ab8f5; scrollbar-darkshadow-color: #8ab8f5; scrollbar-arrow-color: #003366; scrollbar-face-color: #8ab8f5; scrollbar-highlight-color: #003366; scrollbar-shadow-color: #003366; scrollbar-track-color: #8ab8f5;}"+
"</style>");
}
// -->
</script>
-