nicht angemeldet
BrowserDifferenz bei ListenElement
0 0 
Struppi
BrowserDifferenz bei ListenElement
Hi!
Folgender Source Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "strict.dtd">
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
.LISTE {
font-family:sans-serif;
font-size:12px;
line-height:0px;
}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI class="LISTE">
<P>Punkt 1</P>
</LI>
<LI class="LISTE">
<P>Punkt 2</P>
</LI>
<LI class="LISTE">
<P>Punkt 3</P>
</LI>
<LI class="LISTE">
<P>Punkt 4</P>
</LI>
<LI class="LISTE">
<P>Punkt 5</P>
</LI>
</UL>
</BODY>
</HTML>
Jetzt mein Problem: Die Zeilenabstände zwischen den einzelnen Punkten werden unterschiedlich Groß dargestellt in Verwendung mit IE und Firefox. Hat jemand evtl. eine !Nicht Java-Script basierende Lösung hierfür?
Danke im Vorraus,
BYE
-
Hallo,
warum verwendest Du denn zwischen den <li>-Tags noch einen Textparagraphen zur Auszeichnung?
Ich würde die <p>-Tags weglassen. Und dem li eine feste Höhe geben, in em am besten.
vg melanie
-
:)
Ja das wäre natürlich das einfachste, dann hätt ich das problem auch nicht, ich weiss. Is aber leider so das ich die <p> tags dort brauche. Frage nicht warum bitte ;) ist nicht mein Projekt-
:)
Ja das wäre natürlich das einfachste, dann hätt ich das problem auch nicht, ich weiss. Is aber leider so das ich die <p> tags dort brauche. Frage nicht warum bitte ;) ist nicht mein Projekt.also ich hab das jetzt nicht ausprobiert aber setzt doch mal bitte dann die <p> via css auf 0 bzw. der Aussen- und Innenabstände, die sind in ihren Defaultwerten browserspezifisch.
p {
margin: 0;
padding: 0;
}Der IE dürfte die Abstände dann trotzdem anders darstellen. Du kannst ja auch mal mit einem Hack experimentieren.
* html ul li {
height: 1%;
zoom:1;
}
(oder am besten gleich über Conditional Comments einbinden...sonst ist das ganze nicht valide)-
Hallo,
also ich hab das jetzt nicht ausprobiert aber setzt doch mal bitte dann die <p> via css auf 0 bzw. der Aussen- und Innenabstände, die sind in ihren Defaultwerten browserspezifisch.
Genau.
Der IE dürfte die Abstände dann trotzdem anders darstellen.
Genau.
Du kannst ja auch mal mit einem Hack experimentieren.
Nein, bitte keine Hack. Versuche es mit normalen CSS-Eigenschaften in allen Browsern gleich aussehen zu lassen, ggf. verzichte zu Gunsten dieser Regel auf das gewünschte Aussehen.
Etwa so:
<STYLE TYPE="TEXT/CSS">
UL.LISTE { margin:0; padding-left:2em; } UL.LISTE LI { font-family:sans-serif; font-size:12px; margin:0; padding:0; } UL.LISTE P { line-height:1em; margin:0; padding:0; }</STYLE>
<UL class="LISTE"> <LI> <P>Punkt 1</P> </LI> <LI> <P>Punkt 2</P> </LI> <LI> <P>Punkt 3</P> </LI> <LI> <P>Punkt 4</P> </LI> <LI> <P>Punkt 5</P> </LI> </UL>Wenn es nun gleich aussieht, kann man sich durch Änderungen der Eigenschaften an das gewünschte Aussehen annähern. Meistens wird diese Annäherung asymptotisch sein ;-)).
@frozo:
Bitte nimm so wenig wie möglich Eintragungen im HTML-Code vor, die _nur_ der Gestaltung dienen. Deine vielen CLASS-Attribute sind nicht nötig, wie Du siehst.viele Grüße
Axel
-
Hallo,
Nein, bitte keine Hack. Versuche es mit normalen CSS-Eigenschaften in allen Browsern gleich aussehen zu lassen, ggf. verzichte zu Gunsten dieser Regel auf das gewünschte Aussehen.
Aha. naja ich würde mit dieser Einstellung nicht weit kommen, auch wenn sie löblich ist ;)
vg melanie
-
Hallo,
Nein, bitte keine Hack. Versuche es mit normalen CSS-Eigenschaften in allen Browsern gleich aussehen zu lassen, ggf. verzichte zu Gunsten dieser Regel auf das gewünschte Aussehen.
Aha. naja ich würde mit dieser Einstellung nicht weit kommen, auch wenn sie löblich ist ;)
Naja, spätestens wenn der Hack in der nächsten Browsergeneration nicht mehr funktioniert, solltest Du weit gekommen sein. Zumindest so weit, dass Dir keiner mehr in den A* treten kann ;-)).
Meist sind die "Designer", die unbedingt auf ihrem "Klebebild" als Webseite bestanden haben, dann nämlich schon "weit gekommen".
viele Grüße
Axel
-
Hi,
naja da muss man eben einen Kompromiss finden, nicht wahr? Für den IE gibt es ja zum Glück die CC. Und für andere Browser brauche ich i.d.R. keine Hacks.Ansonsten ist es wieder das alte Lied, der Rrogrammiere meckert über die unsäglichen Designer, die WEbdesigner schütteln die Köpfe über die Seiten der Programmierer.
Man muss sich da entgegenkommen.;)
vg melanie
-
Hallo,
naja da muss man eben einen Kompromiss finden, nicht wahr?
Ja.
Für den IE gibt es ja zum Glück die CC.
Genau.
Und für andere Browser brauche ich i.d.R. keine Hacks.
Ebend ;-)).
Ansonsten ist es wieder das alte Lied, der Rrogrammiere meckert über die unsäglichen Designer, die WEbdesigner schütteln die Köpfe über die Seiten der Programmierer.
Man muss sich da entgegenkommen.Ja, gerne. Allerdings gibt es einige Dinge, deren Einsatz absolut nicht in Frage kommt. Dazu gehören:
- die Ausnutzung von Programmfehlern zur Erzeugung von Funktionalität (Hacks),
- die eval-Funktion außerhalb ihres Einsatzes zur direkten Umsetzung vom Benutzer eingegebener mathematischer Terme,
- Spaghetti-Code mit goto,
- Schnecken in meinem Garten und
- Lungenhaschee
viele Grüße ;-)
Axel
-
lasst die schnecken leben...
irgendeine existenzberechtigung werden sie schon haben (ich nehme an wir reden von den fiesen nacktschnecken);)
-
so, nochmal ich. Vielen Dank ihr habt mir sehr geholfen das Problem ist gelöst. :)
Allerdings noch eine andere Sache:
Ähnliches Problem: Wenn ich die Listen (also das <UL> oder <OL> Tag) mit nem "margin-left:+-__px"-style positionieren möchte, landen sie wiederum im IE und im Firefox an total verschiedenen Stellen.
Obwohl sie in Grundeinstellung an fast der selben Position sind verschwindet bespielsweise im IE die Tabelle im linken Bildschirmrand
(bei z.B. "margin.left:20px), während die Liste im FF tatsächlich 20px nach rechts verschoben wird.-
wie jetzt? wo soll da eine tabelle sein, die hast Du bisher verschwiegen ;)
es heisst ausserdem
ul {
margin-left: 20px;
}nicht margin.left...ich nehme aber an da hast Du Dich in dem Posting vertippt, oder??
zur fehlerkontrolle ist es ganz hilfreich wenn Du dem element eine border zuweist also
ul {
margin-left: 20px;
border: 1px solid;
}
.
-
-
-
-
-
-
-
-
-
-
Folgender Source Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "strict.dtd">
Erstmal würd ich einen gültigen DOCTYPE verwenden und dann am besten einen der die Browser in den Standardmode versetzt.
Mehr hier: http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
.LISTE {
font-family:sans-serif;
font-size:12px;
line-height:0px;
}
</STYLE>
</HEAD>Das da noch eine charset angabe und der title Tag fehlen weißt du wahrscheinlich.
Darüber hinaus würd ich mir die Großbuschstaben abgewöhnen, spätestens wenn mal ein Dokument in XHTML (stric) erstellst musst du das.
Ich frage mich aber warum du hier line-height benutzt was soll das bewirken?
<BODY>
<UL>
<LI class="LISTE">
<P>Punkt 1</P>
</LI>
<LI class="LISTE">
<P>Punkt 2</P>
</LI>
<LI class="LISTE">
<P>Punkt 3</P>
</LI>
<LI class="LISTE">
<P>Punkt 4</P>
</LI>
<LI class="LISTE">
<P>Punkt 5</P>
</LI>
</UL>
</BODY>
</HTML>Warum eine Klasse?
Es geht viel einfacher:
<ul>
<li>
<p>Punkt 1</p>
</li>
...
</ul>und das css:
ul li{
font-family:sans-serif;
font-size:12px;
}Jetzt mein Problem: Die Zeilenabstände zwischen den einzelnen Punkten werden unterschiedlich Groß dargestellt in Verwendung mit IE und Firefox. Hat jemand evtl. eine !Nicht Java-Script basierende Lösung hierfür?
Für diese Abstände sind wohl die default Einstellungen für margin und padding zuständig, diese dürften in allen (nicht nur in den zwei von dir genannten) Unterschiedlich sein.
Wenn du jeweils den gleichen Abstand erhalten willst, dann musst du diese explizit angeben.
Struppi.