nicht angemeldet
li Abstände IE & float im Firefox
1 0 1 0 0 OT: Selfforum
li Abstände IE & float im Firefox
Hallo Community,
ich versuche momentan von Tabellen auf div/css umzusteigen und habe dabei 2 Probleme, die ich leider nicht mit Google & Forumsuche beheben kann.
Problem 1:
Ich habe ein Menü mit <li> aufgebaut und dieses mit css formatiert. Im Firefox, sowie in Opera erhalte ich auch das gewünschte Ergebnis. Der Internet Explorer zeigt mir jedoch Abstände zwischen den einzelnen Elementen an.
Jetzt könnte ich zwar eine zweite css-Datei anlegen für den IE und dort "margin" negativ setzen, jedoch wollte ich erst einmal hier fragen ob es noch eine bessere Lösung dazu gibt.
Problem 2:
Ich habe via "float: left;" den Text um das Menü fliessen lassen und "margin" dazu benutzt um einen Abstand zu setzen. Hier funktioniert das ganze in Opera & IE, im Firefox aber greift "margin" nicht und es wird nicht der komplette Text neben dem Menü angezeigt sondern nur die ersten Zeilen.
Der Link: click
Der CSS-Code:
body
{
background-color: #FFFFCC;
color: #000;
font-size: 100.01%;
margin: 0;
padding: 0;
text-align: center;
}
* html div#content
{
height: 1em; /* IE Workaround 3-Pixel-Bug */
margin-bottom: 0;
}
div#page
{
text-align: left;
background: #fff;
width: 702px;
margin: 0 auto;
padding: 0;
}
div#header
{
text-align: center;
}
ul#nav
{
float: left;
width: 162px;
margin: 0;
padding: 0 0 0 0.8em;
}
ul#nav li
{
list-style-type: none;
margin: 0;
padding: 0;
}
ul#nav a
{
display: block;
margin: 0;
padding: 0;
}
div#content
{
width: 475px;
padding: 0 0 0 3em;
margin: 0;
}
Der HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="fileadmin/css/style.css">
</head>
<body>
<div id="page">
<div id="header">
<img src="fileadmin/images/header.jpg" width="702" height="169">
</div>
<ul id="nav">
###MENU###
</ul>
<div id="content">
###INHALT###
</div>
</div>
</body>
</html>
Es handelt sich eine HP in Typo3.
In ###MENU### wird per TypoScript das <li> um jeden Menüpunkt gelegt und in ###INHALT### wir der der Inhalt ausgegeben. Das nur zur Erklärung :)
Gruß
1848er
-
Hi,
ich versuche momentan von Tabellen auf div/css umzusteigen und habe dabei 2 Probleme, die ich leider nicht mit Google & Forumsuche beheben kann.
erstens: Validiere Deinen Code, inklusive CSS. Zweitens: Der Quirks-Mode ist tödlich für den IE. Bevor dies nicht behoben ist, macht eine Problembetrachtung erfahrungsgemäß wenig bis gar keinen Sinn.
Ich habe via "float: left;" den Text um das Menü fliessen lassen und "margin" dazu benutzt um einen Abstand zu setzen. Hier funktioniert das ganze in Opera & IE, im Firefox aber greift "margin" nicht und es wird nicht der komplette Text neben dem Menü angezeigt sondern nur die ersten Zeilen.
Wenn Du zwischen IE und Firefox unterschiedliches Verhalten feststellst, gehe bis zum Beweis des Gegenteils *immer* davon aus, dass sich Firefox korrekt verhält. Dein Problem ist mangels Inhalts in der Seite nicht nachvollziehbar und somit auch nicht lösbar; aber meine Glaskugel sagt mir, dass Du davon ausgehst, der margin beginne neben dem gefloateten Element. Dem ist nicht so - gib dem Content-Element einmal einen border, dann siehst Du im Firefox, wo korrekterweise das Element platziert ist. Im IE bewirkt die hasLayout-Eigenschaft[1] ein Fehlverhalten.
Der HTML-Code:
Auf der von Dir genannten Seite ist der Code signifikant anders.
Cheatah
[1] Recherchiere bitte nach dieser.
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi,
erstens: Validiere Deinen Code, inklusive CSS. Zweitens: Der Quirks-Mode ist tödlich für den IE. Bevor dies nicht behoben ist, macht eine Problembetrachtung erfahrungsgemäß wenig bis gar keinen Sinn.
Auf der von Dir genannten Seite ist der Code signifikant anders.
Der Header wurde von Typo3 generiert, deswegen wurde ein anderer Code angegeben. Nachdem ich das jetzt deaktiviert und einige Änderungen durchgeführt hab, wird html sowie css erfolgreich validiert.
Bei html erhalte ich zwar noch 6 Warnungen, weil das <img> mit einem /> geschlossen wird, jedoch wird dies von Typo3 dynamisch aufgebaut.
Frage dazu: Trotz erfolgreichem validieren ... reichen diese Warnungen schon aus, dass der IE in den Quirks-Modus springt?
Wenn Du zwischen IE und Firefox unterschiedliches Verhalten feststellst, gehe bis zum Beweis des Gegenteils *immer* davon aus, dass sich Firefox korrekt verhält. Dein Problem ist mangels Inhalts in der Seite nicht nachvollziehbar und somit auch nicht lösbar; aber meine Glaskugel sagt mir, dass Du davon ausgehst, der margin beginne neben dem gefloateten Element. Dem ist nicht so - gib dem Content-Element einmal einen border, dann siehst Du im Firefox, wo korrekterweise das Element platziert ist. Im IE bewirkt die hasLayout-Eigenschaft[1] ein Fehlverhalten.
Werd mir gleich die hasLayout-Eigenschaft anschauen.
Danke!
Gruß
1848er-
Hi,
Der Header wurde von Typo3 generiert, deswegen wurde ein anderer Code angegeben. Nachdem ich das jetzt deaktiviert und einige Änderungen durchgeführt hab, wird html sowie css erfolgreich validiert.
jein ...
Bei html erhalte ich zwar noch 6 Warnungen, weil das <img> mit einem /> geschlossen wird, jedoch wird dies von Typo3 dynamisch aufgebaut.
... das ist zwar auch in HTML (wegen ziemlich ... absurder SGML-Optionen) syntaktisch korrekt, entspricht aber ganz sicher nicht dem, was Du haben möchtest. Entscheide Dich bitte entweder für HTML oder für XHTML, und bereite den Code so auf, dass er ohne jeden Rest eines Zweifels valide ist.
Frage dazu: Trotz erfolgreichem validieren ... reichen diese Warnungen schon aus, dass der IE in den Quirks-Modus springt?
Nein. Testen kannst Du dies, indem Du die URL
javascript:alert(document.compatMode);
auf der Seite in den Browser eingibst. Die Ausgabe ist entweder "BackCompat" für den Quirks-Mode, oder "CSS1Compat" für den Standards-Compliance-Mode.
Werd mir gleich die hasLayout-Eigenschaft anschauen.
Unabhängig davon: Die oberste Lücke liegt daran, dass das <img>-Element im Header inline ist und somit - wie auch Text - über eine Unterlänge verfügt. Die weiteren Lücken lassen sich auf umgekehrtem Weg entfernen, indem die <li>-Elemente in inline-Elemente umgewandelt werden.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Super, danke für die Hilfe!
Gruß
1848er -
hi $name,
Nein. Testen kannst Du dies, indem Du die URL
javascript:alert(document.compatMode);
auf der Seite in den Browser eingibst. Die Ausgabe ist entweder "BackCompat" für den Quirks-Mode, oder "CSS1Compat" für den Standards-Compliance-Mode.
*rotfl* also beim selfforum zeigt mein füchslein an das er sich im quirks-mode befindet.
gruss
shadow--
If there's anything more important than my ego around, I want it caught and shot, now.-
Hi,
javascript:alert(document.compatMode);
auf der Seite in den Browser eingibst. Die Ausgabe ist entweder "BackCompat" für den Quirks-Mode, oder "CSS1Compat" für den Standards-Compliance-Mode.
*rotfl* also beim selfforum zeigt mein füchslein an das er sich im quirks-mode befindet.bei mir nicht. Vermutlich verwendest Du nicht die benutzerdefinierte Darstellung.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
hi $name,
bei mir nicht. Vermutlich verwendest Du nicht die benutzerdefinierte Darstellung.
doch, die verwende ich.
gruss
shadow--
If there's anything more important than my ego around, I want it caught and shot, now.-
Hi,
bei mir nicht. Vermutlich verwendest Du nicht die benutzerdefinierte Darstellung.
doch, die verwende ich.dann hast Du diese wohl anders als ich eingerichtet. Warum eigentlich das "*rotfl*" in Deinem vorherigen Posting?
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
hi $name,
dann hast Du diese wohl anders als ich eingerichtet. Warum eigentlich das "*rotfl*" in Deinem vorherigen Posting?
warum nicht? mir war halt dannach.
gruss
shadow--
If there's anything more important than my ego around, I want it caught and shot, now.
-
-
-
-
-
-
-