CSS & IE: listeneintrags höhe
Hi, hab heute auch mal ein problem,
ich komm einfach nicht dahinter, wieso ich die höhe meiner liste nich unter 18px bekomme im IE. in allen anderen Browsern hab ich keine Probleme...
vieleicht sehr ihr ja den fehler, ich sehe ihn nicht, ihr seht ja an den auskommentierten zeilen, was ich schon alles versucht hab...
ich komm einfach nicht dahinter, wieso ich die höhe meiner liste nich unter 18px bekomme im IE. in allen anderen Browsern hab ich keine Probleme...
|
|
Quellcode |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" >
<head>
<title>trimaz.de</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<style type="text/css">
body {
margin:0px;
padding:0px;
background-color:#2B2B2C;
}
table#all {
margin:54px auto 0px auto;
padding:0px;
width:692px;
height:684px;
background-image:url(pics/background.png);
background-repeat:no-repeat;
}
td#menu {
margin:0px;
padding:211px 1px 0px 23px;
/* width:141px;*/
/* height:473px;*/
vertical-align:top;
}
td#menu ul {
margin:0px;
padding:0px;
/* width:141px;*/
/* height:187px;*/
list-style-type:none;
}
td#menu li {
margin:0px;
padding:0px;
/* width:141px;*/
/* height:17px;*/
}
td#menu a {
color:#FFFFFF;
font-family:Arial,Verdana,Sans-Serif;
font-weight:bold;
text-decoration:none;
font-size:11px;
height:17px;
/* line-height:7px;*/
/* width:141px;*/
margin:0px;
padding:0px;
}
td#main {
margin:0px;
padding:0px;
width:527px;
}
td#main div {
margin:194px 10px 30px 10px;
padding:0px;
width:487px;
height:450px;
overflow:auto;
color:#FFFFFF;
font-family:Arial,Verdana,Sans-Serif;
font-size:12px;
}
</style>
</head>
<body>
<table id="all">
<tr>
<td id="menu">
<ul>
<li><a href="?main=news">News</a></li>
<li><a href="?main=forum">Forum</a></li>
<li><a>---------------</a></li>
<li><a href="?main=crew">Crew</a></li>
<li><a href="?main=movies">Movies</a></li>
<li><a href="?main=projects">Projects</a></li>
<li><a href="?main=tutorials">Tutorials</a></li>
<li><a>---------------</a></li>
<li><a href="?main=contact">Contact</a></li>
<li><a href="?main=links">Links</a></li>
<li><a href="?main=linkus">Link us</a></li>
</ul>
</td>
<td id="main">
<div>
<?php include $inc;?>
</div>
</td>
</tr>
</table>
<a href="?main=admin">Admin</a>
</body>
</html>
|
vieleicht sehr ihr ja den fehler, ich sehe ihn nicht, ihr seht ja an den auskommentierten zeilen, was ich schon alles versucht hab...
Über mich: www.heinervdm.de
Persönlich Mitteilungen an mich bitte als PN (nicht Email) hier im Forum. ICQ und Skype bitte nur in Notfällen.
Persönlich Mitteilungen an mich bitte als PN (nicht Email) hier im Forum. ICQ und Skype bitte nur in Notfällen.
Hi heinervdm,
das liegt wahrscheinlich daran:
Quelle: CSS4YOU
Ich habe aber auch schon festgestellt, dass es in fast allen Browsern trotzdem machbar ist eine Höhe festzulegen, aber der IE hat da seine Eigenarten und legt die Höhe halt selbst irgendwie fest.
Gruß,
tommy
das liegt wahrscheinlich daran:
Zitat
Höhe: height
Beispiel
Bestimmt die Höhe eines Elements.
<p style="height:100px;border: 1px solid #000000;">
...
</p>
Initialwert: auto
Vererbbar: Nein
Anwendbar auf: Alle außer nichtersetzende Inlineelemente, Tabellenspalten und Spaltengruppen
Quelle: CSS4YOU
Ich habe aber auch schon festgestellt, dass es in fast allen Browsern trotzdem machbar ist eine Höhe festzulegen, aber der IE hat da seine Eigenarten und legt die Höhe halt selbst irgendwie fest.
Gruß,
tommy
RE: CSS & IE: listeneintrags höhe
Zitat
Original von heinervdm
ich komm einfach nicht dahinter, wieso ich die höhe meiner liste nich unter 18px bekomme im IE. in allen anderen Browsern hab ich keine Probleme...
Du meinst: die Höhe der einzelnen List-Elemente?
Zitat
vieleicht sehr ihr ja den fehler,
Ich weiß nicht, was du meinst.
Mach doch mal um alles (Liste, List-Element + Link) einen unterschiedlich farbigen Rahmen und sage mir dann, wo was zu groß ist.
Grüße
gaby
Die Listenelemente selber sind zu hoch.
ich kann die schriftgröße der einträge noch so klein wählen, aber die Listeneinträge gehen einfach nicht kleiner...
zwichen rand vom link und rand vom listeneintrag sind bestimmt noch 4px platz...
Ich habe es jetzt gelöst, in dem ich die li zu inline elementen gemacht habe, und dann die enthaltenen a zu blockelementen und diesen dann die volle zur verfügung stehende breite zugewiesen habe, so dass nach jedem listenelement ein zeilenumbruch ist, jetzt zeigen es alle Browser richtig an, aber ich finde die lösung nicht so toll...
ich kann die schriftgröße der einträge noch so klein wählen, aber die Listeneinträge gehen einfach nicht kleiner...
zwichen rand vom link und rand vom listeneintrag sind bestimmt noch 4px platz...
Ich habe es jetzt gelöst, in dem ich die li zu inline elementen gemacht habe, und dann die enthaltenen a zu blockelementen und diesen dann die volle zur verfügung stehende breite zugewiesen habe, so dass nach jedem listenelement ein zeilenumbruch ist, jetzt zeigen es alle Browser richtig an, aber ich finde die lösung nicht so toll...
Über mich: www.heinervdm.de
Persönlich Mitteilungen an mich bitte als PN (nicht Email) hier im Forum. ICQ und Skype bitte nur in Notfällen.
Persönlich Mitteilungen an mich bitte als PN (nicht Email) hier im Forum. ICQ und Skype bitte nur in Notfällen.
Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »heinervdm« (17. September 2005, 00:08)
Zitat
Original von tommyfin
Ich habe aber auch schon festgestellt, dass es in fast allen Browsern trotzdem machbar ist eine Höhe festzulegen, aber der IE hat da seine Eigenarten und legt die Höhe halt selbst irgendwie fest.
Für den IE ist jede Höhenangabe so wie eine Mindesthöhe.
Wenn der Inhalt nicht mehr in eine Box hineinpaßt, denht er sie bis zur erforderlichen Höhe aus.
Die anderen Browser machen das nicht.
Wenn dort der Inhalt zu viel wird (zb durch Schriftvergrößerung), quillt er eben seitlich und unten heraus.
Das sieht man am besten, wenn man der Box einen Rahmen gibt.
Ich habe hier mal den Code von heinervdm soweit verändert, daß die auskommentierte Höhe für <ul> wieder gültig wird.
Vergrößere hier mal die Schrift:
http://gaby77.ga.funpic.de/forum/screens…mit-height.html
In den allermeisten Fällen ist eine Höhenangabe also überflüssig.
Grüße
gaby
Zitat
Original von heinervdm
Die Listenelemente selber sind zu hoch.
ich kann die schriftgröße der einträge noch so klein wählen, aber die Listeneinträge gehen einfach nicht kleiner...
zwichen rand vom link und rand vom listeneintrag sind bestimmt noch 4px platz...
Ich habe es jetzt gelöst, in dem ich die li zu inline elementen gemacht habe, und dann die enthaltenen a zu blockelementen
[/quote]
Auweia!
Mußt du den Validator so quälen?
Was hat er dir getan?

Block-Elemente in Inline-Elementen sind nicht zulässig!
Ich gucke morgen nochmal.
Jetzt gehe ich erstmal ins Bett.
Zitat
Original von gaby*
Auweia!
Mußt du den Validator so quälen?
Was hat er dir getan?
Block-Elemente in Inline-Elementen sind nicht zulässig!
Ach, der quält sich dabei nicht, der bemerkt das doch erst garnicht, der sagt schön brav Vaild zu XHTML 1.1 und CSS
Über mich: www.heinervdm.de
Persönlich Mitteilungen an mich bitte als PN (nicht Email) hier im Forum. ICQ und Skype bitte nur in Notfällen.
Persönlich Mitteilungen an mich bitte als PN (nicht Email) hier im Forum. ICQ und Skype bitte nur in Notfällen.
|
|
PHP-Quelltext |
1 2 3 4 5 6 7 8 9 10 11 12 13 |
ul, li {
margin:0px;
padding:0px; }
ul {
width:141px;
list-style-type:none;
border: 4px solid blue; }
li {
width: 100%; /*eigentlich überflüssig */
border: 1px solid gray;
border-collapse: collapse; }
|
'width: 100%' im li-Element ist eigentlich überflüssig, da 'li' ein Block-Element ist und als solches sich per default über die gesamt Breite seines Eltern-Element (ul) ausdehnt.
Weiß der Geier, warum der IE das braucht.
|
|
PHP-Quelltext |
1 2 3 4 5 6 7 8 9 |
a {
font-family:Arial,Verdana,Sans-Serif;
font-weight:bold;
text-decoration:none;
font-size:11px;
line-height:17px; /*line-height statt height */
display: block;
width: 99%;
border: 1px solid red; }
|
'display: block; width: 99%' im a-Element bewirkt, daß du die gesamte Fläche des li-Elements als Link-Fläche hast und nicht nur die Fläche des Linktextes.
'line-height' bewirkt eine vertikale Zentrierung des Linktextes, allerdings darf hierbei der Linktext nicht 2-zeilig werden, sonst hast du zwischen den beiden Zeilen ebenfalls diesen line-height-Abstand.
Grüße
gaby
PS
kannst ja mal Rückmeldung geben, ob es jetzt so ist, wie du es wolltest.
Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »gaby*« (17. September 2005, 23:59)
Hmm, hat nicht geklappt...
Der IE macht die li immernoch 19px hoch, das sind 2 mehr als im Firefox und den anderen...
Der IE macht die li immernoch 19px hoch, das sind 2 mehr als im Firefox und den anderen...
Über mich: www.heinervdm.de
Persönlich Mitteilungen an mich bitte als PN (nicht Email) hier im Forum. ICQ und Skype bitte nur in Notfällen.
Persönlich Mitteilungen an mich bitte als PN (nicht Email) hier im Forum. ICQ und Skype bitte nur in Notfällen.
Zitat
Original von heinervdm
Hmm, hat nicht geklappt...
das kann ich nicht nachvollziehen.
URL, Screenshot?
Klick mal auf meinen roten Screenshot-Link.
http://gaby77.ga.funpic.de/forum/screens…/heiner-neu.htm
.
Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »gaby*« (18. September 2005, 13:58)
http://heinervdm.dyndns.info/kw/dfs/index.php - mit deinen tipps
http://heinervdm.dyndns.info/kw/dfs/index2.php - die validator quäl version
und noch ein screenshot, links Firefox rechts IE 6:
http://heinervdm.dyndns.info/kw/dfs/index2.php - die validator quäl version
und noch ein screenshot, links Firefox rechts IE 6:
Über mich: www.heinervdm.de
Persönlich Mitteilungen an mich bitte als PN (nicht Email) hier im Forum. ICQ und Skype bitte nur in Notfällen.
Persönlich Mitteilungen an mich bitte als PN (nicht Email) hier im Forum. ICQ und Skype bitte nur in Notfällen.
font-size:0px; hat geholfen.
ich hab beim IE Schriftgrad Mittel, also eingentlich die standarteinstellung...
ich hab beim IE Schriftgrad Mittel, also eingentlich die standarteinstellung...
Über mich: www.heinervdm.de
Persönlich Mitteilungen an mich bitte als PN (nicht Email) hier im Forum. ICQ und Skype bitte nur in Notfällen.
Persönlich Mitteilungen an mich bitte als PN (nicht Email) hier im Forum. ICQ und Skype bitte nur in Notfällen.


