| Autor |
Nachricht |
droptix
Threadersteller
Dabei seit: 21.04.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 02.02.2007 09:11
Titel kein CSS für <option> im IE und Opera |
  |
|
Ich hab mir zur Darstellung von verschachtelten Kategorien ein <select>-Feld hergenommen und entsprechende Einrückungen mit `margin` und `padding` vorgenommen. Ein kleines `background-image` verziert jede Zeile noch mit einem Icon. Sieht dann so hier aus:
Im Firefox ist natürlich alles bestens. Aber weder IE7 und der neueste Opera wenden diese Eigenschaften auf <option>-Elemente in einem <select>-Feld an. Dort bleiben die Zeilen ohne Einrückung und ohne Icon.
Hat jemand eine Idee, wie sich das auch für IE und Opera realisieren lässt?
Zuletzt bearbeitet von droptix am Fr 02.02.2007 09:13, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
pRiMUS
Dabei seit: 09.09.2003
Ort: Vienna
Alter: 49
Geschlecht: 
|
Verfasst Fr 02.02.2007 11:53
Titel
|
|
|
|
schonmal was von <optgroup> gehört? und die einzelnen elemente lassen sich sehr wohl gestalten.
|
|
| |
 |
|
|
Anzeige
|
|
|
droptix
Threadersteller
Dabei seit: 21.04.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 02.02.2007 12:32
Titel
|
|
|
|
Klar kenn ich <optgroup>. Problem bislang war immer, dass der <optgroup>-Eintrag selber nicht auswählbar ist. Hab grad aber noch ein bissel rumgespielt... man muss dem ja kein `label` verpassen. Das isses dann vielleicht!
|
|
| |
|
|
droptix
Threadersteller
Dabei seit: 21.04.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 01.04.2007 17:42
Titel keine Verschachtelung |
|
|
Nunja ich hatte irgendwann mal ein Testfile geschrieben und bin nun zu dem Schluss gekommen, dass sich <optgroup> leider nicht verschachteln lässt:
| drweb.de hat geschrieben: | | HTML 4.0 gestattet es nicht, <optgroup> zu verschachteln, weist jedoch daraufhin, dass dies eventuell später erlaubt wird. Internet Explorer 5 Macintosh Edition kann verschachtelte Hierarchien darstellen, die anderen beiden genannten Browser jedoch nicht, in ihnen wird durch ein <optgroup> ein </optgroup> impliziert. |
Leider fügt der IE eine Leerzeile ein, wenn man das Attribut "label" weglässt. Opera geht noch einen Schritt weiter und färbt diese zusätzlich schwarz ein, was man keinem Betrachter vorsetzen kann.
Wenn ich trotzdem verschachtele, dann wird <optgroup> falsch geschlossen und es kommt daher zu falschen Einrückungen bzw. Fehldarstellungen. Hier mal das Ergebnis im FF:
Hat da jemand noch eine gute Idee, wie man das besser lösen kann? TYPO3 benutzt zum Beispiel solche verschachtelten Bäume, die in jedem Browser funktionieren. Dachte erst, dass das vielleicht getarnte Listen sind, aber es handelt sich um Tabellen... also nicht gerade das Optimum für eine klare Struktur im Quelltext. Aber es funzt eben...
Hier also ein verschachteltes Testfile zum selber Ausprobieren:
| Code: | <?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>foo</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css"><!--
/*<![CDATA[*/
optgroup {
}
/*]]>*/
//--></style>
</head>
<body>
<select name="foo" size="7">
<optgroup>
<option value="1" selected="selected">1. Hauptkategorie [1]</option>
<optgroup>
<option value="3">1.1 Unterkategorie [3]</option>
<optgroup>
<option value="6">1.1.1 Unterunterkategorie [6]</option>
</optgroup>
<option value="4">1.2 Unterkategorie [4]</option>
</optgroup>
<option value="2">2. Hauptkategorie [2]</option>
<optgroup>
<option value="5">2.1 Unterkategorie [5]</option>
<optgroup>
<option value="8">2.1.1 Unterunterkategorie [8]</option>
</optgroup>
</optgroup>
</optgroup>
</select>
</body>
</html> |
Zuletzt bearbeitet von droptix am So 01.04.2007 17:46, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
PNG Option (PS.5)
option-tag einfärben?
Zeilenbruch innerhalb option-tag
Slideshow mit Option zu Vollbildmodus
<sup> innerhalb von <Option> ergibt invalides W3C
HTML: <select> voreingestelltes <option> tag ?
|
|
Willkommen auf dem Portal für Mediengestalter
