Masha: Versuch einer sauber gecodeten Seite

Hey zusammen,
ich versuche gerade eine einfache Seite xhtml-konform, sauber gecodet und browser-kompatibel zu erstllen. Was das Layout betrifft, habe ich vorgaben, an die ich mich halten muss. das soll aslo nicht zur diskussion stehen.
Leider habe ich bereits jetzt schon das erste Problem:
Die Seite wird in aktuellen Browsern zwar immer korrekt dargestellt. Beim Zoom allerdings verschiebt sich einiges - aber auch nicht immer, sondern nur auf einzelnen Vergrößerungen, bzw. Verleinerungen:
Habe ich bereits falsch begonnen?
Hier der Link zur Seite:Die Seite
Und hier der CSS-Code:

@charset "utf-8";  
body {  
	background-color: #F00;  
	font-family: Verdana, Arial, sans-serif;  
	width: 957px;  
	margin: 0px auto;  
}  
h1 {  
	margin: 10px 0px 0px 0px;  
	border: 2px solid #FFF;  
}  
ul#navigation {  
	list-style: none;  
	width: 957px;  
	margin: 0px;  
	padding: 0px;  
}  
ul#navigation li {  
	border-style: solid;  
	border-color: #FFF;  
	height: 35px;  
	text-align: center;  
	float: left;  
}  
ul#navigation li.zelle1 {  
	border-width: 0px 2px 2px 2px;  
	width: 227px;  
}  
ul#navigation li.zelle2 {  
	border-width: 0px 2px 2px 0px;  
	width: 240px;  
}
  1. Hallo!

    ich versuche gerade eine einfache Seite xhtml-konform, sauber gecodet und browser-kompatibel zu erstllen.

    Sehr löblich! :-)

    Die Seite wird in aktuellen Browsern zwar immer korrekt dargestellt. Beim Zoom allerdings verschiebt sich einiges - aber auch nicht immer, sondern nur auf einzelnen Vergrößerungen, bzw. Verleinerungen

    Welche Teile verschieben sich wie? Ich konnte im Firefox nichts feststellen.
    Tritt das Problem zufälligerweise nur im IE auf? Dann könnte das an deiner festen Schriftgröße liegen (Pixel).

    Und hier der CSS-Code:

    Es hat sich allgemein als sinnvoll erwiesen, skalierbare Schriftgrößen (em) statt Pixel zu verwenden.

    Liebe Grüße aus Norddeutschland.

    --
    ie:{ fl:( br:> va:} ls:[ fo:| rl:? n4:~ ss:) de:> js:| ch:? sh:( mo:) zu:)
    1. ich versuche gerade eine einfache Seite xhtml-konform, sauber gecodet und browser-kompatibel zu erstllen.
      Sehr löblich! :-)

      Gebe mein Bestes! :-)

      Welche Teile verschieben sich wie? Ich konnte im Firefox nichts feststellen.
      Tritt das Problem zufälligerweise nur im IE auf? Dann könnte das an deiner festen Schriftgröße liegen (Pixel).

      Die Rahmen der horizontalen Liste verschieben sich. Ich aktualisiere die Seite gleich noch um eine weitere Liste und den Hauptteil für den Content.
      Dann sieht man die Auswirkungen der kleinen Verschiebung deutlicher.

      Es hat sich allgemein als sinnvoll erwiesen, skalierbare Schriftgrößen (em) statt Pixel zu verwenden.

      Besten Dank! Dann werd ich das übernehmen.

      Viele Grüße aus dem Pott!

  2. So, ich habe die Struktur ergänzt. Diese Struktur wird auch die finale Seite haben. Bislang müsste eigentlich alles sauber gecodet sein. Trotzdem die zum teil starken Verschiebungen in den einzelnen Browsern (ausser bei Opera).
    Fällt Euch schon etwas auf, was unschön gemacht ist?

    Viele Grüße

    Hier der Link zur Seite:Die Seite
    Und hier der CSS-Code:

    @charset "utf-8";
    body {
    background-color: #F00;
    font-family: Verdana, Arial, sans-serif;
    width: 957px;
    margin: 0px auto;
    }
    h1 {
    margin: 10px 0px 0px 0px;
    border: 2px solid #FFF;
    }
    ul#navigation {
    list-style: none;
    width: 957px;
    margin: 0px;
    padding: 0px;
    }
    ul#navigation li {
    border-style: solid;
    border-color: #FFF;
    height: 35px;
    text-align: center;
    float: left;
    }
    ul#navigation li.zelle1 {
    border-width: 0px 2px 2px 2px;
    width: 227px;
    }
    ul#navigation li.zelle2 {
    border-width: 0px 2px 2px 0px;
    width: 240px;
    }
    ul#navigation2 {
    list-style: none;
    width: 231px;
    margin: 0px;
    padding: 0px;
    float: left;
    }
    ul#navigation2 li {
    border-style: solid;
    border-color: #FFF;
    border-width: 0px 2px 2px 2px;
    height: 42px;
    background-image: url(../Grafiken/Button.jpg);
    }
    #hauptfenster {
    border-style: none;
    background-image: url(../Grafiken/Hintergrund2.jpg);
    width: 726px;
    height: 396px;
    margin: 0px;
    padding: 0px;
    float: right;
    }

    
    >