min-width

slowpoke · 15.08.2007, 14:39

Hallo zusammen,
ich habe ein Problem. Eine Website die ich erstellt habe funktioniert mit Firefox, aber der IE will nicht so recht.

Das Problem ist das "min-width" das ich vergeben habe, das aber vom IE nicht akzeptiert wird. Ich habe mich im Internet schlau gemacht und gegooglet, und auch einiges gefunden. Ich habs trotzdem nicht geschafft

Könnte mir jemand in das Dokument schreiben wie es sein muss, sodass die Navigation links nicht verkleinert wird wenn das Fenster kleiner gemacht wird?

Und wenn jemand noch Zeit hat, auf mein Dokument abgestimmt erklären was er getan hat? Aber am wichtigsten ist mir, dass es erst einmal funktioniert

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="-----------" />
<meta name="description" content="--------" />
<meta name="author" content="---------" />
<meta name="keywords" content="--------" />


<title>Titel der Seite</title>
<style type="text/css">
<!--
#container {
position: absolute;
top: 110px;
left: 1022px;
width: 1.5px;
height: 18px;
border:none;
background-color:#CFF0D4
}

#container2 {
position: absolute;
top: 110px;
left: 170px;
width: 1.5px;
height: 18px;
border:none;
background-color:#CFF0D4
}



#navi {
min-width:170px
}

a {text-decoration: none; color:#FF0000}
a:visited {color:#CFF0D4}
a:hover {color:#FFFFFF}
a:active {color:#CFF0D4}
a:link {color: #CFF0D4}



-->
</style>
</head>

<body bgcolor="#8F8AFD" leftmargin="0" marginwidth="0" marginheight="0" topmargin="0">

<table width="1024" border="0" cellpadding="0" cellspacing="0">

<!--HEADER-->

<tr>
<td height="40" bgcolor="#E7F8E9" width="170">

	<span style="font-family:Verdana, Arial, 'Times New Roman'; font-size:12px">
		
			
		</span>
		</td>



<td bgcolor="#FFFFFF" width="854" height="40" style="padding-left:0mm">

<img src="bilder\banner2.jpg" width="855" height="97" align="left" /></td>


</tr>

</table>


<!--link_HEADER-->
<table bgcolor="#8F8AFD" width="100%" height="40" cellpadding="0" cellspacing="0">
<td>
<div style="padding-left:44mm">

<span style="font-family:Verdana, Arial, 'Times New Roman'; font-size:18px; color:#CFF0D4; font-variant:small-caps;">

&nbsp;&nbsp; -----------------

</span>


<span style="font-family:Verdana, Arial, 'Times New Roman'; font-size:16px; color:#CFF0D4; letter-spacing:3px">

-----------------  

</span>

</div>

<div id="container" style="color:#0000FF" border-style="none"></div>
<div id="container2" style="color:#0000FF" border-style="none"></div>


</td>
</table>


<!--Mid-->


<table cellpadding="0" cellspacing="0">

<tr>
<td width="170" height="100" valign="top" bgcolor="#8F8AFD">

<br />
<br />

<div id="navi">
  <p style="font-family:Verdana, Arial, 'Times New Roman'; font-size:14px; color:#CFF0D4; line-height:180%; padding-left: 8mm">
    
   	<a href="index.html" style="padding-left:6mm; font-weight:bold"> Startseite </a>
  
  	<br />
    
    <a href="kurse.html"> ---- </a>
    
  	<br />
    
    <a href="kontakt.html"> ---- </a> 
	
	<br />
	
    <a href="impressum.html"> ---- </a> 
	</p>
  </div>



</td>



<td bgcolor="#C1BCFE" width="855" height="660" valign="top">
	<div align="left" style="padding-left:2cm; padding-top:0.6cm">
	<span style="font-family:Verdana, Arial, 'Times New Roman'; font-size:14px; vertical-align:top; line-height:180%;">
			
		<p style="font-weight:bold"> ------ </p>
		
		<br />
	
		<p style="padding-right: 2cm"> -----------------
		
		----------------------------------
		
		</p>

		
		</span> 
		</div>
		
	<br />
	
			<div style="min-width:39%; min-height:40%; font-family="Verdana, Arial, 'Times New Roman'; font-size=12px; padding-right:2cm">
			
		<img src="bilder\foto.jpg" hspace="15px" class="bild" border="0" style="width:39%; height:40%; align:right; padding-left:2cm; 
		float:left;"/>

	
	
	<p style="font-family:Verdana;Arial;'Times New Roman'; font-size:14px; padding-right:2cm; padding-left:2cm; line-height: 180%">
	----------------- </p>
	</td>


</tr>



<!--BOTTOM-->

<tr>
<td bgcolor="#8F8AFD" width="116" height="30"> 
  <div align="center">
  <span style="font-family:Verdana, Arial, 'Times New Roman'; font-size:12px">
    
	    
	</span>  
	</div>
	</td>



<td bgcolor="#C1BCFE" width="854" height="30">
	<div align="center">
	<span style="font-family:Verdana, Arial, 'Times New Roman'; font-size:12px">
		
			
		</span>	
	  </div>
	</td>



</tr>



</table>
</body>
</html>

P.S: Im Anhang als Dokument.

Vielen Dank
Slowpoke

Stefan · 15.08.2007, 14:46

Hab' grad wenig Zeit, aber vom Prinzip her musst du die min-width Angabe drinlassen, aber zusätzlich noch ein Conditional Comment hinzufügen. CCs sind Angaben, die nur von bestimmten Browsern, also in unserem Fall der IE, interpretiert werden. Von Firefox und Co werden sie schlichtweg ignoriert.

Zitat:

Zitat von Beispiel

#divname{min-height:230px;}

* html #content { height:230px; }

Dadurch wird erreicht, dass Firefox und Co, die das Min-Height richtig interpretieren, es auch interpretieren. IE versteht diesen Tag jedoch nicht und übernimmt die Höhenangabe nicht. Abhilfe schafft das CC, das dem IE sagt, er sollte die entsprechende Höhe übernehmen.

Im Gegensatz zum Firefox interpretiert der IE "height" als variable Höhe. Ist der Inhalt höher, dann wird der Div automatisch vergrößert. Beim FF hingegen ist die Höhe dann fixiert und der Inhalt "fließt" drüber. Kurzum: Height wird vom IE interpretiert wie vom Firefox min-height.

Mit width sollte es gleich sein.

Korrigiert mich, wenn ich falsch liege, hatte die Problematik mal bei ner Webseite

Gruß Stefan

webcreate · 15.08.2007, 15:07

Das ganze ist nur kein CC, sondern ein child-selector-hack

Sonst gibt es da noch das und das zu lesen

slowpoke · 15.08.2007, 15:16

Das was im ersten der beiden links steht, hatte ich auch gefunden, komme aber nicht ganz damit klar, welche Werte ich wo einsetzen muss.

slowpoke · 15.08.2007, 16:21

Krieg ich nicht hin

, sry.

Kann mir das einer kurz ins skript schreiben, dann kann ich da ja rumprobieren und nachvollziehen, ich habs jetzt zig mal ausprobiert...Keine Ahnung wieso es nicht klappt.

Gruß
Slowpoke

Stefan · 15.08.2007, 17:53

Einfach:

Zitat:

#navi {
min-width:170px
}

* html #navi { width: 170px; }

Also die letzte Zeile musst du ergänzen. Bei mir funktionier's.

@ webcreate: Danke für den Hinweis, hab's verwechselt. Bzw. ich kannte keine andere Bezeichnung

slowpoke · 15.08.2007, 18:24

Geschafft

Vielen dank. Ich hab' es mit * eingegeben, das war der Fehler... Als ich es ohne versucht hab hats plötzlich geklappt.

Sollte das ein Zeichen für "Hier ergänzen" sein, das ich nicht als solches erkannt habe, obwohl es im Nachhinein einleuchtet, oder gehört das wirklich zum Code?

Stefan · 15.08.2007, 18:48

Der Stern? Klar gehört der dazu! Siehe z.b. hier

slowpoke · 15.08.2007, 18:51

Aber MIT stern geht es bei mir nicht

Ohne schon.

HTML-Code:

#navi {
min-width:170px
}

html #navi { width: 170px; }

Bei mir sieht es jetzt so aus.
Und es klappt.

Stefan · 15.08.2007, 19:04

Darf ich fragen, welche IE Version du hast?

slowpoke · 15.08.2007, 20:21

Die neueste. Ist meine ich Version 7.
In Version 6 geht es aber auch ohne Sternchen, war grad' schnell en meinem anderen Rechner.