zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden listenmenu im ie6

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.10.2010, 22:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.10.2010
Beiträge: 4
albi84 befindet sich auf einem aufstrebenden Ast
Standard 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.
Angehängte Grafiken
Dateityp: jpg WXPIE6000.jpg.jpg (49,6 KB, 15x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.10.2010, 06:33
Benutzerbild von philosapiens
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 09.05.2009
Ort: Berlin Südende
Beiträge: 297
philosapiens befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.10.2010, 13:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.10.2010
Beiträge: 4
albi84 befindet sich auf einem aufstrebenden Ast
Standard

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">&nbsp;&nbsp;formtast</p>
            </li> 
            <li><a class="button_top" href="../02.html">02</a>
            	<p class="b02">&nbsp;&nbsp;Leistungen</p>
            </li> 
            <li><a class="button_top active" href="../index.html">03</a>
            	<p class="b03 active">&nbsp;&nbsp;Referenzen</p>
                <a class="underbutton ub31 active" href="../03.html">&nbsp;&nbsp;&nbsp;&nbsp;Corporate Design</a>
                <a class="underbutton ub32 show" href="print_design.html">&nbsp;&nbsp;&nbsp;&nbsp;Printprodukte</a>
                <a class="underbutton ub33 show" href="produktgestaltung.html">&nbsp;&nbsp;&nbsp;&nbsp;Produktgestaltung</a>
            </li> 
            <li><a class="button_top" href="../04.html">04</a>
            	<p class="b04">&nbsp;&nbsp;Start Up!</p>
            </li> 
            <li><a class="button_top" href="../05.html">05</a>
            	<p class="b05">&nbsp;&nbsp;Kontakt</p>
            </li> 
		</ul>
        <ul id="list_bottom">
        	<li><a href="../06/fragen.html">06</a>
            	<p class="b06">&nbsp;&nbsp;Fragen</p>
            </li> 
            <li><a href="../07/agb.html">07</a>
           	  <p class="b07">&nbsp;&nbsp;AGB</p>
            </li> 
            <li><a href="../08/impressum.html">08</a>
           	  <p class="b08">&nbsp;&nbsp;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;
}
viele Dank.

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 20.10.2010, 14:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.10.2010
Beiträge: 4
albi84 befindet sich auf einem aufstrebenden Ast
Standard

hat keine Auswirkungen gehabt.
Mit Zitat antworten
  #5 (permalink)  
Alt 20.10.2010, 22:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.10.2010
Beiträge: 4
albi84 befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank, werde ich mal probieren.

Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:14 Uhr.