| Autor |
Nachricht |
denise2302
Threadersteller
Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht: 
|
Verfasst Di 01.07.2008 08:40
Titel ie 6 div um li elemente zeigt links weißen rand |
  |
|
Hallo!
Ich habe auf einer Seite ein ausklappbares Menü aus li elementen. Bei dem zweiten Menü ist um die li Elemente ein div darumgelegt, um dem Kasten einen border zu verpassen... Das sieht zwar im ff und ie7 schön aus, aber der ie6 will nicht so richtig mitmachen... Ich habe auch eine extra_Datei für den ie6 mit Conditional Comments... weiß aber jetzt nicht woran das liegt.. vll könnt ihr mir ja helfen?
So sieht das aus:
css:
| Code: |
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/flyout2.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.menu { z-index:1000; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; float: left; padding 0 0 0 0; margin: 0 25px 0 0;}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0; margin:0; list-style-type:none; width:127px; }
/* hack for IE5.5 */
* html .menu ul {margin-left:-16px; ma\rgin-left:0;}
/* position relative so that you can position the sub levels */
.menu li { position:relative; background: url(images/buttons.jpg) top left; height: 19px;
}
/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}
/* style the links */
.menu a, .menu a:visited { display:block; text-decoration:none; height:19px; width:127px; color:#1b942a; text-indent:5px; line-height: 19px; }
.menu2 a, .menu2 a:visited { display:block; text-decoration:none; width:168px; color:#1b942a; text-indent:5px; background: #e9e9d1; line-height: 19px; }
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {background: url(images/buttons.jpg) top left; width:127px; w\idth:126px;}
* html .menu2 a, * html .menu2 a:visited {background: #e9e9d1; width:160px; w\idth:160px;}
/* style the link hover */
* html .menu a:hover { background: url(images/buttons.jpg) right bottom;}
* html .menu2 a:hover { background: #f8f8ca; }
.menu :hover > a { background: url(images/buttons.jpg) right bottom; }
.menu2 :hover > a { background: #f8f8ca; }
.submenu { border: 2px solid #c2c2a6; width: 168px }
|
css ie6:
| Code: |
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/flyout2.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.menu { z-index:1000; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; float: left; padding 0 0 0 0; margin: 0 25px 0 0; }
/* remove all the bullets, borders and padding from the default list styling */
.menu ul { padding:0; margin:0; list-style-type: none; width:127px; }
/* hack for IE5.5 */
* html .menu ul {margin-left:-16px; ma\rgin-left:0; padding: 0;}
/* position relative so that you can position the sub levels */
.menu li { position:relative; background: url(images/buttons.jpg) top left; height: 19px; width: 127px; }
/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100;}
/* style the links */
.menu a, .menu a:visited { display:block; text-decoration:none; height:19px; width:127px; color:#1b942a; text-indent:5px; background: url(images/buttons.jpg) top left; }
.menu2 a, .menu2 a:visited { display:block; text-decoration:none; width:168px; color:#1b942a; text-indent:5px; background: #e9e9d1; }
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {background: url(images/buttons.jpg) top left; width:127px; w\idth:127px;}
* html .menu2 a, * html .menu2 a:visited {background: #e9e9d1; width:160px; w\idth:159px; margin: 0; padding: 0;}
/* style the link hover */
* html .menu a:hover { background: url(images/buttons.jpg) right bottom;}
* html .menu2 a:hover { background: #f8f8ca; }
.menu :hover > a { background: url(images/buttons.jpg) right bottom; }
.submenu { border: 2px solid #c2c2a6; width: 168px; }
|
html
| Code: |
<div class="menu">
<ul>
<li><a href="index.php">Start</a></li>
<li><a href="praxis.php">Praxis</a></li>
<li><a href="#">Leistungen<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul><div class="submenu">
<li class="menu2"><div class="menu2"><a href="#">Kindertherapie</a></div></li>
<li class="menu2"><div class="menu2"><a href="#">myofunktionelle Behandlung</a></div></li>
<li class="menu2"><div class="menu2"><a href="#">Stimmbehandlung</a></div></li>
<li class="menu2"><div class="menu2"><a href="#">neurologische Störungen</a></div></li></div>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo">Unsere Arbeit</a></li>
<li><a href="#nogo">Anfahrt</a></li>
<li><a href="#nogo">Kontakt</a></li>
<li><a href="#nogo">Impressum</a></li>
</ul>
|
|
|
| |
  |
 |
denise2302
Threadersteller
Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht:
|
Verfasst Di 01.07.2008 14:34
Titel
|
|
|
*schieb*
noch niemand das problem gehabt oder einen Lösungsansatz? 
|
|
| |
|
|
|
Anzeige
|
|
|
top
Moderator
Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht: 
|
Verfasst Di 01.07.2008 15:07
Titel
|
|
|
Das div an dieser Stelle kommt mir irgendwie ungünstig vor. (Ist es dort überhaupt erlaubt?)
Vielleicht geht es ja so: | Code: | | <ul class="submenu"> |
|
|
| |
|
|
denise2302
Threadersteller
Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht:
|
Verfasst Di 01.07.2008 15:38
Titel
|
|
|
mhmm wenn ich das mache, dann läuft im ff die box innen über den border hinaus, ich nehme mal an, das problem ist, dass
| Code: |
.menu ul { padding:0; margin:0; list-style-type:none; width:127px; } |
schon formatiert ist, und hat damit Probleme... versteh aber nicht warum, weil dem ul ja dann eine andere klasse zugeordnet ist und eine neue Breite... und auch beim ie verändert sich nichts wenn ich es etwas breiter mache... 
weiß nich wie ich das problem lösen soll...
und mit dem div an der stelle hatte der ff halt überhaupt keine probleme, nur der ie...
Zuletzt bearbeitet von denise2302 am Di 01.07.2008 15:39, insgesamt 1-mal bearbeitet
|
|
| |
|
|
denise2302
Threadersteller
Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht:
|
Verfasst Di 01.07.2008 16:07
Titel
|
|
|
Sooo, habe rausgefunden wo der Schuh drückt 
| Code: |
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul { visibility:hidden; position:absolute; top:0; left:127px; width: 175px;}
|
hier musste das width noch mit rein und nun funktioniert es auch! also mit <ul class...> und nicht meiner div-Variante 
hat sich damit erledigt.
lg denise
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Homepage ohne weißen Rand
Photoshop automatisch weißen Rand beschneiden
GoLive Raster ohne weißen Rand oder Head-Bild zentrieren?
go Live - weißer Rand links und oben
Safari zeigt Links auf Starseite nicht an
I-Frame hat im IE weißen Hintergrund
|
|
Willkommen auf dem Portal für Mediengestalter
