| Autor |
Nachricht |
denise2302
Threadersteller
Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht: 
|
Verfasst Do 27.11.2008 17:21
Titel ie6 z-index und transparente pngs... |
  |
|
Hallo!
Ich habe ein Problem.  Ich habe auf einer Seite ein Dropdown-Menü mit css... außerdem habe ich als hintergrund grafiken transparente pngs.. Nun gibt es im ie6 das Problem, dass das Dropdown nicht über dem ganzen Text ist... Der Z-Index bringt nichts, weil der inhalt div wegen den transparenten pngs position: relative braucht... Mach ich das raus aus dem inhaltsdiv, dann ist auch das Menü über allem. Ist das aber raus, dann kann man nicht mehr scrollen und keinen text mehr markieren...
Hatte schon mal jemand das problem und eine Lösung dafür?
|
|
| |
  |
 |
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Do 27.11.2008 17:46
Titel Re: ie6 z-index und transparente pngs... |
|
|
| denise2302 hat geschrieben: | | Nun gibt es im ie6 das Problem, dass das Dropdown nicht über dem ganzen Text ist... Der Z-Index bringt nichts, weil der inhalt div wegen den transparenten pngs position: relative braucht... Mach ich das raus aus dem inhaltsdiv, dann ist auch das Menü über allem. Ist das aber raus, dann kann man nicht mehr scrollen und keinen text mehr markieren... |
Vielleicht versuchst du das ganze erstmal deutlich zu beschreiben, ich verstehe nicht wirklich
wo das Problem liegt, am besten anhand von Quelltext oder einem Link zu der Seite. Denn nur
weil irgendwas relativ positioniert ist gibt es keine Probleme damit etwas absolut positioniertes
darüber zu schichten, aber so hört sich deine Beschreibung an...
|
|
| |
 |
|
|
Anzeige
|
|
|
denise2302
Threadersteller
Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht:
|
Verfasst Do 27.11.2008 17:59
Titel
|
|
|
|
Ich habe ein Layout mit transparenten PNGS. Wenn ich das verwende, dann muss ich aber in den Inhaltsdiv ein position: relative einfügen, damit man den text markieren und scrollen kann. die pngs sind mit filter:progid:DXImageTransform.Microsoft.AlphaImageLoader eingefügt worden. Nun funktioniert aber der z-index des Menüs nicht mehr, welches ja über dem Inhaltsdiv liegen soll... da tut sich aber nix... nur wenn ich das position: relative wieder rausmache... Aber das brauch ich ja...
|
|
| |
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 27.11.2008 18:10
Titel
|
|
|
| denise2302 hat geschrieben: | | Ich habe ein Layout mit transparenten PNGS. Wenn ich das verwende, dann muss ich aber in den Inhaltsdiv ein position: relative einfügen, damit man den text markieren und scrollen kann. die pngs sind mit filter:progid:DXImageTransform.Microsoft.AlphaImageLoader eingefügt worden. Nun funktioniert aber der z-index des Menüs nicht mehr, welches ja über dem Inhaltsdiv liegen soll... da tut sich aber nix... nur wenn ich das position: relative wieder rausmache... Aber das brauch ich ja... |
Sorry, immer noch nicht. Damit man einen Text markieren oder scrollen kann muss man kein
Element relativ positionieren. Am besten du postest mal den Quelltext ode einen Link.
|
|
| |
|
|
denise2302
Threadersteller
Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht:
|
Verfasst Do 27.11.2008 18:21
Titel
|
|
|
| Code: |
für ie6
<!--[if IE 6]>
<style type="text/css">
#header {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/layout_header.png', sizingMethod='crop');
background: none;
}
#content_wrapper {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/layout_content.png', sizingMethod='scale');
background: none;
}
.menu {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/layout_menu.png', sizingMethod='crop');
background: none;
z-index: 34;
}
#footer {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/layout_footer.png', sizingMethod='crop');
background: none;
}
.headline { border-bottom: 7px solid #fbead4; margin: -35px 0 20px 0; width: 370px; }
#content_bild {
width: 260px; height: 475px;
margin: 10px 0 0 10px;
float: left;
}
#content_inhalt {
width: 400px; height: 490px;
margin: -2px 5px 0 0; padding: 10px 15px 0 0;
color: #094b29; font-size: 8pt;
overflow: auto;
float: right;
position: relative;
}
.clr { clear: both; height: 1px; font-size: 0pt; }
</style>
<![endif]-->
css:
.menu { height: 28px; font-size: 10pt; z-index: 999; width: 710px; padding: 0 0 0 10px; background: url(../images/layout_menu.png); }
/* hack to correct IE5.5 faulty box model */
* html .menu {width:710px; w\idth:710px; z-index: 999; }
/* remove all the bullets, borders and padding from the default list styling */
.menu ul { padding: 0; margin: 0; list-style-type:none; }
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li { position:relative; display: block; float: left; }
/* a hack so that IE5.5 faulty box model is corrected */
* html a.current:link { text-decoration: none; color: #094b29; }
* html .menu a { overflow:hidden; text-decoration: none; float: left; }
.clr { float: none;}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul { visibility: hidden; position: absolute; height: 0; top: 28px; left: -8px; }
/* another hack for IE5.5 */
* html .menu ul ul { top:27px; t\op:28px; }
/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;}
/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited { width:150px; w\idth: 128px; }
/* style the top level hover */
.menu a:hover, .menu ul ul a:hover { background: none; }
.menu :hover > a, .menu ul ul :hover > a { color: #094b29; background: url(../images/menu.jpg); }
.menu a:link, .menu a:visited { display: block; height: 22px; font-size: 8pt; color: #ffffff; text-decoration: none; padding: 6px 25px 0 25px; }
.menu a:hover, .menu a:active { background: url(../images/menu.jpg); color: #094b29; }
.menu a.current { display: block; height: 22px; color: #094b29; font-size: 8pt; text-decoration: none; padding: 6px 25px 0 25px; background: url(../images/menu.jpg); }
.menu ul ul a.navi:link, .menu ul ul a.navi:active, .menu ul ul a.navi:visited { margin: 0; padding: 0 5px 0 5px; line-height: 22px; display: block; width: 100px; text-decoration: none; text-align: center; font-size: 8pt; color: #ffffff; background: #429168; }
.menu ul ul a.navi:hover { background: #fbe9d3; color: #094b29; }
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul, .menu ul a:hover ul{ visibility: visible; }
#wrapper {
width: 720px;
padding: 0; margin: 0 auto; margin-top: 10px;
}
#header {
width: 720px; height: 160px;
background: url(../images/layout_header.png);
}
#content_wrapper {
width: 720px;
background: url(../images/layout_content.png);
}
#content_bild {
width: 260px; height: 475px;
margin: 15px 0 0 18px;
float: left;
}
#content_inhalt {
width: 400px; height: 490px;
margin: 0 10px 0 0; padding: 10px 20px 10px 0;
color: #094b29; font-size: 8pt;
overflow: auto;
float: right;
}
.clr { clear: both; height: 0; }
#footer {
width: 720px; height: 29px;
padding: 5px 0 0 0;
background: url(../images/layout_footer.png);
text-align: center; font-size: 8pt;
}
html:
<div id="wrapper">
<div id="header"><?php include('layout_header.php'); ?></div>
<div class="menu"><?php include('layout_menu.php'); ?></div>
<div id="content_wrapper">
<div class="clr"> </div>
<div id="content_bild"><img src="images/content/willkommen.jpg" /></div>
<div id="content_inhalt">
.................
</div>
<div class="clr"> </div>
</div>
<div id="footer"><?php include('layout_footer.php'); ?></div>
</div>
|
Zuletzt bearbeitet von denise2302 am Do 27.11.2008 18:22, insgesamt 1-mal bearbeitet
|
|
| |
|
|
denise2302
Threadersteller
Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht:
|
Verfasst Fr 28.11.2008 09:23
Titel
|
|
|
niemand eine idee??
edith: ok habs noch hinbekommen... das menü ist ja durch listen definiert... Ich habe nun ul position:relative gegeben und einen höheren z-index..
Zuletzt bearbeitet von denise2302 am Fr 28.11.2008 09:38, insgesamt 1-mal bearbeitet
|
|
| |
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 51
Geschlecht:
|
Verfasst Fr 28.11.2008 09:33
Titel
|
|
|
basiert zwar auch auf DXImageTransform, aber versuch die alphatransparenz doch mal mit dem alt bewerten fix zu erreichen. scheint mir ein wenig ausgefeilter und variabler als deine ie-weiche:
http://www.twinhelix.com/css/iepngfix/
|
|
| |
|
|
denise2302
Threadersteller
Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht:
|
Verfasst Fr 28.11.2008 09:40
Titel
|
|
|
|
ja also habs ja jetzt noch hinbekommen... aber das mit der browserweiche find ich schon in ordnung, weil von twinhelix ist ja auch wieder mit javascript und meine nur mit css... das passt schon.. aber trotzdem danke!
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Transparente PNGs
Transparente 8 Bit PNGs
[Frage] Transparente Gifs und Pngs mit GD - Wie?
Transparente pngs überlappen lassen?
pngs/grauer Hintgergrund
anzeigeproblem IE (pngs, iframes)
|
|
Willkommen auf dem Portal für Mediengestalter
