|
|||
listenmenu im ie6
Hallo,
bin gerade dabei ein Seite fertig zu stellen. Leider macht mir dabei der Internet Explorer 6 arg zu schaffen. Ich arbeite auf der Seite mit mehreren Listen, mit denen ich auch die Menüs gemacht habe. Das Problem ist das der Explorer diese Listen anscheinend nach meinem Text ausrichtet siehe screenshot. Wenn kein Text da ist ist alles bündig. Konkret ich habe im Stylesheet mein <p> auf margin 18px gesetzt um links und recht einen Rand von 18 px zu bekommen. Der IE6 verschiebt nun aber auch alle meine listen um 18px nach rechts. Bitte um Hilfe. Danke. |
Sponsored Links |
|
||||
Hi,
ein wenig Code wäre da schon sehr hilfreich.
__________________
Der höchste Lohn für unsere Bemühungen ist nicht das, was wir dafür bekommen, sondern das, was wir dadurch werden. Mein aktuelles Projekt bei idealseiten.de |
Sponsored Links |
|
|||
Hier die HTML Datei
HTML-Code:
<body> <div id="mainframe"> <ul id="list_top"> <li><a class="button_top" href="../01.html">01</a> <p class="b01"> formtast</p> </li> <li><a class="button_top" href="../02.html">02</a> <p class="b02"> Leistungen</p> </li> <li><a class="button_top active" href="../index.html">03</a> <p class="b03 active"> Referenzen</p> <a class="underbutton ub31 active" href="../03.html"> Corporate Design</a> <a class="underbutton ub32 show" href="print_design.html"> Printprodukte</a> <a class="underbutton ub33 show" href="produktgestaltung.html"> Produktgestaltung</a> </li> <li><a class="button_top" href="../04.html">04</a> <p class="b04"> Start Up!</p> </li> <li><a class="button_top" href="../05.html">05</a> <p class="b05"> Kontakt</p> </li> </ul> <ul id="list_bottom"> <li><a href="../06/fragen.html">06</a> <p class="b06"> Fragen</p> </li> <li><a href="../07/agb.html">07</a> <p class="b07"> AGB</p> </li> <li><a href="../08/impressum.html">08</a> <p class="b08"> Impressum</p> </li> </ul> <!-- BOTTOM BAR ################################################--> <div id="bottom_bar" style="background-image:url(../images/bar_03.png)"> <!-- background loading ################################################--> <div id="load01" style="background-image:url(../images/gernot_pic.png) );"></div> <div id="load02" style="background-image:url(../images/herzlicht_pic.png);"></div> <div id="load03" style="background-image:url(../images/hypnose_pic.png);"></div> <div id="load04" style="background-image:url(../images/papershred_pic.png);"></div> <div id="load05" style="background-image:url(../images/vital_bsp_pic.png);"></div> <div id="load06" style="background-image:url(../images/tumuenchen_pic.png);"></div> <!--Picture Scribble List--> <ul id="referenz_list"> <li style="background-image:url(../images/herzlicht_bsp_pic.png)"> <span class="ref01" style="background-image:url(../images/herzlicht_pic.png)" ></span> </li> <li style="background-image:url(../images/gernot_bsp_pic.png)"> <span class="ref02" style="background-image:url(../images/gernot_pic.png)"></span> </li> <li style="background-image:url(../images/hypnose_bsp_pic.png)"> <span class="ref03" style="background-image:url(../images/hypnose_pic.png)"></span> </li> <li style="background-image:url(../images/paper_bsp_pic.png)"> <span class="ref04" style="background-image:url(../images/papershred_pic.png)"></span> </li> <li style="background-image:url(../images/vital_bsp_pic.png)"> <span class="ref05" style="background-image:url(../images/vitalev_pic.png)"></span> </li> <li style="background-image:url(../images/tumuenchen_bsp_pic.png)"> <span class="ref06" style="background-image:url(../images/tumuenchen_pic.png)" ></span> </li> </ul> </div> <h1>Unsere Referenzen</h1> <p>Ein aussagekräftiges Portfolio schafft Vertrauen und ermöglicht es, einen ersten Eindruck über die Fähigkeiten des Unternehmens zu erlangen. Wir haben an dieser Stelle veranschaulichende Leistungsnachweise zusammen-getragen, die einige Arbeitsbereiche abdecken. Gerne sind wir bereit auf Anfrage spezielle Arbeitsnachweise zu erbringen. </p> <div id="picture" style="background-image:url(../images/herzlicht_pic.png)"></div> </div> </body> UND hier das Stylesheet #list_top ist das Hauptmenü am oberen Rand #list bottom ist das Menü ganz unten rechts ganz unten im stylesheet hab ich so Sachen wie Absatz (<p>) und links definiert. Code:
#mainframe { position:absolute; margin:auto; left:180px; right:15%; top:12%; width:498px; height:498px; z-index:1; border:1px solid; border-color:#66ff00; } /*Top Menu List Links*/ #list_top { position:absolute; width:178px; height:30px; z-index:2; margin-top:-36px; padding-left:0px; } #list_top li { position:relative; float:left; list-style-type:none; width:32px; height:30px; margin:auto; margin-right:3px; background-color:#b2ff7f; } #list_top li p { font-family:"Century Gothic", Arial; font-size:20px; display:none; margin:auto; background-color:#fff; border:1px solid; border-color:#66ff00; width:146px; height:28px; color:#66ff00; line-height:1.4; } #list_top li p.active { display:block; } #list_top li a.button_top { font-family:"Century Gothic",Arial; display:block; width:32px; height:30px; font-size:20px; text-align:center; line-height:1.4; color:#fff; text-decoration:none; } #list_top li a.active { background-color:#66ff00; width:32px; height:30px; display:block; } #list_top li:hover { background-color:#66ff00; width:32px; height:30px; display:block } #list_top li:hover p { display:block; z-index:6; } /*placing buttons*/ p.b01 { position:absolute; top:0px; left:-154px; } p.b02 { position:absolute; top:0px; left:-189px; } p.b03 { position:absolute; top:0px; left:-224px; } p.b04 { position:absolute; top:0px; left:-259px; } p.b05 { position:absolute; top:0px; left:-294px; } #list_top li a.underbutton { position:absolute; display:none; width:148px; height:19px; margin:auto; background-color:#b2ff7f; color:#fff; font-family:"Century Gothic", Arial; font-size:14px; line-height:1.2; font-weight:bold; text-decoration:none; } #list_top li a.underbutton:hover { background-color:#6f0; } #list_top li a.show { display:block; } #list_top li a.active { display:block; background-color:#6f0; } a.ub11 { margin:auto; top:36px; left:-154px; } a.ub12 { margin:auto; top:58px; left:-154px; } a.ub13 { margin:auto; top:80px; left:-154px; } a.ub21 { margin:auto; top:36px; left:-189px; } a.ub22 { margin:auto; top:58px; left:-189px; } a.ub23 { margin:auto; top:80px; left:-189px; } a.ub24 { margin:auto; top:102px; left:-189px; } a.ub31 { margin:auto; top:36px; left:-224px; } a.ub32 { margin:auto; top:58px; left:-224px; } a.ub33 { margin:auto; top:80px; left:-224px; } a.ub41 { margin:auto; top:36px; left:-259px; } a.ub42 { margin:auto; top:58px; left:-259px; } a.ub51 { margin:auto; top:36px; left:-294px; } a.ub52 { margin:auto; top:58px; left:-294px; } /*Bottom Menu Placing*/ #list_bottom { position:absolute; width:72px; height:20px; z-index:2; margin-top:503px; padding-left:429px; } #list_bottom li { position:relative; float:left; list-style-type:none; width:22px; height:20px; margin:auto; margin-right:2px; background-color:#b2ff7f; } #list_bottom li p { font-family:"Century Gothic", Arial; font-size:10px; display:none; margin:auto; background-color:#fff; border:1px solid; border-color:#66ff00; width:80px; height:18px; color:#66ff00; line-height:1.8; } #list_bottom li p.active { display:inline-block; } #list_bottom li a { font-family:"Century Gothic",Arial; display:block; width:22px; height:20px; font-size:14px; text-align:center; color:#fff; text-decoration:none; } #list_bottom li a.active { width:22px; height:20px; background-color:#6f0; } #list_bottom li:hover { background-color:#66ff00; width:22px; height:20px; display:block } #list_bottom li:hover p { display:block; z-index:6; } p.b06 { position:absolute; top:0px; left:-85px; } p.b07 { position:absolute; top:0px; left:-109px; } p.b08 { position:absolute; top:0px; left:-133px; } /* background loading */ #load01 { position:absolute; top:10px; left:10px; width:1px; height:1px; z-index:0; } #load02 { position:absolute; top:10px; left:10px; width:1px; height:1px; z-index:0; } #load03 { position:absolute; top:10px; left:10px; width:1px; height:1px; z-index:0; } #load04 { position:absolute; top:10px; left:10px; width:1px; height:1px; z-index:0; } #load05 { position:absolute; top:10px; left:10px; width:1px; height:1px; z-index:0; } #load06 { position:absolute; top:10px; left:10px; width:1px; height:1px; z-index:0; } /*Picture Menu*/ #picture_list { position:absolute; display:inline-block; left:73px; width:24px; height:110px; z-index:3; margin-top:0px; top:23px; } #picture_list li { position:relative; display:inline-block; width:24px; height:22px; z-index:3; } #picture_list li:hover { background-color:#66ff00; display:block; width:24px; height:22px; z-index:5; text-align:left; } span { display:none; } #picture_list li:hover span.pic01 { position:absolute; left:135px; width:228px; height:150px; display:block; top:-72px; } #picture_list li:hover span.pic02 { position:absolute; left:135px; width:228px; height:150px; display:block; top:-94px; } #picture_list li:hover span.pic03 { position:absolute; left:135px; width:228px; height:150px; display:block; top:-116px; } #picture_list li:hover span.pic04 { position:absolute; left:135px; width:228px; height:150px; display:block; top:-138px; } #picture_list li:hover span.pic05 { position:absolute; left:135px; width:228px; height:150px; display:block; top:-160px; } /*Ref_List*/ #referenz_list { position:absolute; display:inline-block; width:210px; height:135px; z-index:3; margin-top:0px; top:-36px; padding-left:15px; } #referenz_list li { position:relative; display:inline-block; width:65px; height:65px; z-index:3; float:left; margin-right:5px; margin-bottom:5px; padding-left:0px; } #referenz_list li:hover span.ref01 { position:absolute; left:233px; width:228px; height:150px; display:block; top:-13px; } #referenz_list li:hover span.ref02 { position:absolute; left:163px; width:228px; height:150px; display:block; top:-13px; } #referenz_list li:hover span.ref03 { position:absolute; left:93px; width:228px; height:150px; display:block; top:-13px; } #referenz_list li:hover span.ref04 { position:absolute; left:233px; width:228px; height:150px; display:block; top:-83px; } #referenz_list li:hover span.ref05 { position:absolute; left:163px; width:228px; height:150px; display:block; top:-83px; } #referenz_list li:hover span.ref06 { position:absolute; left:93px; width:228px; height:150px; display:block; top:-83px; } /*Kontaktliste*/ #kontakt { width:262px; height:38px; padding-left:18px; } #kontakt li { float:left; display:inline-block; font-family:"Century Gothic", Arial; font-size:12px; color:#666; text-align:justify; margin-right:8px; } /*leistung_liste*/ #leistung_liste{ position:absolute; width:200px; height:15px; padding-left:16px; } #leistung_liste li { position:relative; float:left; display:inline-block; } #leistung_liste li a.dot { background-color:#b2ff7f; width:10px; height:10px; display:inline-block; } #leistung_liste li a.text { font-family:"Century Gothic", Arial; width:150px; height:15px; cursor:pointer; text-decoration:none; } #leistung_liste li:hover a.dot{ background-color:#6f0; width:10px; height:10px; display:inline-block; } /*Formular*/ input { border: 1px solid; border-color:#6f0; background-color:#d1ffb2; font-family:"Century Gothic", Arial; font-size:12px; width:180px; } input.button { background-color:#6f0; text-decoration:none; display:inline; cursor:pointer; font-family:"Century Gothic", Arial; font-size:12px; color:#fff; font-weight:bold; outline:none; width:80px; } input.button:active { background-color:#b2ff7f; outline:none; } input.button:focus { outline:none; } textarea { border: 1px solid; border-color:#6f0; background-color:#d1ffb2; font-family:"Century Gothic", Arial; font-size:12px; width:226px; height:104px; } /*weiter*/ #list_next{ width:70px; heiht:20px; padding-left:16px; margin-top:-25px; z-index:5; } #list_next li { position:relative; display:inline-block; float:left; width:20px; height:18px; border:1px solid; border-color:#6f0; margin-right:10px; } #list_next li a{ font-family:"Century Gothic", Arial; font-size:20px; color:#6f0; text-decoration:none; line-height:0.9; font-weight:bold; } /*Stuff */ #picture{ position:absolute; left:252px; top:309px; width:228px; height:150px; } #bottom_bar{ position:absolute; background-color:#6f0; width:490px; height:136px; top:358px; left:4px; } p { font-family:"Century Gothic", Arial; font-size:12px; color:#666; margin-left:18px; margin-right:18px; margin-top:20px; text-align:justify; } h1 { font-family:"Century Gothic", Arial; font-size:12px; color:#018ce4; margin-left:18px; margin-right:18px; margin-top:26px; line-height:0; } span.agb { display:block; color:#018ce4; } a { font-family:"Century Gothic", Arial; font-size:12px; color:#666; } Ich vermute das eine Eigenschaft des Absatzes (<p>) direkt auf die Listen übertragen wird. Da wenn kein <p> im html die Listen normal ausgerichtet sind. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
IE6 Problem - Menü zumindest bedienbar machen | Ares | CSS | 1 | 11.02.2011 13:33 |
IE6 "cleart" Spalte ohne ersichtlichen Grund | ppatrick | CSS | 5 | 05.04.2010 15:50 |
IE6 ignoriert CSS-Anweisungen | Hallenkicker | CSS | 11 | 27.07.2008 21:58 |
Text-Zeichen im IE6 wiederholen sich – Problem... | rg69 | (X)HTML | 2 | 05.06.2008 15:36 |
Dropdown-menü ie6 Darstellungsprobleme | Koody | CSS | 6 | 29.08.2007 15:15 |