width Problem im IE

Status
Nicht offen für weitere Antworten.
T

The G

Mitglied
Hallo @ all!

Ich habe ein Problem mit "width". Wie ihr im Quelltext sehen könnt, wird die Zellenbreite in CSS angegeben. Doch der IE ignorriert diese Angaben.

Warum ist das so? Wo ist der Fehler?

Hier der Quelltext:
HTML: 
<html>
<head>
<style typ="text/css">
<!--
	
	td.empty { border-top: 1px solid #666666;  border-right: none; border-bottom: 1px solid #666666; border-left: none; background-image: url(The_Banner_adds/Navi/Zw_01.jpg); }
	
	td.long_empty { border-top: 1px solid #666666;  border-right: none; border-bottom: 1px solid #666666; border-left: none; width: 20px; background-image: url(The_Banner_adds/Navi/Zw_01.jpg); }
	
	td.first_empty { border-top: 1px solid #666666;  border-right: none; border-bottom: 1px solid #666666; border-left: 1px solid #666666; width: 20px; background-image: url(The_Banner_adds/Navi/Zw_01.jpg); }
	
	td.last_empty { border-top: 1px solid #666666;  border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: none; width: 20px; background-image: url(The_Banner_adds/Navi/Zw_01.jpg); }
	
    font.normal { color: #666666; }
    
    font.hover { color: #7F9BC3; }
    
    td.image_top { border-top: 1px solid #808080; 
				        border-right: 1px solid #808080;
				        border-bottom: 1px solid #808080; 
				        border-left: 1px solid #808080;
				        width: 982px;
				      }

    td.startseite { background-image: url(The_Banner_adds/Navi/Zw_01.jpg);
		            border-top: 1px solid #808080; 
			        border-right: none; 
		   	        border-bottom: 1px solid #808080; 
			      	border-left: none; 
					text-align: center;
					font-family: Arial,Helvetica,sans-serif;
					font-size: 9pt;
					color: #666666;
					vertical-align: middle;
				  }
    
	td.cinema { background-image: url(The_Banner_adds/Navi/Zw_01.jpg);
		        border-top: 1px solid #808080; 
			    border-right: none; 
		   	    border-bottom: 1px solid #808080; 
			    border-left: none; 
				width: 69px; 
				text-align: center;
				font-family: Arial,Helvetica,sans-serif;
				font-size: 9pt;
				color: #666666;
				vertical-align: middle;
				font-weight:bold;
			  }
    
	td.tutorials { background-image: url(The_Banner_adds/Navi/Zw_01.jpg);
		           border-top: 1px solid #808080; 
			       border-right: none; 
		   	       border-bottom: 1px solid #808080; 
			       border-left: none; 
				   width: 59px;  
				   text-align: center;
				   font-family: Arial,Helvetica,sans-serif;
				   font-size: 9pt;
				   color: #666666;
				   vertical-align: middle;
				 }
    
	td.projekte { background-image: url(The_Banner_adds/Navi/Zw_01.jpg);
		          border-top: 1px solid #808080; 
			      border-right: none; 
		   	      border-bottom: 1px solid #808080; 
			      border-left: none; 
				  width: 56px; 
			      text-align: center;
			      font-family: Arial,Helvetica,sans-serif;
			      font-size: 9pt;
				  color: #666666;
				  vertical-align: middle;
			    }
    
	td.downloads { background-image: url(The_Banner_adds/Navi/Zw_01.jpg);
		           border-top: 1px solid #808080; 
			       border-right: none; 
		   	       border-bottom: 1px solid #808080; 
			       border-left: none; 
				   width: 64px;
				   text-align: center;
				   font-family: Arial,Helvetica,sans-serif;
				   font-size: 9pt;
				   color: #666666;
				   vertical-align: middle;
				 }
    
	td.gallery { background-image: url(The_Banner_adds/Navi/Zw_01.jpg);
		         border-top: 1px solid #808080; 
			     border-right: none; 
		   	     border-bottom: 1px solid #808080; 
			     border-left: none; 
				 width: 49px;
				 text-align: center;
				 font-family: Arial,Helvetica,sans-serif;
				 font-size: 9pt;
				 color: #666666;
				 vertical-align: middle;
			   }
    
	td.jihaski { background-image: url(The_Banner_adds/Navi/Zw_01.jpg);
		         border-top: 1px solid #808080; 
			     border-right: none; 
		   	     border-bottom: 1px solid #808080; 
			     border-left: none; 
				 width: 83px;
				 text-align: center;
				 font-family: Arial,Helvetica,sans-serif;
				 font-size: 9pt;
				 color: #666666;
				 vertical-align: middle;
			   }
    
	td.links { background-image: url(The_Banner_adds/Navi/Zw_01.jpg);
		       border-top: 1px solid #808080; 
		       border-right: none; 
	   	       border-bottom: 1px solid #808080; 
		       border-left: none; 
			   width: 39px;
			   text-align: center;
			   font-family: Arial,Helvetica,sans-serif;
			   font-size: 9pt;
			   color: #666666;
			   vertical-align: middle;
			 }
    
	td.abmelden { background-image: url(The_Banner_adds/Navi/Zw_01.jpg);
		          border-top: 1px solid #808080; 
			      border-right: none; 
		   	      border-bottom: 1px solid #808080; 
			      border-left: none; 
				  width: 65px; 
				  text-align: center;
				  font-family: Arial,Helvetica,sans-serif;
				  font-size: 9pt;
				  color: #666666;
				  vertical-align: middle;
				}
	
	td.anmelden { background-image: url(The_Banner_adds/Navi/Zw_01.jpg);
		          border-top: 1px solid #808080; 
			      border-right: none; 
		   	      border-bottom: 1px solid #808080; 
			      border-left: none; 
				  width: 65px;
				  text-align: center;
				  font-family: Arial,Helvetica,sans-serif;
				  font-size: 9pt;
				  color: #666666;
				  vertical-align: middle;
				}

-->
</style>
</head>
<body>
<center>
    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" bordercolor="#808080" id="Navi" width="556">
		<tr>
			<td class="image_top" colspan="19">
				<img src="The_Banner_adds/Typewriter_with.jpg">
			</td>
		</tr>

		<tr>
			<td class="first_empty">
				&nbsp;
			</td>
			<td class="startseite">
				<a href="index.php" style="text-decoration:none">
				<font class="normal" onmouseover=this.className="hover" onmouseout=this.className="normal">
				<b>Startseite</b>
				</font>
				</a>
			</td>
			<td class="empty">
				&nbsp;
			</td>
			<td class="cinema">
				<a href="cinema.php" style="text-decoration:none">
				<font class="normal" onmouseover=this.className="hover" onmouseout=this.className="normal">
				Cinema 4D
				</font>
				</a>
			</td>
			<td width="10" class="empty">
				&nbsp;
			</td>
			<td class="tutorials">
				<a href="tutorials.php" style="text-decoration:none">
				<font class="normal" onmouseover=this.className="hover" onmouseout=this.className="normal">
				<b>Tutorials</b>
				</font>
				</a>
			</td>
			<td class="empty">
				&nbsp;
			</td>
			<td class="projekte">
				<a href="projekte.php" style="text-decoration:none">
				<font class="normal" onmouseover=this.className="hover" onmouseout=this.className="normal">
				<b>Projekte</b>
				</font>
				</a>
			</td>
			<td class="empty">
				&nbsp;
			</td>
			<td class="downloads">
				<a href="downloads.php" style="text-decoration:none">
				<font class="normal" onmouseover=this.className="hover" onmouseout=this.className="normal">
				<b>Download</b>
				</font>
				</a>
			</td>
			<td class="empty">
				&nbsp;
			</td>
			<td class="gallery">
				<a href="gallery.php" style="text-decoration:none">
				<font class="normal" onmouseover=this.className="hover" onmouseout=this.className="normal">
				<b>Gallery</b>
				</font>
				</a>
			</td>
			<td class="empty">
				&nbsp;
			</td>
			<td class="jihaski">
				<a href="jihaski_paski.php" style="text-decoration:none">
				<font class="normal" onmouseover=this.className="hover" onmouseout=this.className="normal">
				<b>Jihaski Paski</b>
				</font>
				</a>
			</td>
			<td class="empty">
				&nbsp;
			</td>
			<td class="links">
				<a href="links.php" style="text-decoration:none">
				<font class="normal" onmouseover=this.className="hover" onmouseout=this.className="normal">
				<b>Links</b>
				</font>
				</a>
			</td>
			<td>
				&nbsp;
			</td>
			<td class="abmelden">
				<a href="abmelden.php" style="text-decoration:none">
				<font class="normal" onmouseover=this.className="hover" onmouseout=this.className="normal">
				<b>Anmelden</b>
				</font>
				</a>
			</td>
			<td class="last_empty">
				&nbsp;
			</td>
		</tr>
</table>
</center>
</body>
</html>

So sieht die Seite im Internet Explorer und Firefox aus:
 
Kannst du mal den Sinn und Nutzen der Links mit integriertem <font> -Element, das beim Überfahren mit der Maus die CSS-Klasse normal gegen hover tauscht, erläutern, wo es doch die Pseudoklasse :hover für Verweise gibt :suspekt:

HTML: 
<a href="index.php" style="text-decoration:none">
<font class="normal" onmouseover=this.className="hover" onmouseout=this.className="normal">
<b>Startseite</b>
</font>
</a>
Umständlicher kann man einen Link nicht formatieren.
Anmerkung: bei deaktiviertem JavaScript wird das Tauschen der CSS-Klassen nicht ausgeführt!

Code: 
a:link
{
text-decoration: none;
color: color: #666666;
font-weight: bold;
}

a:hover { color: #7F9BC3; }
HTML: 
<a href="index.php">Startseite</a>

Btw, in der Tabellenzelle .startseite fehlt (gegenüber den übrigen Zellen) eine Weitenangabe.
 
Das mit dem :hover wurde bereits geändert. Das mit dem width bei .startseite hab ich nun auch geänder.

Doch das problem besteht weiterhinn. Und zwar bei allen Zellen. Der IE ignorriert einfach alle breitenangaben. :(

Was ist falsch. Irgendwo muss doch der Wurm drin sein?
 
Es gibt da eine Diskrepanz zwischen der Tabellenbreite mit 556px und der oberen Tabellenzelle image_top mit 982px.

Vielleicht solltest du auch die leeren Tabellenzellen empty zwischen den Links entfernen ... :confused:


[ editpost 06:17] Den Quelltext und die Vorschaugrafik habe ich doch schon mal gesehen -> Tabellen-Problem :suspekt:
 
Zuletzt bearbeitet von einem Moderator:
Hallo!

Und in dem Posting steht auch noch:
mhribernik hat gesagt.:
PS. Alles wurde per Hand getippt. Also FrontPage oder ähnliches hat den Code nie berührt.
Zum Vergrößern anklicken....
Irrwitziger weise steht in dem Qelltext der Seite (Link steht im Profil):
Code: 
<META content="Microsoft FrontPage 5.0" name=GENERATOR>
Mal ganz ehrlich, wer soll da denn durchblicken?!

Oder soll das ganze ein Tallentwettbewerb werden? :confused:

Gruss Dr Dau
 
Hallo,

Auch wenns dich nicht stört ;)... Hier eine Lösung für die Lücke zwischen Navigation und dem Bild.

Wenn du dem IMG-Tag ein Display: block Attribut verpasst wird diese Zeile entfernt.

Code: 
td.image_top img
{
    display: block;
}

MFG

GENESIS2005
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück