Wo ist der W3C standard geblieben?

Hallo Leute, ich bin langsam am verzweifeln… Ich hatte mich bereits damit abgefunden, dass die M$ dem W3C standard entzieht un ihr eignes ding machen, aber nun musste ich feststellen, dass Opera, Safari und auch bei Chrome unterschiedliche darstellungen, im Vergleich zum Firefox browser, erreicht werden! Hier mal eine kleine screenshotreihe: Firefox Chrome Opera Safari IExplorer Interessanterweise stellt der iexplorer es richtig dar xD hat einer ne ahnung was das ganze soll, oder bin ich zu blöd? hier mal der kleine codeschnipsel dazu: [html]




<?php echo MyDataBase::getKeyword('NAME'); ?>:

                    <input tabindex="3" type="submit" class="input" id="bgbSave" name="bgbSave" value="<?php echo MyDataBase::getKeyword('EDIT'); ?>"
                        onmouseover='setButtonFocus(this);' 
                        onmouseout='setButtonNotFocus(this);' 
                        onmousedown='setButtonPress(this);' 
                        onmouseup='setButtonUp(this);' 
                        onfocus='setButtonFocus(this);'
                        onblur='setButtonNotFocus(this)' /> 
                </div>
                <div id="gbWriteSecRight">
                    <label title="gbText"><?php echo MyDataBase::getKeyword('ENTRY'); ?>:</label>
                    <textarea tabindex="2" name="tagbEntry" class="input" onfocus='setActive(this);' onblur='setNotActive(this);' rows="0" cols="0" ></textarea>
                </div>
                
             <input type='hidden' name='lang' value='<?php echo $_SESSION['lang']; ?>' /> 
             <input type='hidden' name='func' value='add' /> 
            </form>
        </div>

[/html]CSS:

#gbWriteSec { height:100px; border-bottom:2px solid black; } #gbWriteSecLeft{ float:left; width:210px; } #gbWriteSecRight{ float:left; } #gbWriteSecLeft label, #gbWriteSecRight label{ display:block; width:60px; float:left; } #gbWriteSec input#bgbSave { float:left; clear:both; margin-top:45px; margin-left:60px; width:140px; } #gbWriteSec textarea { width:395px; height:90px; font-size:10pt; font-weight:normal; } mfg
ani

Kannst Du mal bitte den erzeugten HTML-Code ohne Kodierung zeigen. So wie er jetzt aussieht ist er kaum lesbar. Außerdem wäre der komplette Code interessant. Fehldarstellungen werden meist nicht nur durch unsauberen Code sondern auch durch nicht durchdachte Aufteilungen und CSS-Eigenschaften verursacht.

blöde editier hat was weggeschnitten:




<?php echo MyDataBase::getKeyword('NAME'); ?>:

                    <input tabindex="3" type="submit" class="input" id="bgbSave" name="bgbSave" value="<?php echo MyDataBase::getKeyword('EDIT'); ?>"
                        onmouseover='setButtonFocus(this);' 
                        onmouseout='setButtonNotFocus(this);' 
                        onmousedown='setButtonPress(this);' 
                        onmouseup='setButtonUp(this);' 
                        onfocus='setButtonFocus(this);'
                        onblur='setButtonNotFocus(this)' /> 
                </div>
                <div id="gbWriteSecRight">
                    <label title="gbText"><?php echo MyDataBase::getKeyword('ENTRY'); ?>:</label>
                    <textarea tabindex="2" name="tagbEntry" class="input" onfocus='setActive(this);' onblur='setNotActive(this);' rows="0" cols="0" ></textarea>
                </div>
                
             <input type='hidden' name='lang' value='<?php echo $_SESSION['lang']; ?>' /> 
             <input type='hidden' name='func' value='add' /> 
            </form>
        </div>

mehr is nicht wichtig, abgsehn vom css…
im div mit der id ‚gbWriteSec‘ bewegt sich alles… oder was meinst?

Nein, ich meinte den HTML-Code der im Browser ankommt. Der enthält weiterhin PHP-Code. Und der gesamte Quellcode wäre interessant. Nicht nur das Bruchstück.

mensch, es gibt noch leute, die sich kompletten quelltext angucken wollne?
bitte, dass ganze als txt datei, da es mehr als 10k wörter sind…
File-Upload.net - Blub.txt

Wenn Du davon sprichst, dass deine Seite trotz validem Code nicht in den von dir genutzten Browsern einheitlich angezeigt wird, musst Du natürlich auch den Nachweis liefern, dass dein gesamter Code valide ist. Daher musst Du natürlich den gesamten Quellcode zeigen.

Eine Datei zum Runterladen werde ich jedoch nicht anschauen. Bitte zeig einen Link zur betreffenden Seite, wo man ebenso gut den ganzen Quellcode einsehen kann. Sollte dir der Webspace dafür fehlen, verwende einen kostenfreien Webspace.

bin noch nicht fertig mit der seite, daher werd ich auch noch nix hochladen…
Animals Realm
versuch mal so, hab xampp noch ne kleine weile an bevor ich in bett gehe…

edit: The W3C Markup Validation Service sagt, dass der code valide ist…

dein HTML-code ist zwar valide, trotzdem ist nicht unbedingt alles schlau gelöst.

Ich sehe unmengen von  ´s in deinem Quelltext, das ist schonmal alles andere als optimal, im CSS kann man einiges besser machen.

Zum Beispiel deine footer-icons:

div#footer span {
    color: #B4B4B4;
    display: inline-block;
    float: left;
    font-size: 8pt;
    height: 18px;
    margin-bottom: 2px;
    margin-left: 10px;
    margin-top: 2px;
    text-align: left;
}

…die sind in spans, die display: inline-block haben und links floaten.
Wenn die floaten, kannst du auch problemlos display:block; verwenden, bei inline-block habe ich auch schon oft unterschiedliches Verhalten bei den Browsern feststellen müssen - ich verzichte momentan ganz darauf, inline-block zu verwenden. (leider)

Zudem haben die spans ein Hintergrundbild von 32x32px, sind 18px hoch. Woher soll der span denn „wissen“, wie breit er zu sein hat? width-Angabe wäre sinnvoll.
Die 5  ´s in den spans können eigentlich auch nichts, besser wäre padding oder margin-left.

Was sonst noch auffällt:

  • font-sizes besser in px (oder em) statt in pt angeben, ein MAC beispielsweise definiert 1pt anders als ein PC.

  • mit „background-size“ bist du ein wenig früh dran, das scheint ja noch nicht zu klappen. Versuche deine Hintergrundbilder einfach auf die richtige Grösse zu bringen.

  • bei allen floats, die schief gehen / sich in den Browsern unterscheiden, mal für die entsprechenden Elemente height UND width angeben ( zB div.gbEntry ), ggf auf richtiges clearen achten.

das wären meine Tips, wenn du die umsetzt, sollte das schonmal besser klappen, crossbrowsermässig.

greetz

ich guck mal drüber, aber zu den leerzeichen, dass war ne schnelllösung weil ich was testen wollte, bin bisher nich dazu gekommen das zu ändern…
das mit der „background-size“ geht nur beim ie nich (was fürn wunder…), alle andern machns.
mir ist grad aufgefallen, das die textbox für den namen unterschiedlich rgoß ist… un im css geguckt: hab vergessen eine breite zu definieren, und schon klapt es fast.
Dann hab die mal die breite der textarea etwaqs verkleinert, und siehe da es klappt auch, nur dass sie nun in ff und ie etwas kürzer ist als in chrome, opera und safari : (

Versuch doch mal, der textarea explizit padding und margins zuzuweisen - evtl auch font-size und line-height, falls noch nicht geschehen… dann sollten die eigentlich auch gleich gross sein.

Viel Glück!

Im CSS gibt es auch noch einige Lücken in der Validität wenn man mal von den CSS3-Eigenschaften absieht die noch nicht mal von allen aktuellen Browsern einheitlich unterstützt werden.
W3C CSS Validator results for http://178.25.52.182/animals-realm/guestbook.php?lang=de (CSS level 2.1)

verdammtes padding, danke daran hat ich nich gedacht…

edit: darf ich mal fragen was du allgemein von meiner website hältst? so design/aufbau etc…
edit2: -moz-border-radius und -webkit-border-radius gehören auch nich wirklich zum „normalen“ css sonder zu dem pack, deswegen unterstützt ie das auch nich (gruml) aber is ir wayne, da alle andern es tun…