Zur Navigation

padding-problem: ie misst irgednwie anders wie firefox/opera

1 Doris

Hallo,
ich brauch dringend Hilfe. Muss ein CD-Archiv als Prüfung machen und hab jetzt schonmal angefangen das Layout zu programmieren. Mach das auch alles schön mit XHTML und CSS. Nachdem Unmengen von Problemen aufgetaucht sind, bin ich dann irgendwann fast verzweifelt. Hab es aber doch geschafft alle zu lösen, bis auf eines.
Auf meiner Seite http://mars.iuk.hdm-stuttgart.de/~dh023/cd-archiv/muster.html soll unter der Zeile mit dem Alphabet ein Textkasten angeordnet werden, der einen bestimmten Abstand zur ABC-Zeile hat. Wenn ich das ganze mit margin angeben, dann habe ich beim IE einen Balken mit der falschen Hintergrundfarbe zwischen den beiden Elementen. Wenn ich es dann mit padding mache, misst der IE den Abstand von irgendeinem anderen Punkt wie Firefox und Opera. Für meine Prüfung muss die Seite aber auf Firefox und IE funktionieren.
Kann sich irgendjemand meinen Quelltext und die CSS-Datei (http://mars.iuk.hdm-stuttgart.de/~dh023/cd-archiv/style.css) angucken und vielleicht rausfinden, was ich falsch gemacht hab bzw ob das vielleicht einfach so ist und ich damit leben muss.

Ansonsten schöne Weihnachten und schonmal Danke für die Hilfe

24.12.2005 01:26

2 Jörg Kruse

Hallo Doris,

für die Box div#inhalt scheint von den Browsern eine unterschiedliche Höhe bemessen zu werden, damit hängen wahrscheinlich auch die beschriebenen Probleme in dem Bereich zusammen. Ursachen für die unterschiedlichen Höhen sehe ich zwei:

- Firefox und Opera schieben im Gegensatz zum Internet Explorer die Box div#inhalt in die obere Box hinein. Abhilfe schafft ein clear:both:

div#inhalt  {
background-color:#dcdcdc;
color:#006176;
width:665px;
margin:0;
padding:80px 0 0;
clear:both;
}

Ein weiterer Unterschied wird durch verschiedene Abstände der in div#inhalt enthaltenen Box verursacht. Wenn diese fest definiert werden, ist auch die Höhe der Gesamtbox bei allen Browsern wieder gleich:

<div id="inhalt">

	<div style="margin:0; padding:0">oifwjoiehfowe</div>

</div>

Ich hoffe, das hilft dir weiter, wenn nicht, sag bescheid

Ansonsten dir auch noch schöne Weihnachtstage :)

mfG Jörg

24.12.2005 02:18 | geändert: 24.12.2005 02:20

3 schimmi

Hallo Doris,

mein TIDY meldet mir eine andere Warnung:
Zeile 30 Zeichen 19 - Warnung: <ul> anchor "navi1" already defined:
<div id="navi1"><ul id="navi1">
2x die id="navi1" gefällt anscheinend nicht. Ist das denn so standardmäßig ok?

Gruß & Frohes Fest

schimmi

24.12.2005 07:27

4 Doris (Gast)

Hey, super. Das hat jetzt so wunderbar geklappt.
Komisch war nur, dass wenn ich das clear:both auch für die einzelnen navigationsleisten gemacht hab. weil für die gilt das ja eigentlich auch. dann hat es der ie wieder nicht hinbekommen mir den gleichen abstand zu zeigen wie der firefox oder opera. aber dann hab ichs einfach wieder gelöscht und solange es tut ists mir egal ^^
jetzt ist bloß ein neues problem aufgetaucht. werd aber jetzt erstmal selbst danach suchen und wenn ich dann wieder kurz vor der verwzweiflung bin, schreib ich hier nochmal rein.

Nochmal ein riesiges Dankeschön an euch 2!

Doris

24.12.2005 11:58

5 Doris (Gast)

Ok, ein komplett neues problem.
wir hatten in der vorlesung gelernt, dass man z.b. die navigationsleiste auch fest machen kann. mit position:fixed war das. Jetzt hab ich das mal probiert und dann passieren da lustige Dinge. also ertsmal stellt es ein problem dar, meine komplette navigation festzumachen (weil das ja sozusagen 4 zeilen sind), aber selbst wenn ich das dann irgendwie gehscafft hab und ich dann den darunter liegenden text scrolle, dann erscheint zwischen den einzelnen elementen immer wieder ein bisschen text. und der soll da aber nicht sein. also wenn ihr meine seite nochmal anschaut (adresse wie oben), dann seht ihr das ja selbst, wenn ihr scrollt.
hat irgendjemand von euch erfahrung mit diesem position fixed und weiß wie ich das angeben muss, dass sowas nicht passiert? Bzw welchen Elementen ich sagen muss, dass sie fixed sein sollen? Hab auch schon überlegt ob ich um meine komplette Navigation nochmal ein neues div machen soll und das dann fixe. aber dann verschwindet der komplette Text hinter meiner Navigation und da der IE das ganze gar nicht kennt, macht der dann da irgend einen spaß, wenn ich den text mit padding wieder richtig positioniere...

hoff mir kann nochmal jemand helfen...

24.12.2005 14:31

6 Jörg Kruse

Die beiden fixen divs müssen nahtlos aneinander schließen - deine Idee, anstelle der getrennten Fixierung einen übergeordneten div zu fixieren, halt ich für gut

aber dann verschwindet der komplette Text hinter meiner Navigation und da der IE das ganze gar nicht kennt, macht der dann da irgend einen spaß, wenn ich den text mit padding wieder richtig positioniere...

Aber mit zwei getrennten divs funktioniert das doch auch, wieso nicht mit einem div, welches zwei weitere enthält? Ich würde diesen Weg probieren

Und damit der gescrollte Text oben nicht rausfließt, solltest du die Abstände von body noch auf 0 setzen:

body { 
background-color:#006176;
text-align:center;
color:#dcdcdc;
font-style:normal;
font-family:Arial, sans-serif;
margin:0;
padding:0;
}

mfG Jörg

24.12.2005 16:00

7 Doris (Gast)

sodele... neues Jahr und somit auch neue Probleme... und noch mehr pech, mir hats grad meinen ganzen gehscriebene beitrag gelöscht, bevor ich ihn abschikcen konnte.

bin jetzt seit dem letzten mal schon weiter gekommen und hab jetzt auch schon mit den cd-seiten angefangen. wenn man jetzt unter cd-archiv - nach genre - rock&pop geht, kann man alle cd's finden, die da grad so drin sind. wollte dann die ganze seite mit internen ankern machen, damit es imemr schön zu den cd's mit dem anfangsbuchstaben springt. er springt auch immer wenn ich auf einen buchstaben klick, aber er springt immer zu weit. nehm mal an, dass das an meiner festgemachten navigationsleiste liegt, weil beim ie funktioniert es wunderbar.

hat irgednjemand irgendwelche ideen oder lösungen was ich dagegen machen kann? weil ich will schon mit der fetsen navigation weitermachen und die anker sollte ich wohl eigentlich auch einbauen.

achja, die css-dateien dazu sind:
mars.iuk.hdm-stuttgart.de/dh023/cd-archiv/archiv.css und
mars.iuk.hdm-stuttgart.de/dh023/cd-archiv/inhalt.css

nicht wundern, es hat sich seit dem letzten mal n bisschen was an meinen css-dateien geändert.

wär super nett, wenn sich bald jemand melden könnte...

bis dann und danke,
doris

02.01.2006 17:46

9 Doris (Gast)

Erstmal danke für die Seite! Zwar kann ich jetzt meine gestrichelten Linien nicht mehr machen, weil die ganzen divs siche jetzt irgendwie überlappen, aber das kann ich grad noch so verkraften, wenn die anker jetzt dafür tun.

bin jetzt dabei die einzelnen cd-seiten zu machen und will zu jeder cd ein hörbeispiel reinmachen. dazu hab ich auch schon ein bild von 2 noten. die titel zähl ich in einer liste auf und hinter einekm soll dann eben noch diese note erscheinen, die man dann anklicken kann. wenn ich das bild aber in die grafik einbaue, dann wird es entweder direkt hinter der aufzählungszahl angezeigt und wenn ich sagt Float:right dann wird es am ende von dem div angezeigt und nicht direkt hinter dem titel.

hat irgendjemand eine idee, was ich anders einstellen muss, damit das funktioniert?

http://mars.iuk.hdm-stuttgart.de/~dh023/cd-archiv/alben/avrillavigne_undermyskin_interpret.html

danke!
doris

03.01.2006 15:56

10 Jörg Kruse

Das Problem mit der Positionierung der Noten-Grafik hast du anscheinend schon gelöst? Oder soll der Abstand zwischen Titel und Note noch verringert werden?

03.01.2006 16:42