|
|||
[Gelöst] Span in <button> ausserhalb positionieren (FF)
Vielleicht stehe ich gerade auf dem Schlauch.
In einem Button-HTML-Element befindet sich ein span (zulässig). Dessen visuelle Anzeige wird unterdrückt, bis eine Nutzereingabe (hover, focus, active) erfolgt. Bei Eingabe soll dieses Span ausserhalb des button-Elementes angezeigt werden. IE8 und Opera 10 zeigen das span an. Der Fuchs beschränkt die Anzeige auf die Abmessungen des Button-Elements und zeichnet nicht darüber hinaus. Kann der Fuchs das nicht? Will er nicht? Hier ein gestripptes Testcase mit den notwendigen Angaben. HTML-Code:
<!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="de" lang="de"> <head> <title>Buttontest span outside</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <meta name="description" content="" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <style type="text/css"> #suche { height: 1.5em; margin-left: 0.625em; margin-top: 4em; position: relative; width: 10.625em; border-top: 2px solid #fff; overflow: visible; } #suche form { font-size: 0.8735em; overflow: visible; } #suche button { position: absolute; display: block; top: -2.9em; left: 1.9em; height: 3em; width: 3em; border: none; background-color: red; cursor: pointer; text-indent: -500em; overflow: visible; } #suche button:focus, #suche button:hover { background-color: green; } #suche label { position: absolute; left: -400em; } input#suchbegriff { position: absolute; display: block; top: 0; height: 1.125em; width: 11em; left: 1.8em; color: #222; font-size: 1.125em; font-family: Axel, "Arial Narrow", Arial, Swiss, Helvetica, sans-serif; border: 1px solid #7a1818; } #suche button span { left: -400em; background-color: #fff; text-indent: 0; } #suche button.up:hover span, #suche button.up:active span, #suche button.up:focus span { position:absolute; display: block; left: auto; top: -2em; width: 15em; height: auto; line-height: 1.4em; border: 1px solid #7a1818; color: #222; background-color: #fafafa; z-index: 4; text-indent: 5px; } #suche button.up:hover span { top: 0em; } </style> </head> <body> <div id="suche"><form id="search" action="http://example.com/test.html" method="get"><label for="suchbegriff">Suchen</label><input type="text" id="suchbegriff" maxlength="25" title="Suchbegriff tippen und Suche mit Lupe oder [Enter] starten" value="Suche" onblur="if(this.value=='')this.value='Suche';" onfocus="if(this.value=='Suche')this.value='';"/><button class="up" type="submit"><span>Suche abschicken / Suchseite</span></button></form></div> </body> </html>
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte Geändert von andir (22.10.2009 um 16:53 Uhr) |
Sponsored Links |
Sponsored Links |
|
|||
Nein, dann wird gar nichts angezeigt. Finde ich auch logisch.
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
|
||||
HTML-Code:
<!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="de" lang="de"> <head> <title>Buttontest span outside</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <meta name="description" content="" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <style type="text/css"> #suche { position:relative; height: 5em; margin:4em auto 0 auto; width: 10.625em; border-top: 2px solid #fff; } #suche form { font-size: 0.8735em; } #suche button { display: block; height: 3em; width: 3em; border: none; background-color: red; cursor: pointer; } #suche button:focus, #suche button:hover { background-color: green; } #suche label { position: absolute; left: -1000em; } input#suchbegriff { display: block; height: 1.125em; width: 11em; color: #222; font-size: 1.125em; font-family: Axel, "Arial Narrow", Arial, Swiss, Helvetica, sans-serif; border: 1px solid #7a1818; } #suche button span { position:absolute; left: -1000em; top:-1000em; background-color: #fff; } #suche button.up:hover span, #suche button.up:active span, #suche button.up:focus span { position:absolute; display: block; left: auto; top: -2em; width: 15em; height: auto; line-height: 1.4em; border: 1px solid #7a1818; color: #222; background-color: #fafafa; text-indent: 5px; } #suche button.up:hover span { top: 0em; } </style> </head> <body> <div id="suche"><form id="search" action="http://example.com/test.html" method="get"> <button class="up" type="submit"><span>Suche abschicken / Suchseite</span></button> <label for="suchbegriff">Suchen</label><input type="text" id="suchbegriff" maxlength="25" title="Suchbegriff tippen und Suche mit Lupe oder [Enter] starten" value="Suche" onblur="if(this.value=='')this.value='Suche';" onfocus="if(this.value=='Suche')this.value='';"/> </form></div> </body> </html>
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus Geändert von hubspe (22.10.2009 um 16:10 Uhr) |
|
||||
Im ff2 funktioniert es auch mit position: absolute für button.
Im ff3 wird button span sichtbar wenn ich position: absolute; für button entferne. Wenn ich ein weiteres Element um button ziehe und es absolute positioniere funktioniert es: Code:
<div class="button"> <button class="up" type="submit"> <span>Suche abschicken / Suchseite</span> </button> Code:
#suche .button { position: absolute; top: -2.9em; left: 1.9em; } #suche button { /*position: absolute;*/ /*top: -2.9em;*/ /*left: 1.9em;*/ display: block; height: 3em; width: 3em; ... ... }
__________________
MfG Jens Geändert von plastiko (22.10.2009 um 16:40 Uhr) |
|
|||
Danke für Eure Antworten - und Lösungen!
Es scheint tatsächlich an der Positionierung des Button-Element zu liegen - man lernt nicht aus! (absolute und relative zeigen den gleichen Effekt) Der FF rendert dieses Formelement also unterschiedlich, je nach dem, ob eine Positionierung erfolgt ist oder nicht. @Klaus, ich muss aus bestimmten Gründen den Button in der Gegend umherschieben und darf nix anderes beeinflussen, deswegen wähle ich die Methode mit dem umschließenden div. In Bugzilla habe ich dazu nichts gefunden, aber vielleicht gibts ja auch keine Vorgaben bezüglich der Darstellung...
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
|
||||
Zitat:
Das div habe ich doch gar nicht gestrichen. Im Quelltext habe ich nur den button vor den input geschrieben, weil das einfacher ist. Oder darfst du am Quelltext nichts ändern.
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus |
|
|||
Zitat:
Meinen Quelltext, Klaus, darf ich ändern wie ich lustig bin, zum Glück
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte Geändert von andir (23.10.2009 um 00:54 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Div oder Span unten links positionieren | pkipper | CSS | 8 | 21.06.2011 09:48 |
grafische Navigation horizontal zentrieren, klappt nicht | lila_3 | CSS | 4 | 30.11.2010 11:25 |
Element ausserhalb seite positionieren, so daß keine scrollbar entsteht | st-SaHiB | CSS | 5 | 20.07.2009 09:49 |
Navigation verschwindet im IE6 | emti | CSS | 4 | 12.05.2009 16:01 |
span-infobox wird in ie6 nicht angezeigt? | locita | CSS | 9 | 13.07.2008 17:33 |