|
|||
span-infobox wird in ie6 nicht angezeigt?
hallo, ich bin grad am verzweifeln...
habe kleine infobuttons erzeugt, die beim überfahren mit der maus sowohl ihr aussehen ändern, als auch ein extra-positioniertes img bzw. eine infobox einblenden. soweit kein problem. nur der ie6 zeigt mir keine img bzw. die infobox? dabei hab ich das schon mal auf einer anderen seite so ähnlich angewandt und da gab´s kein problem? wo hab ich den da einen fehler gemacht?? bitte helft mir. zur veranschaulichung hab ich eine test-seite online gestellt: THP-Architekten Realisierungen - GKK Wartebereich und hier das css-schnipsel: Code:
@charset "utf-8"; * { padding: 0; margin: 0; } a.pic1 {display: block; background-image: url(../img/1gr.gif); width:19px; height:18px;} a.pic2 {display: block; background-image: url(../img/2gr.gif); width:19px; height:18px;} a.pic3 {display: block; background-image: url(../img/3gr.gif); width:19px; height:18px; } a.info { display: block; background-image: url(../img/i_r.gif); width:19px; height:18px; } a.pic1:hover { background-image: url(../img/1sc.gif);} a.pic2:hover { background-image: url(../img/2sc.gif);} a.pic3:hover { background-image: url(../img/3sc.gif);} a.info:hover { background-image: url(../img/i_sc.gif);} a.pic1 span, a.pic2 span, a.pic3 span { visibility: hidden; position: absolute; /*width: 600px; height: 800px;*/ bottom: -350px; left: -530px; background: white;} a.info span { visibility: hidden; position: absolute; width: 500px; top: 10px; left: -999xp; /*margin-top: 5em;*/ border: 1px solid #8f8f8f; text-decoration: none; text-align: justify; white-space: normal; opacity: 0.7; filter: alpha(opacity=70); /*IE*/ zoom: 1; -moz-opacity: 0.7; z-index: 110; } a.pic1:hover span, a.pic2:hover span, a.pic3:hover span { visibility: visible; z-index: 100; } a.info:hover span { visibility:visible; /*position: absolute;*/ display: block; width: 500px; top: 10px; left: -620px; color: black; background:white; border: 1px solid #8f8f8f; padding: 2px; text-align: justify; white-space: normal; opacity:0.7; filter:alpha(opacity=70); /*IE*/ zoom: 1; -moz-opacity: 0.7; z-index: 110; } a.info span p{ text-align: justify; white-space: normal; } a.pic1:hover span img, a.pic2:hover span img, a.pic3:hover span img { position: relative; z-index: 100; } a.pic1:active span, a.pic2:active span, a.pic3:active span, a.pic1:focus span, a.pic2:focus span, a.pic3:focus span{ visibility: visible; z-index: 10; } a.pic1:active span img, a.pic2:active span img, a.pic3:active span img, a.pic1:focus span img, a.pic2:focus span img, a.pic3:focus span img { position: relative; z-index: 10; } #projpic { width:500px; margin-left:1px; padding-bottom: 2px; height:20px; overflow: hidden; color: #366; background: white; } #projpic ul { margin:0; padding:0; list-style: none; white-space:nowrap; display:table-row; } #projpic ul li { display:table-cell; padding:0 2px; background: white; vertical-align: top; } #projpic ul li p { text-align: justify; } #projpic ul li img { border: 1px solid #555; } 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" lang="de" xml:lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/screen2.css" rel="stylesheet" type="text/css" media="screen" /></head> <body> <div id="projtxt"> <div id="projpic"> <ul> <li><a class="pic1" href="#"><span><img src="img/gkk/gkk1_gr.jpg" alt="Innenansicht Gebietskrankenkasse Wartebereich" title="GKK Wartebereich" /></span></a></li> <li><a class="pic2" href="#"><span><img src="img/gkk/gkk2_gr.jpg" alt="Innenansicht Gebietskrankenkasse Wartebereich" title="GKK Wartebereich" /></span></a></li> <li><a class="pic3" href="#"><span><img src="img/gkk/gkk3_gr.jpg" alt="Innenansicht Gebietskrankenkasse Wartebereich" title="GKK Wartebereich" /></span></a></li> <li><a class="info" href="#"><span><p>Lorem Ipsum</p></span></a></li> </ul> </div> <p class="right">Noch mehr Lorem Ipsum</p> </div><!-- projtxt ende --> </body> hab schon mittlerweile zig varianten durch z.b. die klassen den li zugeordnet. oder statt mit visibility: mit display: gearbeitet. macht keinen unterschied. firefox und ie7 haben kein problem. bloss der ie 6 schluckt mir meine bilder.... was mach ich falsch? hoffe ihr könnt mir helfen... danke... |
Sponsored Links |
|
||||
Klingt nach diesen Problem: CSS2 Tests - Pure CSS Popups Bug Note
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic |
Sponsored Links |
|
|||
wow, danke für deine schnelle antwort...
ich hab das mal für die img´s angewandt, aber es hat leider nicht den gewünschten erfolg gebracht. die info-box hätte ohnehin der beschriebenen lösung entsprochen... und die wird ja auch nicht angezeigt.... leider... |
|
|||
oh, halt entschuldige.... ich hab das jetzt mal auf alle :hover angewandt (nicht nur die spans) und jetzt werden die bilder angezeigt... zwar an komplett falsche stelle, aber da kann ich mich ja noch weiter spielen...
danke! |
|
|||
Locita, schau dir deinen Entwurf auch unter Opera an.
Unter Opera 9.5x werden 1. vertikale und auch horizontale Scrollleisten ständig eingeblendet 2. flattert die Seite beim Wechsel von Navigationspunkt "3" auf "i". |
|
|||
@ EvT
danke für den hinweis. ich verwende opera 9.25 und mir ist das noch nicht aufgefallen... scroll-leisten: meinst du am bildrand? liegt vielleicht an der auflösung. ich hab eine zugegeben ungeschickte format dawischt (das liegt daran, dass ich vom eigentlichen entwurf durch herum spielen mit css weit entfernt bin...) das werde ich noch lösen... anderes format, overflow: .... das flattern kann ich nicht nachvollziehen. was könnte man da dagegen tun? @ parcelsus hab mich auch auf der coolen karte eingetragen. sorry, du bleibst weiterhin alleine da unten... |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Navigation verschwindet im IE6 | emti | CSS | 4 | 12.05.2009 16:01 |
ie6 hintergrund wird nicht angezeigt | tanaka | CSS | 2 | 01.08.2008 15:35 |
IE6 Problem, Rechte spalte (content) wird zu weit rechts angezeigt... | kux | CSS | 20 | 02.06.2008 13:30 |
Problem ie6 content wird links unter menu angezeigt | drzo | CSS | 0 | 13.02.2008 21:35 |
Menü wird im IE6 nicht angezeigt | Knarzer77 | CSS | 11 | 14.03.2007 14:32 |