| Autor |
Nachricht |
Rayne
Threadersteller
Dabei seit: 29.01.2006
Ort: Berlin/Brandenburg
Alter: -
Geschlecht: 
|
Verfasst Sa 30.08.2008 21:26
Titel margin-top wird unterschiedlich interpretiert vom IE und FF |
  |
|
Hallo 
Ich habe ein Problem mit dem Befehl margin-top. Die Darstellung wird vom IE und FF unterschiedlich ausgegeben.
Das Stylesheet:
| Code: | Body {
background: #FFFFFF;
color: #000000;
margin: 0px;
height: 100%;
}
#Name-Hauptseite {
position: relative;
width: 357px;
height: 24px;
margin-left:auto;
margin-right:auto;
margin-top:50px;
background: url(Bilder/Name.gif) no-repeat;
}
#Navigation {
position: relative;
width: 590px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
}
#Linie {
position: relative;
width: 640px;
margin-left:auto;
margin-right:auto;
border-top: solid 1px #137b82;
}
a.Person {
float: left;
display:block;
width: 136px;
height: 11px;
background: url(Bilder/Person.gif) no-repeat;
}
a.Person:hover {
background: url(Bilder/Person-over.gif) no-repeat;
text-decoration: none;
}
a.Lebenslauf {
float: left;
display:block;
width: 83px;
height: 11px;
margin-left:30px;
background: url(Bilder/Lebenslauf.gif) no-repeat;
}
a.Lebenslauf:hover {
background: url(Bilder/Lebenslauf-over.gif) no-repeat;
text-decoration: none;
}
a.Zeugnisse {
float: left;
display:block;
width: 74px;
height: 11px;
margin-left:30px;
background: url(Bilder/Zeugnisse.gif) no-repeat;
}
a.Zeugnisse:hover {
background: url(Bilder/Zeugnisse-over.gif) no-repeat;
text-decoration: none;
}
a.Arbeitsproben {
float: left;
display:block;
width: 111px;
height: 11px;
margin-left:30px;
background: url(Bilder/Arbeitsproben.gif) no-repeat;
}
a.Arbeitsproben:hover {
background: url(Bilder/Arbeitsproben-over.gif) no-repeat;
text-decoration: none;
}
a.Kontakt {
float: left;
display:block;
width: 66px;
height: 11px;
margin-left:30px;
background: url(Bilder/Kontakt.gif) no-repeat;
}
a.Kontakt:hover {
background: url(Bilder/Kontakt-over.gif) no-repeat;
text-decoration: none;
} |
Der HTML-Code:
| Code: | <body>
<div id="Name-Hauptseite"></div>
<div id="Navigation">
<a href="#" class="Person"> </a>
<a href="#" class="Lebenslauf"> </a>
<a href="#" class="Zeugnisse"> </a>
<a href="#" class="Arbeitsproben"> </a>
<a href="#" class="Kontakt"> </a>
</div>
<div id="Linie"></div>
</body> |
So, im Firefox (3) befindet sich die Linie nun direkt über der Navigation, im IE (7) genau darunter. Stelle ich nun einen margin-top-Wert ein, befindet sich die Linie natürlich dementsprechend unterschiedlich weit unter der Navi 
So siehts aus:
IE:
http://www.sky-divezone.de/Other/Linie-IE.jpg
FF:
http://www.sky-divezone.de/Other/Linie-FF.jpg
Wo liegt der Fehler? Wie bekomme ich den Abstand identisch hin?
Ich danke für eure Hilfe
|
|
| |
   |
 |
| |
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Sa 30.08.2008 21:40
Titel
|
|
|
Ich habe es mir gar nicht richtig angesehen, aber wenn du eine Linie darstellen möchtest verzichte
auf ein zusätzliches Division Element sondern nutze das dafür vorgehesen Horitzontal Rule <hr />.
Das Element versiehst du dann noch mit clear Eigenschaften und ich schätze dann hat sich dein
Problem auch erledigt. Anstatt dem zusätzlichem hr Element könntest du auch einfach dein Div mit
welches die Navigation umschließt mit einer border-bottom Eigenschaft versehen. Und mach dich
mal über Google bezüglich "CSS Sprites" schlau 
Anstatt Grafiken zu posten wäre ein Link zu einer Demo besser.
Zuletzt bearbeitet von m am Sa 30.08.2008 21:45, insgesamt 3-mal bearbeitet
|
|
| |
|
|
Astro
Dabei seit: 14.04.2003
Ort: Exildeutscher in Tirol
Alter: 36
Geschlecht:
|
Verfasst Sa 30.08.2008 21:40
Titel
|
|
|
|
Der Fehler liegt im Browser. Kürzlich gab's hier irgendwo dafür eine Lösung. Musst mal die Suche benutzen.
|
|
| |
|
|
Rayne
Threadersteller
Dabei seit: 29.01.2006
Ort: Berlin/Brandenburg
Alter: -
Geschlecht:
|
Verfasst Sa 30.08.2008 22:00
Titel
|
|
|
So, nun gehts
| Code: | #Navigation {
position: relative;
width: 590px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
height:11px;
}
#Linie {
position: relative;
width: 640px;
margin-left:auto;
margin-right:auto;
border-top: solid 1px #137b82;
margin-top: 30px;
clear: left;
} |
Zuletzt bearbeitet von Rayne am Sa 30.08.2008 22:09, insgesamt 1-mal bearbeitet
|
|
| |
|
|
Rayne
Threadersteller
Dabei seit: 29.01.2006
Ort: Berlin/Brandenburg
Alter: -
Geschlecht:
|
Verfasst Mo 01.09.2008 15:58
Titel
|
|
|
Wie kann es auch anders sein, gibt es mittlerweile wieder ein kleines Problem
Es geht wieder um unterschiedliche Abstände im FF und IE, finde den Fehler aber einfach nicht.
So siehts aus:
FF:
http://www.sky-divezone.de/Other/Rubrik-FF.jpg
IE:
http://www.sky-divezone.de/Other/Rubrik-IE.jpg
Im Firefox ist der Abstand der Überschrift zur Linie oben und unten nahezu identisch, so wies sein soll. im IE ist der Abstand nach oben aber weitaus größer, das sieht natürlich blöd aus.
Stylesheet:
| Code: | Body {
/* -------------------------------------------------------------------------------------> Farben */
background: #FFFFFF;
color: #828482;
/* -------------------------------------------------------------------------------------> Schrift */
font-family: Arial;
font-size: 0.9em;
/* -------------------------------------------------------------------------------------> Abstände */
margin: 0px;
height: 100%;
}
/* -------------------------------------------------------------------------------------------------------------------> Navigation */
#Navigation {
position: relative;
width: 590px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
height:11px;
}
a.Person {
float: left;
display:block;
width: 136px;
height: 11px;
background: url(Bilder/Person.gif) no-repeat;
}
a.Person:hover {
background: url(Bilder/Person-over.gif) no-repeat;
text-decoration: none;
}
a.Lebenslauf {
float: left;
display:block;
width: 83px;
height: 11px;
margin-left:30px;
background: url(Bilder/Lebenslauf.gif) no-repeat;
}
a.Lebenslauf:hover {
background: url(Bilder/Lebenslauf-over.gif) no-repeat;
text-decoration: none;
}
a.Zeugnisse {
float: left;
display:block;
width: 74px;
height: 11px;
margin-left:30px;
background: url(Bilder/Zeugnisse.gif) no-repeat;
}
a.Zeugnisse:hover {
background: url(Bilder/Zeugnisse-over.gif) no-repeat;
text-decoration: none;
}
a.Arbeitsproben {
float: left;
display:block;
width: 111px;
height: 11px;
margin-left:30px;
background: url(Bilder/Arbeitsproben.gif) no-repeat;
}
a.Arbeitsproben:hover {
background: url(Bilder/Arbeitsproben-over.gif) no-repeat;
text-decoration: none;
}
a.Kontakt {
float: left;
display:block;
width: 66px;
height: 11px;
margin-left:30px;
background: url(Bilder/Kontakt.gif) no-repeat;
}
a.Kontakt:hover {
background: url(Bilder/Kontakt-over.gif) no-repeat;
text-decoration: none;
}
/* -------------------------------------------------------------------------------------------------------------------> Trennlinie */
#Linie {
position: relative;
width: 640px;
margin-left:auto;
margin-right:auto;
border-top: solid 1px #137b82;
margin-top: 30px;
clear: left;
}
/* -------------------------------------------------------------------------------------------------------------------> Rubrik */
#Rubrik {
position: relative;
width: 590px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
font-family: Georgia;
font-size: 2.8em;
color: #137b82;
}
/* -------------------------------------------------------------------------------------------------------------------> Trennlinie 2 */
#Linie2 {
position: relative;
width: 640px;
margin-left:auto;
margin-right:auto;
border-top: solid 1px #137b82;
margin-top: 40px;
}
/* -------------------------------------------------------------------------------------------------------------------> Inhalt */
#Inhalt {
position: relative;
width: 590px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
height:auto;
line-height: 1.4em;
word-spacing: 0.3em;
} |
HTML:
| Code: | <body>
<div id="Name-Hauptseite"></div>
<div id="Navigation">
<a href="#" class="Person"> </a>
<a href="#" class="Lebenslauf"> </a>
<a href="#" class="Zeugnisse"> </a>
<a href="#" class="Arbeitsproben"> </a>
<a href="#" class="Kontakt"> </a>
</div>
<div id="Linie"></div>
<div id="Rubrik">Lernen Sie mich kennen!</div>
<div id="Linie2"></div> |
Ist mir ein Fehler unterlaufen?
|
|
| |
|
|
therapiekind
Dabei seit: 14.03.2006
Ort: In deinem Kopf
Alter: -
Geschlecht: -
|
Verfasst Mo 01.09.2008 23:14
Titel
|
|
|
|
Kleiner Antwort-Performance-Booster: Stell dein Zeug irgendwo online. Kein halbwegs normaler (lies: fauler) Mediengestalter wird sich eingehender mit deinen Problemen beschäftigen, wenn du dein Markup/CSS/Skript mit 15.000 Zeilen hier einfügst.
|
|
| |
|
|
Rayne
Threadersteller
Dabei seit: 29.01.2006
Ort: Berlin/Brandenburg
Alter: -
Geschlecht:
|
Verfasst Mo 01.09.2008 23:43
Titel
|
|
|
Was siehst du mehr auf einer Demo-Website, als auf den Screenshots? Da ist nicht mehr zu sehen. Und um zu helfen, kommt man nicht drumrum, sich den 15.000-Zeilen-Code anzusehen.
Das Problem ist mittlerweile gelöst.
|
|
| |
|
|
aroundthefur
Dabei seit: 16.07.2007
Ort: no matter where we go!
Alter: -
Geschlecht:
|
Verfasst Di 02.09.2008 08:51
Titel
|
|
|
du solltest den quelltext aber trotzdem überdenken. der is sehr unvorteilhaft.
du solltest z.b. nich jeder linie eine id zuteilen.
ein paar tips:
1. lass die #linie und #linie2 weg und geb der "#rubrik"
z.B. einen border oben und unten. so sparst du bestimmt 20 zeilen code;)
2. und navigation ohne bilder -> weitere 40 zeilen weniger
3. navigation gehört in eine liste :>
4. die überschrift am besten h1 :>
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
margin-top ie und mozilla
margin-top + ie7?
margin-top und <li> Problem
margin-top im internet explorer
CSS Problem mit Margin nd top
CSS-Problem: margin-top funktioniert nicht
|
|
Willkommen auf dem Portal für Mediengestalter
