Netscape position:absolute und andere Probleme (dl)
0 
Gernot Back
0 0 0 
mary
Netscape position:absolute und andere Probleme (dl)
Hallo!
Ich versuche seit Wochen, eine Tabelle (für eine hierarchische Nummerierung mit "hängendem" Einzug) durch CSS zu ersetzen.
Leider geht's immer in irgendeinem Browser nicht.
Der erste Versuch war mit geschützten Leerzeichen, klappte in Mozilla und Netscape, nicht aber im IE.
Der zweite Versuch war mit span-Elementen, klappte auch im IE nicht.
(Siehe http://forum.de.selfhtml.org/archiv/2006/5/t129209/#m835343)
Ich glaube inzwischen, dass hier das Problem darin lag, dass das div-Element, in dem sich alles befand, ein padding-left hat... Allerdings hilft mir diese (vermeintliche) Erkenntnis bisher nicht recht viel weiter.
Der dritte Versuch als Definitionsliste (def. die eleganteste Lösung, danke Gunnar!) klappt nun in Netscape nicht, da die als position:absolute definierten Elemente nicht mitscrollen. (Generell funktioniert das Scrollrad in Netscape nicht, aber damit habe ich mich schon fast abgefunden...)
Diesen Versuch findet man hier:
http://www.uni-regensburg.de/Fakultaeten/phil_Fak_IV/Anglistik/SpW/Staff/Schneider/publications.htm
Sieht jemand eine Möglichkeit, wie ich die absolut positionierten Elemente (die Nummerierung!!!) in Netscape zum Scrollen bringen kann?
Welche Möglichkeit bleibt sonst noch?
Viele Grüße von der langsam verzweifelten Mary, die eigentlich ganz andere Sachen zu tun hätte als Internet-Seiten zu basteln... ;-)
PS: Insgesamt ist das Layout adaptiert von hier: http://www.cssplay.co.uk/layouts/basics2.html
-
Hallo Mary,
Sieht jemand eine Möglichkeit, wie ich die absolut positionierten Elemente (die Nummerierung!!!) in Netscape zum Scrollen bringen kann?
Ich würde mal versuchen, eigens für Netscape 7 bei den absolut positionierten Elementen auch top-Werte zu setzen und nicht nur solche für left.
Gruß Gernot
-
Hallo,
(Siehe http://forum.de.selfhtml.org/archiv/2006/5/t129209/#m835343)
Ich glaube inzwischen, dass hier das Problem darin lag, dass das div-Element, in dem sich alles befand, ein padding-left hat... Allerdings hilft mir diese (vermeintliche) Erkenntnis bisher nicht recht viel weiter.Das kann ich so nicht bestätigen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Titel</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <style> <!-- #numeration {padding-left:30ex;} span.number {float:left; margin:0; padding:0;} span.marker {float:left; margin:0; padding:0; margin-left:2ex;} p.numtext {margin:0; padding:0; margin-left:5ex; margin-bottom:1ex;} --> </style> <!--[if IE]> <style> p.numtext {height:1ex;} /*3px-Bug eliminieren*/ </style> <![endif]--> </head> <body> <div id="numeration"> <span class="number">1</span> <p class="numtext">Monographs</p> <span class="number">1.1</span> <p class="numtext">Morphologische und syntaktische Variablen im amerikanischen Early Black English. Frankfurt am Main, Bern: Peter Lang 1981. (Dissertation, Bamberg 1981)</p> <span class="marker">-></span> <p class="numtext">Reviewed in: English World-Wide 3 (1982), pp. 106-107 (K. Wächtler); Anglia 101 (1983), pp. 196-198 (U. Mantell-Oomen); Zeitschrift für Dialektologie und Linguistik 52 (1985), pp. 244-245 (M. Görlach); Amerikastudien / American Studies 30 (1985), pp. 127-128 (W.-D. Bald); American Speech 61 (1986), pp. 153-159 (J. Brewer).</p> <span class="number">1.2</span> <p class="numtext">A Bibliography of Writings on Varieties of English, 1965 - 1983. (with W. Viereck and M. Görlach) Amsterdam, Philadelphia: Benjamins 1984.</p> <span class="marker">-></span> <p class="numtext">Reviewed in: American Speech 60 (1985), pp. 88 (R.R. Butters); Zeitschrift für Anglistik und Amerikanistik 33 (1985), pp. 284-285 (K. Hansen); American Reference Books Annual (1985), pp. 406 (L. Zgusta); Zeitschrift für Dialektologie und Linguistik 52 (1985), pp. 404-406 (B. Carstensen); Indogermanische Forschungen 90 (1985), pp. 342-343 (L. Todd); World Englishes 4 (1985), pp. 381-383 (J. Holm); Language 62 (1986), pp. 213 (J.T. Jensen); Journal of English Linguistics 19 (1986), pp. 135-136 (J.B. McMillan); English World-Wide 7 (1986), pp. 132-135 (B. Kachru); Études Anglaises 39 (1986), pp. 195 (G.-J. Forgue); IRAL 25 (1987), pp. 78-79 (D. Nehls); Revue Québécoise de Linguistique Théoretique et Appliquée 6:2 (1987), pp. 153-158 (R. Fournier); Lore and Language 7 (1988), pp. 136-138 (J.M. Kirk).</p> </div> </body> </html>Die DL/DT/DD-Liste war ja gut gemeint. Aber mit den zusätzlichen Anforderungen Nummerierung und Marker wird es doch sehr komplex, zumal Du ja die SPAN-Elemente trotzdem noch zusätzlich brauchst.
viele Grüße
Axel
-
Hallo Axel,
vielen Dank für Deine Hilfe!!! Aber ich krieg's einfach trotzdem nicht hin. Ich möchte, dass die Absätze mit Pfeil eine kleinere Schriftart und eine kleinere Zeilenhöhe haben. Das geht auch noch. Aber sobald ich noch margin-tops einfüge, sind die Zahlen / Pfeile nicht mehr auf derselben Höhe. Ich hätte gerne 12px vor den Zahlen-Absätzen und nur 6 vor den Pfeilabsätzen. (Wenn ich das richtig sehe, setzt auch nur der IE diese Abstände richtig um...) Es klappt auch dann nicht, wenn ich den spams dieselben margin-tops zuweise. Ich verstehe es einfach nicht.
Und es ist auch soooo ärgerlich, weil die Defintionslisten-Variante ja sogar im IE perfekt funktionierte, normalerweise macht ja IMMER der IE die Probleme und nicht Netscape.
Wenn die spam-Methode super funktionieren würde, wäre das wirklich toll, weil ich dann alle "Tabellen" so aufbauen könnte.
Hast Du noch einen Tipp parat? Habe ich noch irgendwo einen Fehler oder geht's so eben doch auch nicht?
Ich muss alles immer in meinem Layout ausprobieren, probiere ich nur das "Nummerierungsgerüst", funktionierts. In meinem Layout sind die Zahlen aber verschoben... Außerdem ist die Kursivsetzung futsch. Das gibt es doch einfach alles nicht. :-(((( Ich bin soooooo kurz vor einer Lösung mit Tabelle. Aber es ärgert mich wirklich enorm, dass ich das nicht hinbekomme. Aber wenn ich an die TAGE denke, die ich jetzt schon rumprobiere... OH JE. Hier ist der aktuelle Versuch:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../../Layout/screen.css"></link>
<title>University of Regensburg - English Linguistics: Prof. Dr. Edgar W. Schneider</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"></meta> <meta name="keywords" lang="de" content="Universität Regensburg, Englisch, Sprachwissenschaft, Schneider, Prof. Schneider, Edgar Schneider, Edgar W. Schneider, Publikationen, Bücher, Aufsätze, Artikel"></meta> <meta name="keywords" lang="en" content="University of Regensburg, English, linguistics, Schneider, Prof. Schneider, Edgar Schneider, Edgar W. Schneider, publications, books, essays, articles"></meta>
<script type="text/javascript" language="JavaScript1.2" src="../../Layout/Navigation/stmenu.js"></script>
<style> <!-- #numeration {padding-left:0px;} span.number {float:left; margin:0; padding:0; font-size:14px;} span.marker {float:left; margin:0; padding:0; margin-left:20px; font-size:13px} p.numtext {margin-top:12px; margin-bottom:1ex; margin-left:50px; padding:0; font-size:14px} p.revtext {margin-top:6px; margin-left:50px; margin-bottom:1ex; padding:0; font-size:13px; line-height:115%} --> </style> <!--[if IE]> <style> p.numtext {height:1ex;} /3px-Bug eliminieren/ p.revtext {height:1ex;} /3px-Bug eliminieren/ </style> <![endif]-->
</head> <body>
<div id="header"> <div id="title"> <div id="siegel"> </div> <div id="dep"> <p class="department"> <a target="_blank" href="http://www.uni-regensburg.de">University of Regensburg</a></p> <p class="department"> <a target="_blank" href="http://www.uni-regensburg.de/Fakultaeten/phil_Fak_IV/Anglistik/index.htm"> Department of English<br />and American Studies</a></p> </div> <div id="sitemap"><a target="_blank" href="sitemap.htm">Sitemap</a> </div> <h1>English Linguistics</h1> <h2><a href="home.htm">Prof. Dr. Edgar W. Schneider</a></h2> </div> <div id="menu"><script type="text/javascript" language="JavaScript1.2" src="Menu/schneider-menu-andersrum-neu.js"></script> </div> </div>
<div id="navigation"> <script type="text/javascript" language="JavaScript1.2" src="../../Layout/Navigation/navigation-2.js"></script> </div>
<div id="content"> <div id="pad"></div> <div id="numeration"> <p class="numtext">Monographs</p>
<span class="number">1.1</span> <p class="numtext">Morphologische und syntaktische Variablen im amerikanischen Early Black English. Frankfurt am Main, Bern: Peter Lang 1981. (Dissertation, Bamberg 1981)</p>
<span class="marker">-></span> <p class="revtext">Reviewed in: English World-Wide 3 (1982), pp. 106-107 (K. Wächtler); Anglia 101 (1983), pp. 196-198 (U. Mantell-Oomen); Zeitschrift für Dialektologie und Linguistik 52 (1985), pp. 244-245 (M. Görlach); Amerikastudien / American Studies 30 (1985), pp. 127-128 (W.-D. Bald); American Speech 61 (1986), pp. 153-159 (J. Brewer).</p>
<span class="number">1.2</span> <p class="numtext">A Bibliography of Writings on Varieties of English, 1965 - 1983. (with W. Viereck and M. Görlach) Amsterdam, Philadelphia: Benjamins 1984.</p>
<span class="marker">-></span> <p class="revtext">Reviewed in: American Speech 60 (1985), pp. 88 (R.R. Butters); Zeitschrift für Anglistik und Amerikanistik 33 (1985), pp. 284-285 (K. Hansen); American Reference Books Annual (1985), pp. 406 (L. Zgusta); Zeitschrift für Dialektologie und Linguistik 52 (1985), pp. 404-406 (B. Carstensen); Indogermanische Forschungen 90 (1985), pp. 342-343 (L. Todd); World Englishes 4 (1985), pp. 381-383 (J. Holm); Language 62 (1986), pp. 213 (J.T. Jensen); Journal of English Linguistics 19 (1986), pp. 135-136 (J.B. McMillan); English World-Wide 7 (1986), pp. 132-135 (B. Kachru); Études Anglaises 39 (1986), pp. 195 (G.-J. Forgue); IRAL 25 (1987), pp. 78-79 (D. Nehls); Revue Québécoise de Linguistique Théoretique et Appliquée 6:2 (1987), pp. 153-158 (R. Fournier); Lore and Language 7 (1988), pp. 136-138 (J.M. Kirk).</p> <span class="number">1</span> <p class="numtext">Monographs</p>
<span class="number">1.1</span> <p class="numtext">Morphologische und syntaktische Variablen im amerikanischen Early Black English. Frankfurt am Main, Bern: Peter Lang 1981. (Dissertation, Bamberg 1981)</p>
<span class="marker">-></span> <p class="revtext">Reviewed in: English World-Wide 3 (1982), pp. 106-107 (K. Wächtler); Anglia 101 (1983), pp. 196-198 (U. Mantell-Oomen); Zeitschrift für Dialektologie und Linguistik 52 (1985), pp. 244-245 (M. Görlach); Amerikastudien / American Studies 30 (1985), pp. 127-128 (W.-D. Bald); American Speech 61 (1986), pp. 153-159 (J. Brewer).</p>
<span class="number">1.2</span> <p class="numtext">A Bibliography of Writings on Varieties of English, 1965 - 1983. (with W. Viereck and M. Görlach) Amsterdam, Philadelphia: Benjamins 1984.</p>
<span class="marker">-></span> <p class="revtext">Reviewed in: American Speech 60 (1985), pp. 88 (R.R. Butters); Zeitschrift für Anglistik und Amerikanistik 33 (1985), pp. 284-285 (K. Hansen); American Reference Books Annual (1985), pp. 406 (L. Zgusta); Zeitschrift für Dialektologie und Linguistik 52 (1985), pp. 404-406 (B. Carstensen); Indogermanische Forschungen 90 (1985), pp. 342-343 (L. Todd); World Englishes 4 (1985), pp. 381-383 (J. Holm); Language 62 (1986), pp. 213 (J.T. Jensen); Journal of English Linguistics 19 (1986), pp. 135-136 (J.B. McMillan); English World-Wide 7 (1986), pp. 132-135 (B. Kachru); Études Anglaises 39 (1986), pp. 195 (G.-J. Forgue); IRAL 25 (1987), pp. 78-79 (D. Nehls); Revue Québécoise de Linguistique Théoretique et Appliquée 6:2 (1987), pp. 153-158 (R. Fournier); Lore and Language 7 (1988), pp. 136-138 (J.M. Kirk).</p>
</div> </div> </body> </html>
Das ist mein Stylesheet:
html { height:100%; max-height:100%; padding:0; margin:0; border:0;
/* hide overflow:hidden from IE5/Mac / / */ overflow: hidden; /* */ }
body {font-family:Tahoma,Arial,sans-serif; font-stretch:wider; font-size:16px; line-height:120%; text-align:justify; color:#000099; height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0; background:#FFFFCC}
#header {position:fixed; overflow:auto; width:100%; height:150px; margin:0; top:0; right:19px; background:#FFFFCC; z-index:2}
#title {position:relative; overflow:hidden; height:102px; margin-left:26px; margin-top:8px; margin-right:8px; background:#000099; z-index:4}
#siegel {position:relative; overflow:hidden; float:left; height:90px; width:92px; margin:6px; background-image:url('Header/siegel-blau.jpg'); z-index:5}
#dep {position:relative; overflow:hidden; float:left; line-height:100%; height:90px; width:180px; margin:6px; margin-right:60px; z-index:5}
#menu {position:relative; border-bottom:1px solid #000099; height:20px; margin-left:27px; margin-top:2px; margin-right:9px; padding-left:160px; background:#FFFFCC; z-index:4;}
#navigation {position:fixed; overflow:auto; left:8px; top:136px; height:100%; width:160px; background-image:url('Navigation/background.jpg'); z-index:3}
#content {position:relative; overflow:auto; height:100%; max-height:100%; padding-left:200px; padding-right:36px; z-index:1}
#sitemap {position:relative; text-align:right; font-size:10px}
#pad {display: block; height:156px}
#pad-bottom {height:6px}
- html #header, * html #navigation { position:absolute}
h1 {font-size:24px; font-weight:bold; color:#FFFFCC; line-height:100%; margin-top:0px; margin-bottom:0; text-align:left; padding:0; margin-left:0} h2 {font-size:24px; font-weight:bold; color:#FFCC33; line-height:100%; margin-top:9px; text-align:left; padding:0; margin-left:0} h3 {font-size:20px; color:#000099; margin-top:0px; margin-bottom:24px; text-align:left; padding:0; margin-left:0} h4 {font-size:18px; font-weight:bold; margin-top:12px; margin-bottom:6px; text-align:left;} h5 {font-size:15px; font-weight:bold; margin-top:20px; margin-bottom:12px; padding-left:0; text-align:left} p {margin:0; text-align:justify} ul {margin-top:0; margin-bottom:0}
.department {font-size:12px; color:#FFFFCC; text-align:left; margin-left:12px; margin-top:12px; margin-bottom:6px} .h1-start {font-size:40px; margin-top:9px} .p-start {margin-bottom:12px} .name {font-size:18px; font-weight:bold; margin-bottom:9px} .address {margin-bottom:3px} .p-kursbeschreibung {font-size:14px} .p-readings {font-size:14px; margin-top:6px; margin-bottom:3px} .h4-courses {margin-top:36px} .p-cv {margin-bottom:12px; text-align:left}
.h4-publications {margin-top:24px} .h5-publications {left:50px} .h4-functions {margin-top:24px; margin-bottom:12px;} .p-memberships {margin-left:42px; text-indent:-42px; margin-top:12px; margin-bottom:6px; font-size:16px} .p-conferences {margin-top:12px; margin-bottom:6px; font-size:16px} .h5-university {margin-top:12px} .p-teaching {margin-bottom:6px; text-align:left} .p-vlectures {margin-bottom:12px; text-align:left}
#header a:link {color:#FFCC33; text-decoration:none} #header a:visited {color:#FFCC33; text-decoration:none} #header a:hover {color:#FFCC33; text-decoration:none}
#dep a:link {color:#FFFFCC; text-decoration:none} #dep a:visited {color:#FFFFCC; text-decoration:none} #dep a:hover {color:#FFFFCC; text-decoration:none}
#content a:link {color:#000099} #content a:visited {color:#990000} #content a:hover {color:#000099}
#navigation a:link {color:#000099} #navigation a:visited {color:#990000} #navigation a:hover {color:#000099; font-weight:bold}
#sitemap a:link {color:#FFFFCC; text-decoration:none} #sitemap a:visited {color:#990000; text-decoration:none} #sitemap a:hover {color:#FFFFCC; text-decoration:none}
Nochmals vielen Dank! Grüße Mary
-
Ich habe mir jetzt gerade nochmal meinen zweiten Versuch
http://www.uni-regensburg.de/Fakultaeten/phil_Fak_IV/Anglistik/SpW/Staff/Schneider/publications-test-mit-css.htm
angeschaut.
In allen Browsern bis auf den IE funktioniert das tadellos.
Warum verdoppelt denn der IE die Abstände? Hat das auch mit dem 3px-Bug zu tun oder ist das wieder ein andere Bug?Das ist natürlich viel umständlicher als Deine Lösung, aber immerhin sind die Zahlen auf gleicher Höhe.
Nur warum stellen Mozilla und Netscape die Sonderzeichen nicht richtig dar?Oh Mann, das ist wirklich der undankbarste Job, den ich je hatte...
:-( -
Hallo,
vielen Dank für Deine Hilfe!!!
Aber ich krieg's einfach trotzdem nicht hin.
Ich möchte, dass die Absätze mit Pfeil eine kleinere Schriftart und eine kleinere Zeilenhöhe haben. Das geht auch noch. Aber sobald ich noch margin-tops einfüge, sind die Zahlen / Pfeile nicht mehr auf derselben Höhe. Ich hätte gerne 12px vor den Zahlen-Absätzen und nur 6 vor den Pfeilabsätzen. (Wenn ich das richtig sehe, setzt auch nur der IE diese Abstände richtig um...)Ja, die selben margin-tops muss dann natürlich auch span.number und span.marker bekommen
Es klappt auch dann nicht, wenn ich den spams dieselben margin-tops zuweise.
Doch ;-)
Hast Du noch einen Tipp parat?
Habe ich noch irgendwo einen Fehler oder geht's so eben doch auch nicht?<style>
<!--
#numeration {padding-left:0px;}
span.number {float:left; margin:0; padding:0; font-size:14px;}^hier noch der selbe margin-top, wie für p.numtext und auch die selbe font-size
span.marker {float:left; margin:0; padding:0; margin-left:20px; font-size:13px}
^hier noch der selbe margin-top, wie für p.revtext und auch die selbe font-size und line-height
p.numtext {margin-top:12px; margin-bottom:1ex; margin-left:50px; padding:0; font-size:14px}
p.revtext {margin-top:6px; margin-left:50px; margin-bottom:1ex; padding:0; font-size:13px; line-height:115%}Hier jeweils margin-bottom:0; und margin-right:0;. Margins fallen nämlich zusammen, wenn es keine Border dazwischen gibt. Du kannst also die Abstände nur etweder mit margin-top oder margin-bottom machen.
Ich habe jetzt Deinen Quellcode kopiert und das folgende CSS statt dessen, welches ich oben bemängelt habe eingesetzt:
#numeration {margin:0; padding:0; padding-top:156px;} span.number {float:left; margin:0; padding:0; font-size:14px; margin-top:12px; font-size:14px} span.marker {float:left; margin:0; padding:0; margin-left:20px; margin-top:6px; font-size:13px; line-height:115%} p.numtext {margin:0; padding:0; margin-top:12px; margin-left:50px; font-size:14px} p.revtext {margin:0; padding:0; margin-top:6px; margin-left:50px; font-size:13px; line-height:115%}und dafür Dein <div id="pad"></div> entfernt.
viele Grüße
Axel
-
Hallo,
und bevor Du ganz den Glauben verlierst: Kursive Schrift kann der IE natürlich auch nicht richtig interpretieren ;-). Wenn Du also dann in Deinem Fließtext <em></em> einsetzt und der kursive Text über einen Zeilenwechsel hinausreicht, musst Du für den IE noch overflow:visible für die betroffenen Text-Block-Elemente explizit vorgeben.
<!--[if IE]>
<style>
p.numtext {height:1ex; overflow:visible;} /*3px-Bug eliminieren und italic-Bug eliminieren*/
p.revtext {height:1ex; overflow:visible;} /*3px-Bug eliminieren und italic-Bug eliminieren*/
</style>
<![endif]-->viele Grüße
Axel
-
Hallo Axel,
vielen vielen Dank!
Aber es klappt trotzdem nicht.
http://www.uni-regensburg.de/Fakultaeten/phil_Fak_IV/Anglistik/SpW/Staff/Schneider/publications-axel-mit-css.htmEs klappt auch dann nicht, wenn ich den spams dieselben margin-tops zuweise.
Doch ;-)Nein, oder bin ich zu doof? Deine Variante wäre schon deutlich eleganter als meine...
Ich habe inzwischen auch wieder rumprobiert. Das Problem bei meiner verschachtelten p-/span-Variante war der "Doubled Float-Margin-Bug".
Cf. http://www.positioniseverything.net/explorer/doubled-margin.htmlDer ließ sich ja suuuupersimpel beheben.
Diese verschachtelte Variante wird jetzt in den drei gewünschten Browsern FAST richtig dargestellt.E:\Eigene Webs\English Linguistics\Staff\Schneider\publications.htm
Wer fällt aus der Reihe? Der Internet Explorer natürlich. Die erste Zeile ist immer leicht verschoben. Sieht mir wieder nach 3-Pixel-Bug aus. Nur leider klappt irgendwie dieser height-Hack jetzt nicht mehr (weder als *-Hack noch als if-Dingsda).
Weise ich dem div eine height zu, ändert sich gar nichts. Weise ich den p's die height zu, verschwindet die Zahl (aus unerfindlichen Gründen). Habe alles mögliche ausprobiert.
Aber mei, dann ist es halt im IE etwas schief. Oder...?und dafür Dein <div id="pad"></div> entfernt.
Das lasse ich drin, weil das auf jeder Seite ist... Aber DAS dürfte ja nun wirklich nichts verändern.
Ach ja, und meinen HTML-/CSS-Glauben habe ich schon verloren. Da kann man wohl nichts mehr machen... ;-)
Nochmals danke!
Viele Grüße und hoffentlich bis später...
MaryPS: Es ist schon tragisch, wenn man an einer Kleinigkeit so lange sitzt. Es gäbe ja noch soooo viele andere Sachen zu optimieren... Aber nebenbei hätte ich auch noch eine Diss zu schreiben (und die hat 0,0 mit HTML oder CSS zu tun...) ;-)
-
E:\Eigene Webs\English Linguistics\Staff\Schneider\publications.htm
Das hilft natürlich nicht weiter...
Die richtige Adresse ist natürlich:http://www.uni-regensburg.de/Fakultaeten/phil_Fak_IV/Anglistik/SpW/Staff/Schneider/publications.htm
-
Hallo,
http://www.uni-regensburg.de/Fakultaeten/phil_Fak_IV/Anglistik/SpW/Staff/Schneider/publications.htm
Das IE-Problem ist, dass er Textblöcke, die neben Elementen mit float:left stehen, um 3px einzieht. Du musst die height-Angabe also nicht auf das gesamte umgebende DIV anwenden, sondern auf die entsprechenden Textblöcke.
Ich verwende übrigens grundsätzlich keine Hacks im CSS, sondern höchstens die Conditional Comments für den IE. Wenn das nicht reicht, versuche ich eher meine Layoutvorstellung zu überdenken, als fehlerhafte Syntax ins CSS zu schreiben. Das hängt aber damit zusammen, dass ich diese Sachen unterrichten muss.
viele Grüße
Axel
-
http://www.uni-regensburg.de/Fakultaeten/phil_Fak_IV/Anglistik/SpW/Staff/Schneider/publications.htm
Das IE-Problem ist, dass er Textblöcke, die neben Elementen mit float:left stehen, um 3px einzieht. Du musst die height-Angabe also nicht auf das gesamte umgebende DIV anwenden, sondern auf die entsprechenden Textblöcke.Ja, ich weiß... Habe mich durch gaaanz viele Seiten gelesen. Aber die Hacks funktionieren nicht. Ich habe sie auf alle, nur auf die p-, nur auf die Span-Elemente angewandt. Ich glaube, ich habe wirklich alles ausprobiert.
Logischerweise müsste die height-Angabe durch für die Span-Elemente mit Text gelten oder? Geht aber nicht... WARUMMMMM????Ich verwende übrigens grundsätzlich keine Hacks im CSS, sondern höchstens die Conditional Comments für den IE. Wenn das nicht reicht, versuche ich eher meine Layoutvorstellung zu überdenken, als fehlerhafte Syntax ins CSS zu schreiben. Das hängt aber damit zusammen, dass ich diese Sachen unterrichten muss.
Was bedeutet das für mich? :-)
Das Ergebnis ist aber doch dasselbe oder?WIESO habe ich nur den Ehrgeiz entwickelt, keine Tabellen verwenden zu wollen???
-
Hallo,
http://www.uni-regensburg.de/Fakultaeten/phil_Fak_IV/Anglistik/SpW/Staff/Schneider/publications.htm
Das IE-Problem ist, dass er Textblöcke, die neben Elementen mit float:left stehen, um 3px einzieht. Du musst die height-Angabe also nicht auf das gesamte umgebende DIV anwenden, sondern auf die entsprechenden Textblöcke.Ja, ich weiß... Habe mich durch gaaanz viele Seiten gelesen. Aber die Hacks funktionieren nicht. Ich habe sie auf alle, nur auf die p-, nur auf die Span-Elemente angewandt. Ich glaube, ich habe wirklich alles ausprobiert.
Logischerweise müsste die height-Angabe durch für die Span-Elemente mit Text gelten oder? Geht aber nicht... WARUMMMMM????Doch ;-)
* html .span-reviewed {
height: 1em; overflow: visible; display:block;} /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */* html .span-publications {
height: 1em; overflow: visible; display:block;} /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */Ich verwende übrigens grundsätzlich keine Hacks im CSS, sondern höchstens die Conditional Comments für den IE. Wenn das nicht reicht, versuche ich eher meine Layoutvorstellung zu überdenken, als fehlerhafte Syntax ins CSS zu schreiben. Das hängt aber damit zusammen, dass ich diese Sachen unterrichten muss.
Was bedeutet das für mich? :-)
Für mich, dass ich es so machen würde:
<!--[if IE]>
<style>
#header, #navigation {position:absolute}.span-reviewed {height: 1em; overflow: visible; display:block;} /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
.span-publications {height: 1em; overflow: visible; display:block;} /* Workaround gegen den 3-Pixel-Bug des Internet <h5></h5>Explorers */
</style>
<![endif]-->Das Ergebnis ist aber doch dasselbe oder?
Nein. Es steht keine fehlerhafte Syntax im CSS.
viele Grüße
Axel
-
-
-
-
Hallo,
vielen vielen Dank!
Aber es klappt trotzdem nicht.
http://www.uni-regensburg.de/Fakultaeten/phil_Fak_IV/Anglistik/SpW/Staff/Schneider/publications-axel-mit-css.htmJa, jetzt hast Du ja auch kursive Schrift drin. Siehe hierzu mein anderes Posting. Und Deine H3, sowie Deine H4 und H5 Konstrukte "1 ..." haben wieder margin-top _und_ margin-bottom. Das bringt nur Probleme. Entscheide Dich innerhalb der Aufzählung für _einen_ Abstand.
Im Übrigen würde ich hier die selbe Methode der Nummerierung einsetzen:
CSS:
.numh4 {float:left; margin:0; padding:0; font-size:18px; font-weight:bold; margin-top:24px}
.h4-publications {margin:0; padding:0; margin-top:24px; margin-left:50px;}
.numh5 {float:left; margin:0; padding:0; font-size:15px; font-weight:bold; margin-top:24px;}
.h5-publications {margin:0; padding:0; margin-top:24px; margin-left:50px;}<!--[if IE]>
<style>
.p-publications {height:1ex; overflow:visible;}
.p-reviewed {height:1ex; overflow:visible;}
.h4-publications {height:1ex; overflow:visible;}
.h5-publications {height:1ex; overflow:visible;}
</style>
<![endif]-->HTML:
<div id="publications">
<div id="pad"></div>
<h3 style="margin-bottom:0;">Publications</h3>
<span class="numh4">1</span>
<h4 class="h4-publications"><a name="monographs" id="monographs" style="padding-top:172px; font-size:0px;"> </a>Monographs</h4><span class="num">1.1</span>
<p class="p-publications"><em>Morphologische und syntaktische Variablen im amerikanischen Early Black English.</em> Frankfurt am Main, Bern: Peter Lang 1981. (Dissertation, Bamberg 1981)</p>
...<span class="numh4">2</span>
<h4 class="h4-publications"><a name="editor" id="editor" style="padding-top:172px; font-size:0px;"> </a>Editor</h4><span class="numh5">2.1</span>
<h5 class="h5-publications">Books</h5><span class="num">2.1.1</span>
<p class="p-publications"><em>Englisch - Formen und Funktionen einer Weltsprache.</em> with pp. Köppl, J. Schmied and W. Viereck). Exhibition catalogue. Bamberg: Universitätsbibliothek 1983.</p>PS: Es ist schon tragisch, wenn man an einer Kleinigkeit so lange sitzt. Es gäbe ja noch soooo viele andere Sachen zu optimieren... Aber nebenbei hätte ich auch noch eine Diss zu schreiben (und die hat 0,0 mit HTML oder CSS zu tun...) ;-)
*g* Darf man fragen in welcher Fachrichtung dann?
viele Grüße
Axel
-
Hi again.
Ja, jetzt hast Du ja auch kursive Schrift drin. Siehe hierzu mein anderes Posting. Und Deine H3, sowie Deine H4 und H5 Konstrukte "1 ..." haben wieder margin-top _und_ margin-bottom. Das bringt nur Probleme. Entscheide Dich innerhalb der Aufzählung für _einen_ Abstand.
Es klappt aber nicht nur im IE nicht, sondern auch in Mozilla und Netscape nicht. Diese stellen zudem die Sonderzeichen total verkehrt dar.
Wieso bringt margin-top und margin-bottom Probleme?
Ach, ich mag's gar nicht wissen.Hast Du Dir meine span in p Lösung angeschaut? Wie gesagt, die sieht in allen Browsern perfekt aus (inkl. der Überschriften). Nur ist die erste Zeile des an das Nummerierungs-span angrenzenden Text-Spans etwas (3 Pixel?) nach rechts verschoben.
Würde es mir gelingen, das einfach im IE nach links zu verschieben, würde schon alles passen. Oder aber ich lasse es so. Unser Standard-Browser ist Mozilla.Ich bin heilfroh, dass ich Gott sei Dank von einem komplett skalierbaren (also komplett in em) Design Abstand genommen habe. Ich möchte ja nicht wissen, was da noch alles auf mich zugekommen wäre...
Im Übrigen würde ich hier die selbe Methode der Nummerierung einsetzen:
Ja, hatte ich kurz vor, war dann aber zu faul.
Außerdem hat das auch ewig gedauert, bis das klappte, weil da die Anker integriert sind, die auch grooooße Probleme bereiteten.*g* Darf man fragen in welcher Fachrichtung dann?
Sprachwissenschaft Anglistik.
Daher müssen die Seiten auch nicht perfekt werden. Wir sind schließlich Geisteswissenschaftler!!! ;-)
Aber mich nervt das schon wahnsinnig, dass das alles nicht so geht (oder nicht leicht), wie ich mir das vorstelle. Und das Ding muss wirklich fertig werden...Ich schau mir jetzt nochmal den neuen Code an.
Magst Du noch einen Blick auf meine aktuelle Version werfen (die nur noch das 3-Pixel-Problem hat und in allen Browsern richtig dargestellt wird?)Ich finde es schon erstaunlich, dass es offensichtlich so schwierig ist, Tabellenlayouts mit CSS zu imitieren.
Viele Grüße
mary-
Hallo,
Wieso bringt margin-top und margin-bottom Probleme?
Ach, ich mag's gar nicht wissen.*g* Doch!
http://www.w3.org/TR/CSS21/box.html#collapsing-marginsviele Grüße
Axel
-
Hallo,
*g* Darf man fragen in welcher Fachrichtung dann?
Sprachwissenschaft Anglistik.
Daher müssen die Seiten auch nicht perfekt werden.Ah ja, sie müssen plusquamperfekt, sorry: past perfect, werden ;-).
Ich finde es schon erstaunlich, dass es offensichtlich so schwierig ist, Tabellenlayouts mit CSS zu imitieren.
Nein, das ist nicht schwierig, das ist unmöglich. Eine 1-zu-1-Umsetzung ist genau so leicht möglich, wie das 1-zu-1-Übertagen eines Frameset-Layouts in Tabellen. Allerdings handelt es sich ja bei dem Problem hier um Textsatz, nicht um Tabellen.
viele Grüße
Axel
-
-
Hi nochmal,
also offensichtlich lag der Fehler doch bei mir. So ist es wirklich perfekt.
Nur leider stellen die Nicht-IE Browser jetzt die Sonderzeichen falsch dar. Warum??In meiner Span-in-P-geschachtelten Variante stellen Sie's richtig dar. Aber eigentlich kann das damit nicht zusammenhängen oder?
Na ja, bedenkt man, dass ich bis vor 2 Monaten noch nicht einmal wusste, dass es CSS gibt, muss ich das wohl nicht verstehen... :-)
Ich übertrage jetzt mal wieder Inhalte...
Grüße-
Hallo,
also offensichtlich lag der Fehler doch bei mir. So ist es wirklich perfekt.
Nur leider stellen die Nicht-IE Browser jetzt die Sonderzeichen falsch dar. Warum??
In meiner Span-in-P-geschachtelten Variante stellen Sie's richtig dar. Aber eigentlich kann das damit nicht zusammenhängen oder?In der Variante stand die Zeile
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"></meta>
nicht hinter dem ganzen CSS-Geraffel und nicht hinter diesem Conditional Comment.Dein Server liefert kein default charset aus. Der Browser ist also auf das meta http-equiv="Content-Type" angewiesen. Das sollte soweit wie möglich oben im HEAD-Element stehen. In jedem Fall vor STYLE und SCRIPT. Ich würde
HEAD
TITLE
META
STYLE
SCRIPT
/HEADempfehlen.
viele Grüße
Axel
-
Danke!
Leider ist mir jetzt aufgefallen, dass die Anker nicht mehr funktionieren (mit denen habe ich auch schon TAGE verbracht -- und nicht nur ich...). Sie funktionierten nur mit dieser komischen Leerzeichen-Lösung.
Außerdem verrutschen die Ziffern wieder, wenn man die Seite reloaded.
(Und ich habe wirklich alles 1:1 kopiert...)Ich kann langsam echt nicht mehr.
Ich danke Dir wirklich sehr sehr sehr für Deine Hilfe.
Ich schau's mir morgen nochmal an, bin jetzt aber kurz davor, die noch fehlenden Seiten in Tabellen zu packen und morgen fertig zu machen. Mir macht das ja alles durchaus Spass und es weckt auch meinen Ehrgeiz, aber wenn dann immer irgendetwas nicht mehr funktioniert, wenn man etwas anderes zum Funktionieren gebracht hat, macht das nicht wirklich Spass. Ich bin ja so froh, dass ich das nicht hauptberuflich mache...Gute Nacht!
mary
-
-
-
-
-
-
-
Hallo,
da das Thema interessant ist, haben wir da jetzt mal mit etwas fortgeschritteneren Lehrgangsteilnehmern daran gebastelt. Das Folgende ist dabei rausgekommen. Eventuell kannst Du ja Dein Layout nochmal überdenken. Der Code ist erst mal nur in MSIE 6.0, FireFox 1.5.0.3 und Opera 8.5 unter Windows 2000 getestet.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "html-dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="la" > <head> <title>Layout fixer Header fixe Navigation gegliederte Nummerierung</title> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <style type="text/css" media="screen"> * {margin:0; padding:0; font-family:sans-serif; font-size:101%;} #header {height:100px; width:100%; position:fixed; top:0; left:0; background-color:#AFAFAF;} #header h1 {margin:10px; background-color:#00F; color:#FFF; font-size:2em; border:1px solid #00AFFF;} #navigation {width:200px; position:fixed; top:100px; left:0; background-color:#AFAFAF;} #navigation ul {padding-left:2em;} #navigation li {padding:1em;} #content {padding-left:210px; padding-top:100px;} .numeration {margin:0; padding:0; margin-left:55px;} .numeration * {margin:0; padding:0; text-align:left;} .numeration span.number {float:left; margin-left:-55px;} .numeration span.marker {float:left; margin-left:-20px;} .numeration h2 {margin-top:1em; font-size:1.5em;} .numeration h3 {margin-top:.5em; font-size:1.2em;} .numeration .text_following_number {margin-top:.8em;} .numeration .text_following_marker {margin-top:.5em; font-size:.8em; line-height:115%;} /*Ankerproblem bei position:fixed beheben [link:http://molily.de/css-position-fixed#css3]*/ .numeration h2 a {display:block; width:0; height:0; position:relative; top:-100px; visibility:hidden} </style> <!--[if IE]> <style> /*gegen 3px- und italic-Bug:*/ .numeration span.content {display:block; height:1em; overflow:visible;} /*fixierter Header [link:http://aktuell.de.selfhtml.org/tippstricks/css/footer/index.htm]*/ html, body {height:100%; overflow:hidden;} #header {height:15%;} #content {height:85%; overflow:auto; padding-top:0;} /*fixierte Navigation*/ #navigation {position:absolute; top:15%; left:0;} /*Anker verstecken*/ .numeration h2 a {display:none;} </style> <![endif]--> </head> <body> <div id="header"> <h1>Hauptueberschrift</h1> </div> <div id="navigation"> <ul> <li><a href="#punkt1">Punkt 1</a></li> <li><a href="#punkt2">Punkt 2</a></li> <li>Punkt 3</li> <li>Punkt 4</li> </ul> </div> <div id="content"> <div class="numeration"> <h2><span class="number">1</span><span class="content"><a name="punkt1" id="punkt1"> </a>Ueberschrift Level 1</span></h2> <h3><span class="number">1.1</span><span class="content">Ueberschrift Level 2</span></h3> <p class="text_following_number"><span class="number">1.1.1</span><span class="content"><em>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</em> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></p> <p class="text_following_marker"><span class="marker">-></span><span class="content"><em>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</em> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p> <p class="text_following_number"><span class="number">1.1.2</span><span class="content"><em>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</em>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span></p> <p class="text_following_marker"><span class="marker">-></span><span class="content"><em>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</em>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></p> <h3><span class="number">1.2</span><span class="content">Ueberschrift Level 2</span></h3> <p class="text_following_number"><span class="number">1.1.1</span><span class="content"><em>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</em> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></p> <p class="text_following_marker"><span class="marker">-></span><span class="content"><em>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</em> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p> <h2><span class="number">2</span><span class="content"><a name="punkt2" id="punkt2"> </a>Ueberschrift Level 1</span></h2> <h3><span class="number">2.1</span><span class="content">Ueberschrift Level 2</span></h3> <p class="text_following_number"><span class="number">2.1.1</span><span class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </span></p> </div> </div> </body> </html>Eventuell solltest Du aber auch noch lesen:
http://jendryschik.de/wsdev/css/fixed/
http://molily.de/css-position-fixedviele Grüße
Axel
-
Hi Axel,
vielen Dank! Ich schau's mir morgen in Ruhe an und melde mich dann wieder. Heute bin ich aufgrund eines gravierenden Schlafdefizits zu nichts zu gebrauchen. ;-)
Schönes Wochenende!
Grüße
Mary
-