• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

IE 7 stellt Seite beim vergrössern falsch dar

K

knecht2010

Neues Mitglied
Hallo zusammen,
ich baue seit kurzem unsere Seite neu und habe mich dafür in HTML und CSS eingelesen. Soweit ich es beurteilen kann klappt das schon ganz gut auch wenn ich sicherlich noch einige Fehler mache. Das Problem ist dass Opera und Firefox die Seite beim Zoomen korrekt darstellen nur der IE7 nicht. Ich habe in der Navigation den Links einen linken Rahmen gegeben der beim Zoomen im IE7 verrutscht. Vergrössere ich nur den Text ist alles O.K. nur beim gesamt Zoom nicht.
Hier die Seite Unbenanntes Dokument. Habe ich aber nur zum ansehen hier hochgeladen es fehlen einige Bilder.
Ist aber noch nicht fertig, ich will nur nicht weitermachen bis ich weis an was es liegt.
Falls euch noch mehr Fehler auffallen (da bin ich fast sicher) nur her damit.
Danke für Eure Mühe.
Code: 
@charset "utf-8";
/* CSS Document */
/* setzt Abstände auf Null*/
* {
    padding:0;
    margin:0;
}
/* bodybereich*/
html, body {
    padding:0;
    margin:0;
    font-family:Verdana, Geneva, helvetica, sans-serif;
    font-size:1em;
    background-color:#fff;
    position:relative;
}
h1 {
    font-size:130%
}
h2 {
    font-size:120%
}
h3 {
    font-size:110%
}
#wrapper {
    margin:0 auto;
    position:relative;
    width:800px;
    height:100%;
}
#navigation {
    border-bottom:solid #666 1px;
    margin:10px 5px;
    padding:10px;
    text-align:center;
    background-color:#faf9f9;
}
#navigation ul {
}
#navigation li {
    display:inline;
    padding:6px;
    text-align:center;
    list-style-type:none;
    border-left:#C3C solid 1px;
    font-size:80%;
    font-weight:600;
}
/* Formatierung der Hyperlinks in der Navigation*/
.menu:link, .menu:visited, .menu:hover, .menu:active {
    text-decoration:overline;
    outline:none;
    color:#F93;
}
/* Formatierung der besuchten Hyperlinks in der Navigation*/
.menu:hover, .menu:active {
    text-decoration:underline;
    outline:none;
}
/*Unternavigation*/
#unavigation {
    margin-top:15px;
    margin-left:320px;
    padding:4px;
    text-align:right;
}
#unavigation ul {
}
#unavigation li {
    border-left:#F93 solid 2px;
    display:inline;
    padding:2px;
    list-style-type:none;
    font-weight:600;
    font-size:80%;
}
/* Formatierung der Hyperlinks in der UnterNavigation*/
.umenu:link, .umenu:visited, .umenu:hover, .umenu:active {
    text-decoration:overline;
    outline:none;
    color:#666;
    padding:2px;
}
/* Formatierung der besuchten Hyperlinks in der UnterNavigation*/
 .umenu:hover, .umenu:active {
    text-decoration:underline;
}
#fnavigation {
    float:left;
    margin-top:15px;
    margin-bottom:4px;
    padding: 4px;
    text-align:left;
}
#fnavigation ul {
}
#fnavigation li {
    margin-left:4px;
    padding:2px;
    display:inline;
    font-weight:600;
    font-size:80%;
    list-style-type:none;
    border-left:#F93 solid 2px;
}
/* Formatierung der Hyperlinks in der fNavigation*/
.fmenu:link, .fmenu:visited, .fmenu:hover, .fmenu:active {
    text-decoration:overline;
    outline:none;
    color:#000;
    padding:2px;
}
/* Formatierung der besuchten Hyperlinks in der fNavigation*/
 .fmenu:hover, .fmenu:active {
    text-decoration:underline;
}
/* Formatierung der Hyperlinks ausserhalb der Navigation*/
a:link, a:visited, a:active, a:hover {
    text-decoration:none;
    font-weight:600;
    color:#CCC;
    font-size:90%;
    border:0px;
    outline:none;
}
/* Formatierung der besuchten Hyperlinks ausserhalb der Navigation*/
a:visited, a:active, a:hover {
    text-decoration:none;
    border:0px;
    outline:none;
}
#headerstart {
    height:120px;
    border-bottom:solid #666 1px;
    border-top:solid #666 1px;
    background-image:url(HeaderStart.jpg);
    background-position:left;
    background-repeat:no-repeat;
}
#headerwand {
    height:120px;
    border-bottom:solid #666 1px;
    border-top:solid #666 1px;
    background-image:url(HeaderWandtattoos.jpg);
    background-position:left;
    background-repeat:no-repeat;
}
#headerbeschr {
    height:120px;
    border-bottom:solid #666 1px;
    border-top:solid #666 1px;
    background-image:url(HeaderBeschriftungen.jpg);
    background-position:left;
    background-repeat:no-repeat;
}
#headertshirt {
    height:120px;
    border-bottom:solid #666 1px;
    border-top:solid #666 1px;
    background-image:url(HeaderT-Shirt.jpg);
    background-position:left;
    background-repeat:no-repeat;
}
#headerholz {
    height:120px;
    border-bottom:solid #666 1px;
    border-top:solid #666 1px;
    background-image:url(HeaderHolzstuebchenai.jpg);
    background-position:left;
    background-repeat:no-repeat;
}
#container {
    width:800px;
    height:auto;
    clear:both;
    margin:10px auto;
    border-right:double #666 2px;
    border-left: double #666 3px;
    height:700px;
    background-color:#faf9f9;
}
/* Bildboxen mit Linksausrichtung*/
.galerie li {
    list-style-type: none;
    float: left;
    margin-top:30px;
    margin-left:30px;
    text-align:center;
    display:inline;
    height:auto;
    position:relative;
}
.galerie img {
    display:block;
    padding:3px;
    border-right:5px groove #FF9;
    border-top:5px groove #FF9;
}
/* Ende Bildboxen mit Linksausrichtung*/

/* Bildboxen mit Rechtsausrichtung*/
.galerie1 li {
    clear:left;
    list-style-type: none;
    float: right;
    margin-top:30px;
    margin-right: 30px;
    text-align:center;
    display:inline;
    height:auto;
    position:relative;
}
.galerie1 img {
    display:block;
    padding:3px;
    border-left:5px groove #F96;
    border-bottom:5px groove #F96;
}
/* Ende Bildboxen mit Rechtsausrichtung*/


/* Bildboxen mit Linksausrichtung*/
.galerie3 li {
    clear:right;
    list-style-type: none;
    float:left;
    margin-top:30px;
    margin-left:30px;
    text-align:center;
    display:inline;
    height:auto;
    position:relative;
}
.galerie3 img {
    display:block;
    padding:3px;
    border-right:5px groove #FF9;
    border-top:5px groove #FF9;
}
p {
    color:#00F;
    font-size:80%;
}
p#Zeile2 {
    background-color:#FF0;
    clear:both;
}
p#Zeile3 {
    background-color:#FF0;
    clear:both;
}
 
Zuletzt bearbeitet:
Werbung:
So wie es da steht hast du nicht den Links border gegeben sondern den umschließenden Listeneinträgen.
Ich sehe im IE7 keine Verschiebung.
Ich meine aber, daß die Kombination von display:inline und border eine Verschiebung beim zoomen verursachen kann.
Gebe #fnavigation li mal Layout (zoom:1; ).
 
Danke für den Tip, scheint zu funktionieren. Ich habe border schon den Links und allen anderen Möglichkeiten zugewiesen aber das Ergebniss blieb dasselbe. Mit zoom scheint es zu funktionieren.
Wie gesagt falls noch mehr Fehler da sind bitte Bescheid geben.
Gruß
Werner
 
Werbung:
Ich mag mir das nicht alles ansehen.
Mir ist aufgefallen, daß du IE-Hacks unkommentiert in das css schreibst.
Code: 
.galerie1 li {
...
[COLOR="#8b0000"][B]    float: right;[/B][/COLOR]
..
[COLOR="DarkRed"][B]    display:inline;[/B][/COLOR]
...
}
display:inline; für float ist eigentlich nur ein Hack für den IE<=7.
zoom:1; ist nur für IE 5.5-7 geeignet.
Diese Hacks solltest du in Conditional Comments schreiben und dort für die jeweiligen IE-Versionen Selektorhacks verwenden und kommentieren.
Sonst beginnt die Fehlersuche immer wieder von vorne.
 
Zuletzt bearbeitet:
Danke für deine Antwort, wie gesagt fange ich erst an mit CSS.
Ich versuche auch weiter zu lernen, das display inline habe ich verwendet weil im IE6 die floats nicht funktionierten und ich gelesen habe dass display inline abhilfe schafft. Hat auch soweit funktioniert aber ich muss zugeben dass ich manche Zusammenhänge noch nicht verstehe. Dass Du nicht alles ansehen magst kann ich verstehen, war ja auch nicht nur auf Dich bezogen sondern an alle gerichtet denen vielleicht was auffällt.
Gruß
Werner
 
Beinahe jeder Hack hat auch Nebenwirkungen.
zoom:1; löst zwar deine Probleme im kaputten IE7-Zoom,
aber es macht display: inline; auch zu display: inline-block.

display: inline-block widerum lässt padding-top und padding-bottom zu.
Darum ist deine Navigation im IE7 nun höher.


css-Hacks für den IE versteckst du am besten in Conditional Comments (häufig CC genannt)
Innerhalb des CC kannst du dein css für den IE vor anderen Browsern verstecken.
Die IE-Versionen unterstützen css unterschiedlich und zum Teil sehr Fehlerhaft. Darum sollte man sie innerhalb des CC noch einmal unterscheiden:
Code: 
<!--[if lt IE 8]>
<style>
/*für IE>=7*/
.galerie1 li {
display:inline;
}
/*für IE7*/
[COLOR="DarkRed"][B]*:first-child+html[/B][/COLOR] #navigation li {
zoom: 1;
padding-top: 0;
padding-bottom: 0;
}

/*für IE5 - 6/*
[COLOR="DarkRed"][B]* html [/B][/COLOR].galerie1 li{
.galerie1 li {
    Eigenschaft: Wert;
}
</style>
<![endif]-->
Du kannst innerhalb des CC auch auf eine css-Datei verweisen wie du es für dein bisheriges css auch gemacht hast.

Wenn es dich interessiert google nach "Conditional Comments" und "has layout"

Wenn du nur diese eine Seite machen möchtest, finde ich es doch OK wie sie gerade aussieht.
 
Zuletzt bearbeitet:
Werbung:
Super, danke Dir.
Werde ich morgen mal nach Googeln. Es sollen zwar mehrere Seiten werden aber alle mit dem gleichen Aufbau. Ich bin halt ein bisschen im Zugzwang weil die Seite fertig werden muss (Geschäft läuft nicht so recht) möchte aber trotzdem alles so gut wie möglich machen.
Nochmal Danke
Gruß
Werner;Jump
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben