✔ Probleme mit Darstellung im IE

5im0n · 22. Juni 2007

Hallo
ich habe gleich zwei Probleme mit der Darstellung im IE. Im FF klappt es wunderbar.
Problem 1: Ich habe einen DIV Container dieser soll 40px hoch sein. im FF wird es auch so angezeigt aber im IE größer.

HTML:

<div id="login">
<form action="intern/savelog/check.php" method="post">
<table border="0" width="600px" height="40px">
<tr>
<td class="">Name:</td>
<td><input name="user" type="text" class="login" id="logname"></td>
<td class="">Passwort:</td>
<td><input name="passwort" type="password" class="login" id="logpass"></td>
<td><input name="submit" type="submit" class="logbutton" value="Login"></td>
</tr>
</table>
</form>
</div>

css:

HTML:

#login {
	background-color: #666666;
	height: 40px;
	width: 600px;
	border: 7px solid #000033;
	position: absolute;
	left: 230px;
	top: 490px;
}

Und Problem Nr.2 ist mein Menü hier will der IE den hover Effekt nicht und er zentriert den text nicht.

HTML:

<div id="menu">
  <table width="100%" border="1" cellpadding="8" cellspacing="0" align="center" >
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr><br>

  	<tr>
      <td class="menu"><center><a href="index.php?section=home" target="_top"><span class="link2">Home</span></a></center></td>
    </tr>

    <tr>
      <td class="menu"><center><a href="index.php?section=stadt" target="_top" ><span class="link2">Faslam</span></a></center></td>
    </tr>   

    <tr>
      <td class="menu"><center><a href="index.php?section=friends" target="_top" ><span class="link2">Friends</span></a></center></td>
    </tr>
  </table>
</div>

css

HTML:

#menu{
	background-color: #666666;
	height: 500px;
	width: 200px;
	border: 7px solid #000033;
	top: 20px;}

td.menu {
	background-image:url(../../images/blue/nav.png); 
	width:110px; 
	background-repeat:no-repeat; 
	background-position:center;
}
td.menu:hover {
	background-image:url(../../images/blue/nav_s.png); 
	width:110px; 
	background-repeat:no-repeat; 
	background-position:center;

}
.link2 {
	color:#FFFFFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:700;
	text-decoration:none;
	 margin-left: auto;
 	margin-right: auto;
 	text-align: left;

}

Vllt weiß ja jemand warum es nicht klappt.
Gruß
5im0n

Maik · 22. Juni 2007

Hi!

Problem Nummer eins liegt wohl an den Polsterungseigenschaften des form-Elements, die derzeit nicht auf null gesetzt sind.

Lösung:

Code:

#login form {
margin:0;
padding:0;
}

Problem Nummer zwei liegt daran, dass die Vorgängerversionen des IE7 die :hover-Pseudoklasse ausschliesslich für das a-Element untersützen - und eben nicht für die übrigen HTML-Elemente.

Ich empfehle dir, das Tabellenkonstrukt aufzulösen, die Links stattdessen in einer Liste zu notieren, und sie "direkt" mit dem CSS zu formatieren, dann klappt's auch mit dem :hover-Effekt in der 5er- und 6er-Baureihe des IE.

Dass der IE den Linktext nicht horizontal zentriert, liegt an den unterschiedlichen Breitenangaben für das umschliessende DIV mit 200px, der Tabelle mit 100%, was den 200px entspricht, und den Tabellenzellen, die nur 110px breit sind.

✔ Probleme mit Darstellung im IE

5im0n

Mitglied

Maik

Neue Beiträge