• Aktualisierte Forenregeln

    Eine kleine Änderung hat es im Bereich Forenregeln unter Abschnitt 2 gegeben, wo wir nun explizit darauf verweisen, dass Forenkommentare in unserer Heftrubrik Leserbriefe landen können.

    Forenregeln


    Vielen Dank

margin-top wird unterschiedlich interpretiert vom IE und FF

R

Rayne

Gast
Hallo :)

Ich habe ein Problem mit dem Befehl margin-top. Die Darstellung wird vom IE und FF unterschiedlich ausgegeben.

Das Stylesheet:

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:

]<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 :)
 
Kann man sich das mal online "live" anschauen? Falls nein, gibt es lauffähigen Code? (inkl. allem drum, drin und dran.)

Hast du schon einen CSS-Prolog?
Code: 
* {
margin: 0;
padding: 0;
}
Wo soll die Linie eigentlich sein? Oben oder unten?

Hat es ein Grund, wieso du "position:relative" bei allen Divisionen verwendest?
 
Code: 
/* 
 * IE Fixes
 */
 
 
*+html hr	{
	
	margin-top: -7px;
	margin-bottom: -7px;
	}

so ham wir den iebug bei hr's behoben. mit *+html und dann deinem Tag kannst du nur für den IE einen Tag definieren, das wird von FF und Opera nicht interpretiert. PS: Habe mir deinen Code gar nicht angeschaut, aber das sollte dir helfen.
 
klausbyte am 01.09.2008 01:13 schrieb:
Code: 
/* 
 * IE Fixes
 */
 
 
*+html hr	{
	
	margin-top: -7px;
	margin-bottom: -7px;
	}

so ham wir den iebug bei hr's behoben. mit *+html und dann deinem Tag kannst du nur für den IE einen Tag definieren, das wird von FF und Opera nicht interpretiert.
Zum Vergrößern anklicken....
Dies wird nur vom IE7 gelesen, den IE6 musst du so ansprechen, falls es ihn auch betrifft:
Code: 
* html ... {}
PS: Habe mir deinen Code gar nicht angeschaut, aber das sollte dir helfen.
Zum Vergrößern anklicken....
Ist nutzt ein Div für die "Linie", falls es nur für die Linie erstellt wurde, sollte er wirklich <hr> nehmen, wenn sie kein andere Element nutzen lässt, um per "border" die Linie zu erzeugen.
 
Rayne am 30.08.2008 21:22 schrieb:
Wo liegt der Fehler? Wie bekomme ich den Abstand identisch hin?
Zum Vergrößern anklicken....
Tabelle.
Erste Zeile die einzelnen Begriffe in einzelne Zellen setzen, je nach belieben mit identischer/variabler Zellenbreite und "center"ed und rechts und links je eine Zelle mehr, und darunter eine "colspan" Tabellenzeile mit einer <hr> drin - fertig. ;)
 
Worrel am 01.09.2008 11:57 schrieb:
Tabelle.
Erste Zeile die einzelnen Begriffe in einzelne Zellen setzen, je nach belieben mit identischer/variabler Zellenbreite und "center"ed und rechts und links je eine Zelle mehr, und darunter eine "colspan" Tabellenzeile mit einer <hr> drin - fertig. ;)
Zum Vergrößern anklicken....
Eine Tabelle ist hier allerdings ziemlich fehl am Platz. ;)

Passend wäre:
Code: 
<div id="navigation">
<ul>
<li><a href="">Link1</a></li>
<li><a href="">Link2</a></li>
<li><a href="">Link3</a></li>
</ul>
</div>
Dann kannst du #navigation "border-bottom:1px solid #000" geben und deine Links über "li a" wunderbar formatieren. ;)
 
Danke für eure Antworten, ich hab ganz vergessen, euch mitzuteilen, dass das Problem mittlerweile gelöst ist :)

So gehts:

#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;
}
 
Achja, manchmal hilft auch ein <div style="clear:both;"></div> Wenn der IE mal wieder nen Abastz drunter kommt wo keiner hin soll. Es hilft auch, die Leerzeichen zwischen Tags zu entfernen(!) - habe ich selber nicht glauben können.
Es hilft auch viele Sachen mit festen Größen für width und height anzugeben, und dann overflow:hidden; so verzieht sich nicht euer ganzes layout wenn der Nutzer eine andere DPI Einstellung hat - weil dann Textinhalte unterschiedlich groß (im Vergleich zwischen zwei Systemen) dargestellt werden.
 
Bevor klausbyte noch wunde Finger bekommt, hier sind Bugs vom IE inkl. Lösung: http://www.positioniseverything.net/explorer.html aufgelistet. ;)

@Rayne: Wenn deine Navigation-Links Text-Links sind, dann würde ich keine feste Höhe angeben. Denn dann kommt es zu Problemen, wenn ein Besucher deiner Seite mit größer Schrift als Standard unterwegs ist.
 
Leertaste am 01.09.2008 12:01 schrieb:
Worrel am 01.09.2008 11:57 schrieb:
Tabelle.
Erste Zeile die einzelnen Begriffe in einzelne Zellen setzen, je nach belieben mit identischer/variabler Zellenbreite und "center"ed und rechts und links je eine Zelle mehr, und darunter eine "colspan" Tabellenzeile mit einer <hr> drin - fertig. ;)
Zum Vergrößern anklicken....
Eine Tabelle ist hier allerdings ziemlich fehl am Platz. ;)
Zum Vergrößern anklicken....
... weil ?

Passend wäre:
Code: 
<div id="navigation">
<ul>
<li><a href="">Link1</a></li>
<li><a href="">Link2</a></li>
<li><a href="">Link3</a></li>
</ul>
</div>
Dann kannst du #navigation "border-bottom:1px solid #000" geben und deine Links über "li a" wunderbar formatieren. ;)
Zum Vergrößern anklicken....
... und wofür nun zwanghaft das <li> einbauen, wenn's doch mit einer wohlformatierten Tabelle genauso gut geht ? :confused:
 
Worrel am 01.09.2008 14:10 schrieb:
... und wofür nun zwanghaft das <li> einbauen, wenn's doch mit einer wohlformatierten Tabelle genauso gut geht ? :confused:
Zum Vergrößern anklicken....
Also ich weiß ja nicht, wie du das handhabst, aber in Tabellen schreibe ich zB Messwerte und andere tabellarisch aufzubereitenden Daten. Aber doch keine 5 Links, die in einer Reihe liegen sollen. :o
 
skicu am 01.09.2008 14:34 schrieb:
Worrel am 01.09.2008 14:10 schrieb:
... und wofür nun zwanghaft das <li> einbauen, wenn's doch mit einer wohlformatierten Tabelle genauso gut geht ? :confused:
Zum Vergrößern anklicken....
Also ich weiß ja nicht, wie du das handhabst, aber in Tabellen schreibe ich zB Messwerte und andere tabellarisch aufzubereitenden Daten. Aber doch keine 5 Links, die in einer Reihe liegen sollen. :o
Zum Vergrößern anklicken....
Hm, stimmt, unbedingt ne Tabelle muß es auch nicht sein, aber dann reichen auch hintereinander aufgereihte Links, <li>s sind genauso wenig von Nöten :-D

Und ich entwerfe mein Grundlayout immer in Tabellen, Alleine, damit die Seite bei eventueller Widescreenauflösung nicht genauso aussieht, aber links oben in der Ecke pappt. ;)

So hab ich zB bei meiner aktuellsten Seite ganz oben eine Fensterbreite Tabelle, die links das Menü (ein- oder zweizeilig, das richtet sich noch nach dem Inhalt (ist noch nicht komplett)) und in der rechten Tabellenzelle das Logo, so daß alleine durch diese zwei Elemente schon mal der Anschein geweckt wird, die ganze Seitenbreite werde genutzt, auch wenn der Inhalt darunter nicht ganz so viel Platz in der Breite beansprucht.
 
Worrel am 01.09.2008 14:45 schrieb:
Hm, stimmt, unbedingt ne Tabelle muß es auch nicht sein, aber dann reichen auch hintereinander aufgereihte Links, <li>s sind genauso wenig von Nöten :-D

Und ich entwerfe mein Grundlayout immer in Tabellen, Alleine, damit die Seite bei eventueller Widescreenauflösung nicht genauso aussieht, aber links oben in der Ecke pappt. ;)

So hab ich zB bei meiner aktuellsten Seite ganz oben eine Fensterbreite Tabelle, die links das Menü (ein- oder zweizeilig, das richtet sich noch nach dem Inhalt (ist noch nicht komplett)) und in der rechten Tabellenzelle das Logo, so daß alleine durch diese zwei Elemente schon mal der Anschein geweckt wird, die ganze Seitenbreite werde genutzt, auch wenn der Inhalt darunter nicht ganz so viel Platz in der Breite beansprucht.
Zum Vergrößern anklicken....
Das nennt sich Tabellenlayout und wird von Fachartikeln seit Jahren massiv kritisiert. *g*
Selbst heise.de hat sich übrigens vor einigen Tagen mit <div>'s neu aufgestellt. :)
 
skicu am 01.09.2008 15:12 schrieb:
Das nennt sich Tabellenlayout und wird von Fachartikeln seit Jahren massiv kritisiert. *g*
Selbst heise.de hat sich übrigens vor einigen Tagen mit <div>'s neu aufgestellt. :)
Zum Vergrößern anklicken....
Und das Tabellenlayout ist schlecht, weil ...?
 
Worrel am 01.09.2008 14:45 schrieb:
Hm, stimmt, unbedingt ne Tabelle muß es auch nicht sein, aber dann reichen auch hintereinander aufgereihte Links, <li>s sind genauso wenig von Nöten :-D
Zum Vergrößern anklicken....
Die gehören zu einer Liste und die Links sind nunmal eine Aufzählung., also nehme ich eine Liste. Genauso wie ich für Überschriften h1, h2, h3 usw. verwende. ;)
Und ich entwerfe mein Grundlayout immer in Tabellen, Alleine, damit die Seite bei eventueller Widescreenauflösung nicht genauso aussieht, aber links oben in der Ecke pappt. ;)
Zum Vergrößern anklicken....
Das ist die alte Technik. Damals war man froh endlich mehr Freiheiten beim Layout zu haben und hat Tabellen genutzt. Heute hat man eine gute CSS Unterstützung der Browser und die Vorteile von CSS fürs Layout sind mehr als offentsichtlich.

@Worrel: http://www.vorsprungdurchwebstandards.de/theory/retro-coding/
http://www.css4you.de/wslayout1/index.html
http://www.webkrauts.de/2006/09/01/webseiten-sind-keine-gemaelde/

Muss allerdings immer bedenken, auch die aktuell Technik ist nicht optimal.

Allerdings gibt es afaik keinen wirklichen Grund noch auf Tabellen für Layoutzwecke zu setzen.
 
Worrel am 01.09.2008 15:24 schrieb:
Und das Tabellenlayout ist schlecht, weil ...?
Zum Vergrößern anklicken....
Das möchte ich anders beantworten:
Das Box Layout Modell ist besser, weil...
siehe: http://www.antikoerperchen.de/howto/75/css-contra-tabellen-layout-vorteile-und-nachteile-von-div-und-table.html

Ich sage ja nicht, dass man alle Webseiten mit einem Tabellenlayout ächten sollte und die Boxen das einzig wahre sind - aber im eigenen Interesse sollte man sich als HTML Schreiberling so langsam mal auf das Box Modell einlassen, da es doch einige Vorteile bietet.
 
skicu am 01.09.2008 15:33 schrieb:
Worrel am 01.09.2008 15:24 schrieb:
Und das Tabellenlayout ist schlecht, weil ...?
Zum Vergrößern anklicken....
Das möchte ich anders beantworten:
Das Box Layout Modell ist besser, weil...
siehe: http://www.antikoerperchen.de/howto/75/css-contra-tabellen-layout-vorteile-und-nachteile-von-div-und-table.html

Ich sage ja nicht, dass man alle Webseiten mit einem Tabellenlayout ächten sollte und die Boxen das einzig wahre sind - aber im eigenen Interesse sollte man sich als HTML Schreiberling so langsam mal auf das Box Modell einlassen, da es doch einige Vorteile bietet.
Zum Vergrößern anklicken....
Also ich hab das jetzt mal quergelesen (ca. 90% des Inhaltes erfaßt :-D ), habe aber kein wirkliches Argument gegen die von mir verwendete Tabelle (s.o.) gefunden und ich verstehe auch nicht, was daran schlimm sein sollte, wenn ich eine Tabelle zur groben Layouteinteilung nutze -auch wenn sie nicht dafür gedacht sind: alle Browser interpretieren sie, wenn man sie fürs Layout verwendet.


Zum anderen hätte ich da direkt eine Frage:
Ich habe eine andere Seite gemacht, auf der ich einen Rahmen um den Inhaltsblock in der Mitte gemacht habe.

Mit einer Tabelle; also:
Rahmenstück links oben; horizontaler Balken; Rahmenstück rechts oben;
vertikaler Balken; Menü; Inhalt; vertikaler Balken;
Rahmenstück links unten; horizontaler Balken; Rahmenstück rechts unten;

und bei verschieden breitem Browserfenster wird nun der Inhalt immer anders dageboten - immer auf die Breite des Browserfensters angepaßt.

a) Was ist daran schlecht?
b) Wie soll man das mit <div>s und CSS hinkriegen?
 
Ich möchte eure Diskussion ja nicht stören, aber es hat sich ein neues Problem aufgetan, bei dem ihr mir helfen könntet ;)

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:

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:

<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?
 
Kannst du die Testseite mal online stellen? Dann ist es wesentlich effektiver und einfacher dir zu helfen. ;)

Hast du nun einen CSS-Prolog?
 
Einloggen o. Registrieren zum Antworten.

Ähnliche Themen

Worrel
Webseiten-Styles anpassen (Amino)
Antworten
13
Aufrufe
2K
Worrel
Worrel
F
großes dringendes prob ( html/css)
Antworten
6
Aufrufe
552
flashback830
F
R
unterschiedliche Darstellung im IE7 und FF3 und weitere Probleme
Antworten
0
Aufrufe
476
Rayne
R
O
Navigationsleiste ändern
Antworten
5
Aufrufe
467
Pasdan
P
R
DIV lässt sich nicht im Firefox UND Internet Explorer korrekt positionieren
Antworten
4
Aufrufe
478
Rayne
R
Oben Unten
Zurück