✔ Darstellung im IE 6 verschoben!

Status
Nicht offen für weitere Antworten.
bigfella

bigfella

Erfahrenes Mitglied
Hi.
Es geht um folgende HTML-Datei:
Code: 
<div id="menue_block">
<ul class="nav">
	     <a class="nav" href="http://www.test.de/">Home</a>
             <div id="werkzeug"></div>
</ul>

Nun die css-Datei:
Code: 
#menue_block {
		position:absolute;
		
		top: 146px;
		left: 0px;
		height:581px;
		
		width: 226px;
		background-image:url(menue_box.jpg);
		background-repeat:repeat-y;
		background-color:#0099CC;
	
		border-bottom: 1px solid #2d66a6;
		
		}
#menue_block .nav	{
		position:relative;
		display: block;
		text-decoration: none;
		font-weight: normal;
		text-align: center;
		top:40px; 
		margin: 20px 40px 0px 10px; 

		text-align:center;		
		font-family: Arial, Helvetica, sans-serif;
		color:#2d66a6;		
		font-size: 0.9em;
                }		

		
#menue_block .nav a {
		color:#2d66a6;
		text-decoration:none;
		border:1px solid #b8d5f5;	
		padding-left:20px;
		padding-right:30px;
		}	
#menue_block .nav a:hover{
		border:1px solid #2d66a6;		
		}			
		
#werkzeug{
		position:absolute;		
		background: url(werkzeug.jpg) no-repeat;
		z-index:20;
		height:133px;
		width: 226px;
		top:250px;
		left:-10px;
		}

Wenn ich es im Firefox anschauen ist die Grafik "werkzeug.jpg" perfekt positioniert.(left:-10px; in der #werkzeug).

Im IE6 aber ist die Grafik nach rechts verschoben.
Nur durch durch den Eintrag "left: -61px;" in #werkzeug würde die Grafik im IE richtig dargestellt werden. (Dann aber natürlich im Firefox verschoben.)

Könnt Ihr mir vielleicht sagen an was das wohl liegt bzw. wie ich es in beiden Browsern beheben könnte?

Vielen Dank!
 

Anhänge

  • 26363attachment.jpg
    26363attachment.jpg
    25,8 KB · Aufrufe: 46
Probier mal Folgendes:

HTML: 
<div id="menue_block">
    <ul class="navList">
             <li><a class="nav" href="http://www.test.de/">Home</a></li>
    </ul>
    <div id="werkzeug"></div>
</div>
Code: 
#menue_block {
                position:absolute;
                top: 146px;
                left: 0px;
                height:581px;
                width: 226px;
                background-image:url(menue_box.jpg);
                background-repeat:repeat-y;
                background-color:#0099CC;
                border-bottom: 1px solid #2d66a6;
                }


ul.navList {
                margin: 0;
                padding: 0;
                list-style: none;
}


#menue_block .navList       {
                position:relative;
                display: block;
                text-decoration: none;
                font-weight: normal;
                text-align: center;
                top:40px;
                margin: 20px 40px 0px 10px;
                text-align:center;
                font-family: Arial, Helvetica, sans-serif;
                color:#2d66a6;
                font-size: 0.9em;
                }


#menue_block .navList a.nav {
                color:#2d66a6;
                text-decoration:none;
                border:1px solid #b8d5f5;
                padding-left:20px;
                padding-right:30px;
                }
#menue_block .navList a.nav:hover{
                border:1px solid #2d66a6;
                }

#werkzeug{
                position:absolute;
                background: url(werkzeug.jpg) no-repeat #ffff00;
                z-index:20;
                height:133px;
                width: 226px;
                top:250px;
                left:-10px;
                }
 
Hi!

Darauf aufbauend auch mein Darstellungsproblem:

HTML: 
div#header {
position:absolute; 
left:217px;
 top:86px
}

Dieses Div wird im FF perfekt dargestellt, und im IE ist es erst gar nicht zu sehen bzw. ist verrutscht, wenn ich das Style als <div style="position:absolute;left:217px;top:86px"> einbaue...
http://www.volke.biz/v2/wbblite
 
Zuletzt bearbeitet:
Zwischen dem schliessenden </td>- und </tr>-Tag darf kein DIV-Element enthalten sein.

Und wieso baust Du das DIV nicht einfach in der entsprechenden Tabellenzelle (ohne absolute Positionierung) ein?
 
Hi!
Das Div ist eine Ebene, die über einer Grafik dargestellt wird. Im Header gibt es also nur eine Spalte mit der Header-Grafik, über welcher dann das DIV liegt.
 
Darf man auch erfahren, warum Du die Grafik nicht als Hintergrundbild für die Tabellenzelle bestimmst?

HTML: 
<td bgcolor="#EDEDED">
   <table width="100%" border="0" cellspacing="0" cellpadding="0" background="http://www.volke.biz/v2/wbblite/images/bg.gif">
      <tr>
        <td style="background:url(http://www.volke.biz/v2/wbblite/images/header_bg.jpg) no-repeat;height:112px;vertical-align:top;">
          <div id="header">
                ...
          </div>
        </td>
      </tr>
   </table>
...
Code: 
div#header {
margin-left: 200px;
margin-top:76px;
}
 
Hi..
Ich nochmal..

Hab meine Seite im Opera 9.10 getestet.
Nun sind die Formularfelder verschoben.
Bei IE6 und Firefox nicht.
Da passt alles. (Siehe Anhang --> Darstellung richtig/falsch)

An was könnte das liegen?
Hoffe jemand kann mir weiterhelfen.
Vielen Dank,
schöne Ostern.


PHP: 
 <div id="anfrage_formular">
 
	  <form method="post" action="mailto:info@info.de" enctype="text/plain">
	  
	 
	  <label class="feld">Firma:</label>
	 <input type="text" name="Firma" id= "Firma" maxlength="20" value="" />
	  
	  <label class="feld">Anrede:</label>
	  <input type="text" name="Anrede" id="Anrede" maxlength="20" value="" />
	 	
	  
	  <label class="feld">Vorname: *</label>
	  <input type="text" name="Vorname" id="Vorname" maxlength="20" value="" />
	  
	 
	  <label class="feld">Nachname: *</label>
	  <input type="text" name="Nachname" id="Nachname" maxlength="20" value="" />
	  
	  
	  <label class="feld">Straße:</label>
	  <input type="text" name="Straße" id="Straße" maxlength="20" value="" />
	  
	  
	  <label class="feld">PLZ</label>
	  <input type="text" name="Plz" id="Plz" value="" />
	  
	  <label class="feld">Ort:</label>
	  <input type="text" name="Ort" id="Ort" value="" />
	  
	  <label class="feld">Telefon: *</label> 
	  <input type="text" name="Telefon" id="Telefon" maxlength="20" value="" />
	  
	   
	  <label class="feld">Telefax:</label>
	  <input type="text" name="Telefax" id="Telefax" maxlength="20" value="" />
	  
	  
	  <label class="feld">E-Mail: *</label>
	  <input class="klein" type="text" name="E-Mail" id="E-Mail" maxlength="20" value="" />
	  
	  
	  <label class="feld">Ihre Mitteilung: *</label>
	  <input class="mitteilung" type="text" name="Mitteilung" id="Ihre Mitteilung" value="" />
	  
	  
	  <input type="submit" class="abschicken_normal" onmouseover="this.className='abschicken_hover'" onmouseout="this.className='abschicken_normal'" value="Formular senden" />
	  
	  </form>
 
 </div>

PHP: 
label.feld{				/*Farb und Fontangeabe für Feldbezeichnung*/
		font-family: Arial, Helvetica, sans-serif;
		color:#2d66a6;
		
		
		position:relative;
		font-size: 0.75em;
		padding-left:0px;
		line-height:1.5em;
		margin-top:7px;
		width:100px;
		display:block;
		
		
		}		
		
#anfrage_formular{		/* Formularbezeichnung */
		position:absolute;
		margin-left: 50px;
		padding-top:20px;

		}
#anfrage_formular input{ 					/* graue eingabefelder*/
		
		background-color: #F6F6F6; 
		border: 1px solid #999999; 
		font-family: Arial, Helvetica, sans-serif;
		
		color: #336699;
		width:150px;
		top:0px;
		padding-left:3px;
		padding-right: 3px;
		
		font-family: Arial, Helvetica, sans-serif;
		color:#2d66a6;		
		font-size: 0.75em;
		
		margin-top:-15px;
		margin-bottom:20px;
		float:right;
		/*clear:both;*/
		
		margin-right:350px;

		}

		
#anfrage_formular input.abschicken{
		width: 158px;
		text-align:center;
		}		

#anfrage_formular input.mitteilung{
		height:50px;
		width: 150px;
		padding:3px;
	
		}		
#anfrage_formular input.abschicken_normal,
#anfrage_formular input.abschicken_hover
{
		width:158px;
		text-align:center;
		}			
/*input.abschicken {
		padding-bottom:2px;
		
		}
input.abschicken:hover {
	
	color:black;
	text-decoration:underline;
	
	}		*/
input.abschicken_normal{    /*für IE mit javascript*/
		padding-bottom:2px;
		padding-top:2px;
		width:250px;
		}	
input.abschicken_hover {     /*für IE mit javascript*/
	padding-bottom:2px;
	padding-top:2px;
	color:black;
	text-decoration:underline;
	width:250px;
	}
 

Anhänge

  • richtig.JPG
    richtig.JPG
    13 KB · Aufrufe: 37
  • falsch.JPG
    falsch.JPG
    12,1 KB · Aufrufe: 33
Hi,

versuch es mal mit einer relativen Positionierung (position:relative) für #anfrage_formular input.
 
Super, vielen vielen Dank für Deine schnelle Hilfe.
Hast natürlich vollkommen Recht.

DANKE für Deine Hilfe!
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück