• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Bin ratlos: nur im IE sieht es aus wie gewünscht (Zwischenraum erscheint)

musicplayer

musicplayer

New member
Hi,
ich bastle gerade an drei Designs für einen Style-Switcher. Die drei Styles sollen alle horizontal zentriert sein und oben direkt an das Browserfenster anschließen, was im IE auch funktioniert. In den anderen Browsern gibt es allerdings einen Zwischenraum. Ich hab es gerade auch noch mit den im Forum vorgestellten Lösungen zum Zentrieren versucht, allerdings hat es da mein Design komplett zerschossen.
Irgendwie komm ich nicht weiter und wäre dankbar für Hilfe :)
Style 1 (da fällt es nicht auf, aber der Vollständigkeit wegen gibt es den Link trotzdem)
Style 2
Style 3

Das relevante CSS:
body{
margin: 0px;
background-color: #BB9985;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 0px;
color: #56473D;
}

.container {
margin: auto;
padding: 0px;
width: 931px;
background-image: url(bilder/bg.gif);
position: relative;
}

.header {
width: 100%;
height: 163px;
background-image: url(bilder/header.jpg);
background-repeat: no-repeat;
}
 
Zuletzt bearbeitet:
Peinlich peinlich, das hab ich wohl irgendwann unbemerkt gelöscht. Aber daran liegt es nicht, hab es schon ausprobiert. Weißt du sonst noch was?
 
Hm, komisch.
Ich komme da jetzt auf die Schnelle auch nicht drauf.
Ich guck mir das morgen mal an...
 
Das Markierte in Deinen QT rein:

html:
Code: 
<body>
<div class="container">
<div class="header">[B]<br clear="all" />[/B]
     <div class="navi">
           <ul id="navlist">

Zusätzlich zu den vorhandenen Werten in das css:
Code: 
body{
        text-align:center; /*braucht der IE*/
 }
.container {
        text-align:left;
}

Dann musst Du aber noch etwas feilen,
weil die Navi z.B. nicht mehr exakt passt.

Ich hoffe, das nutzt Dir was...
 
Zuletzt bearbeitet:
Also was den störenden Abstand angeht: der ist jetzt weg. Aber die Navigation sitzt beim Firefox zu tief. Hab alles ausprobiert, aber es ist immer das gleiche Ergebnis. Besonders irritierend und unverständlich ist, warum andere absolut positionerte divs nicht verrutschen, die Navigation aber schon.
Das CSS sieht jetzt so aus:

body{
margin: 0px;
background-color: #0F0704;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 0px;
color: #87614F;
}
.container {
text-align:left;
margin: auto;
padding: 0px;
width: 931px;
background-image: url(bilder/bg_night.gif);
position: relative;
}


.navi {
width: 730px;
left: 100px;
top: 114px;
position: absolute;
margin: 0px;
padding: 0px;
}
 
Sind Deine Seiten grade Off?
Ich kriege eine Zeitüberschreitung.

Ich habe mal bei:
Code: 
.navi {
        width: 730px;
        left: 100px;
       [B] top: 90px;[/B]
        position: relative;
        margin: 0px;
        padding: 0px;
}
geschrieben...
 
Sind Deine Seiten grade Off?
Zum Vergrößern anklicken....
Nö, aber als ich gerade beim Hochladen war kam der Tierarzt.
Ich hab auch schon vorher alle möglichen relativen Werte ausprobiert. Es ist immer dasselbe: wenn es beim IE passt, ist es bei den anderen Browsern nach unten verschoben.
 
Habe jetzt rausgefunden, dass es definitiv am CSS für die Navigation liegt. Das div in dem die Navigation liegt ist in Ordnung, wenn ich da einen normalen Text reinschreibe, erscheint er in allen Browsern an der richtige Stelle. Sobald daraus eine "ul" wird, gibt es die Verschiebung.
Aber was ist bitte an folgendem CSS falsch, bzw. was könnte der Auslöser für die Positionsänderung sein?

#navlist ul {
margin: 0px;
padding: 0px;
}

#navlist li{
list-style-type: none;
display: inline;
}

#navlist a {
padding: 0 1px 0 1px;
}

#navlist a:link, #navlist a:visited {
color: #87614F;
text-decoration: none;
font-weight: bold;
}

#navlist a:hover{
color: #E8D0A4;
text-decoration: none;
font-weight: bold;
}
 
Ich habe nur das zusätzlich in Deine CSS geschrieben und es scheint Auswirkungen zu haben:

Code: 
ul{margin:0px}
 
dkdenz schrieb:
Ich habe nur das zusätzlich in Deine CSS geschrieben und es scheint Auswirkungen zu haben:

Code: 
ul{margin:0px}
Zum Vergrößern anklicken....
Das war es zwar noch nicht ganz, aber du hast mich auf die richtige Spur gebracht. So ist alles wie gewünscht:
Code: 
ul {
margin:0px;
padding: 0px;
}
Danke dkdenz (oder soll ich dich lieber ab jetzt css-Gott nennen?)
 
Bitte bitte... :)

Nein, bloß nicht, denn es gibt Leute mit viel mehr Können...

Ja, das mit margin + padding ist eigentlich Standard.

Normalerweise fügt man in eine CSS als erstes das hier ein:
Code: 
*{margin:0px;padding:0px;}

Das es aber bei älteren Browsern zu Problemen kommen kann,
hatte Womstar mir mal folgendes geraten (ebenfalls als erstes in die CSS):
Code: 
html, body, div, span, p, h1, h2, h3, ul, li, a, acronym, cite, table, td, th, form, label, input {
  margin:0px;
  padding:0px;
}

Wenn man das beherzigt, hat man damit erstmal keine Probleme mehr...
 
Im body hatte ich es ja auch.
Naja, so lang mach ich das ja noch nicht mit css. Ist zwar manchmal mühsamer als mit Tabellen, aber es lohnt sich auf jeden Fall. Und mit jeder fertigen Seite hat man sicher weniger Probleme.
 
Naja, nur im body hat ja nicht ausgereicht, wie Du gesehen hast.
Mach das in Zukunft, dann hat jedes Element automatisch alles auf 0...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben