✔ IE verändert Homepage aussehen

Merbi · 30. Juni 2007

Hallo allerseits,

auf meiner Homepage habe ich einige Links gesetzt die meist unter einander aufgelistet sind.

Wenn man mit der Maus über den 3. oder 4. Link geht verändert sich die Darstellung des Layouts sehr merkwürdig.

Dies kommt nicht im Firefox vor.

Gibt es da eine Lösung wie man so ein Problem umgehen kann oder gibt es noch andere Forumbesucher die solche Probleme haben?

MFG Daniel

Maik · 30. Juni 2007

Hi,

ohne einen Einblick in den HTML- und CSS-Code lässt sich da momentan nicht viel zu sagen bzw. der entscheidende Tipp geben.

Merbi · 30. Juni 2007

Codeschnipsel index.php:

Code:

<script type="text/javascript">
		<!--
			setbold='[ b ]';
			setitalic='[ i ]';
			setunderline='[ u ]';
			seturl='[ url ]';
			
			function addSmiley(smiley){
				document.getElementById('text').value = document.getElementById('text').value+" " + smiley;
			}
			function setBold(){
				if(setbold=='[ b ]'){
					setbold = '[ /b ]';
					document.insert.entry.value=document.insert.entry.value+'[ b ]';
					document.insert.setbold.value="[ /b ]";
					document.insert.setbold.style.fontWeight="bold";
				}
				else if(setbold=='[ /b ]'){
					setbold = '[ b ]';
					document.insert.entry.value=document.insert.entry.value+'[ /b ]';
					document.insert.setbold.value='[ b ]';
					document.insert.setbold.style.fontWeight='';
				}
			}
			function setItalic(){
				if(setitalic=='[ i ]'){
					setitalic = '[ /i ]';
					document.insert.entry.value=document.insert.entry.value+'[ i ]';
					document.insert.setitalic.value="[ /i ]";
					document.insert.setitalic.style.fontWeight="bold";
				}
				else if(setitalic=='[ /i ]'){
					setitalic = '[ i ]';
					document.insert.entry.value=document.insert.entry.value+'[ /i ]';
					document.insert.setitalic.value='[ i ]';
					document.insert.setitalic.style.fontWeight='';
				}
			}
			function setUnderline(){
				if(setunderline=='[ u ]'){
					setunderline = '[ /u ]';
					document.insert.entry.value=document.insert.entry.value+'[ u ]';
					document.insert.setunderline.value="[ /u ]";
					document.insert.setunderline.style.fontWeight="bold";
				}
				else if(setunderline=='[ /u ]'){
					setunderline = '[ u ]';
					document.insert.entry.value=document.insert.entry.value+'[ /u ]';
					document.insert.setunderline.value='[ u ]';
					document.insert.setunderline.style.fontWeight='';
				}
			}
			function setUrl(){
				if(seturl=='[ url ]'){
					seturl = '[ /url ]';
					document.insert.entry.value=document.insert.entry.value+'[ url ]';
					document.insert.seturl.value="[ /url ]";
					document.insert.seturl.style.fontWeight="bold";
				}
				else if(seturl=='[ /url ]'){
					seturl = '[ url ]';
					document.insert.entry.value=document.insert.entry.value+'[ /url ]';
					document.insert.seturl.value='[ url ]';
					document.insert.seturl.style.fontWeight='';
				}
			}
		-->
		</script>
		
		<style type="text/css"> 
			@import url(template/stylesheet.css) all;
		</style>
		<!--[if IE]>
    		<style type="text/css">@import url(template/stylesheet_ie.css);</style>
  		<![endif]-->	

</head>

<body>


<div class="main">

	
	<div class="header">
	
		<img border="0" alt="Der Header" src="template/images/header.jpg" />	

	</div>
	
	
	<div class="nav">
             <div class="menue">
			

		<li></li>

		<li><a href="index.php?id=home.php" title="Startseite">home</a></li>

		<li><a href="index.php?id=about.php" title="Über mich">about</a></li>

		<li><a href="index.php?id=gallery.php" title="Nen paar Bilder">gallery</a></li>

		<li><a href="index.php?id=video.php" title="Nen paar Videos">video</a></li>

		<li><a href="index.php?id=guestbook.php" title="Gästebuch">guestbook</a></li>

		<li><a href="index.php?id=projects.php" title="Projekte">projects</a></li>

		<li><a href="index.php?id=stuff.php" title="Material">stuff</a></li>

		<li><a href="index.php?id=contact.php" title="Schreib mir ne Mail">contact</a></li>

		</div>
	
        </div>

	<div class="content">

		<h1>
			&raquo; stuff </h1>
			
			<div>
        	
		&raquo; <a href="index.php?id=news.php">newsarchiv</a> <br>
		&raquo; <a href="index.php?id=links.php">links</a> <br>
		&raquo; <a href="index.php?id=impressum.php">impressum</a>

	</div>	

	</div>
  
  		<br>

	</div>

	<div class="footer">
		<div class="statistic">

		statistic: 

		
<!-- hmtl output -->

	 Online:1	|Heute:7	|Gestern:15	|Gesamt:1109	
		</div>
	

	</div>

</body>
</html>

Code stylesheet_ie.css:

Code:

body{
	background-color : #666666;
	font-size : 8pt;
	font-family : Lucida Sans Unicode, Verdana, Arial;
	color : #FFFFFF;
	margin : 0;
}

.header {
	margin-left: 100px;
	width : 658px;
	height : 137px;
}

a {
	color: #666666;
	}
	
a:hover {
	color: #666666;
	background-color: #FFFFFF;
	}
	
img { border: 0px;
background:#FFFFFF 
}

/* --- Navigation --- */


.menue li {
	margin-top : 0;
	margin-bottom : 0;
	margin-right : 0;
	margin-left : 4px;
	list-style-type : none;
	text-align : left;
	width : 160px;
	max-width : 160px;
	min-width : 160px;
	border-bottom: 1px solid #666666;
}

.menue a {
	font: bold 11px Arial, Helvetica, sans-serif;
	color: #666666;
	line-height:16px;
	letter-spacing:0.1em;
	text-decoration: none;
	display:block;
	padding:8px 6px 10px 20px;
	background-color: #FFFFFF;
	}
	
.menue a:hover {
	color:#FFFFFF;
	background-color: #666666;
	}

	
/* --- content stuff --- */

.main {
	background-color: #FFFFFF;
	color: #666666;
	height: 100%;
	margin-right: 50px;
	margin-left: 50px;
  	margin-top: 50px;
}

.nav {
	position: relative;
	width: 164px;
	float:left;
}

.content {
	margin-left: 200px;	
}

.footer {
	height: 50px;
	background-color: #666666;
}

.underline {
	text-decoration: underline;
}

.insert {
	width: 238px;
}

.extras {
	position: absolute;
	top: 280px;
	margin-left: 400px;
}

.entry	{
	border-bottom: 1px solid #666666;
	width: 400px;
}


.forwarding {
	background-color : #666666;
	color: #FFFFFF;
	position : absolute;
	left : 50%;
	top : 50%;
	height : 100%px;
	width : 100%px;
	margin-left : -200px;
	margin-top : -75px;
	text-align : center;
}

.forwarding a:hover {
	color:#FFFFFF;
	background-color: #666666;
}

.forwarding a {
	color:#FFFFFF;
	background-color: #666666;
}

.statistic {
	background-color : #666666;
	color: #FFFFFF;
	position : absolute;
	right : 50%;
	height : 100%px;
	width : 100%px;
	text-align : center;
}

.about {
	position: absolute;
	top: 240px;
	margin-left: 250px;
}
.about_2 {
	position: absolute;
	top: 540px;
	margin-left: 250px;
}

Der dick markierte Link ist der jenige der bei diesem Beispiel das Aussehen verändert.
Bei allen anderen Seiten mit Links sind auhc nur die unteren Links fehlerhaft.

MFG Daniel

Maik · 30. Juni 2007

Versuch es mal hiermit:

Code:

.content {
        margin-left: 200px;
        height: 1%;
}

Merbi · 30. Juni 2007

1000000000000 Dank

Ich muss ja nicht verstehen warum das jetzt geht

Essss gehht egal warum muss ich garnid wissen

MFG Daniel

P.S. Falls du nochmal gucken könntest weil im Menü ist ein weißer Streifen über dem grauen border-bottom streifen vlt. findest du den Fehler auch auf anhieb.

Maik · 30. Juni 2007

Guckst du hier: http://www.positioniseverything.net/explorer/guillotine.html

Im Zuge dessen solltest du auch die in diesem Artikel empfohlene Regel zum "clearen" der Floatumgebung in der stylesheet.css aufnehmen, damit die Main-Box in den modernen Browsern (Firefox, Mozilla, Opera, usw.) in voller Höhe angezeigt wird, und die Inhalte sie nicht unten überlappen:

Code:

.main:after {
	content: ".";  
	display: block; 
	height: 0; 
	clear: both; 
	visibility:hidden;
}

/*  \*/
* html .main {
	height: 1%;
}
/*  */

KingOfRap hat gesagt.:
P.S. Falls du nochmal gucken könntest weil im Menü ist ein weißer Streifen über dem grauen border-bottom streifen vlt. findest du den Fehler auch auf anhieb.

Nimm mal die float:left-Eigenschaft in der Regel auf:

Code:

.menue li {
        margin-top : 0;
        margin-bottom : 0;
        margin-right : 0;
        margin-left : 4px;
        list-style-type : none;
        text-align : left;
        width : 160px;
        max-width : 160px;
        min-width : 160px;
        border-bottom: 1px solid #666666;
        float:left;
}

und notiere die Listenpunkte li in dem dazugehörenden ul-Listenelement:

Code:

<ul>
                <li><a href="index.php?id=home.php" title="Startseite">home</a></li>
                <li><a href="index.php?id=about.php" title="Über mich">about</a></li>
                <li><a href="index.php?id=gallery.php" title="Nen paar Bilder">gallery</a></li>
                <li><a href="index.php?id=video.php" title="Nen paar Videos">video</a></li>
                <li><a href="index.php?id=guestbook.php" title="Gästebuch">guestbook</a></li>
                <li><a href="index.php?id=projects.php" title="Projekte">projects</a></li>
                <li><a href="index.php?id=stuff.php" title="Material">stuff</a></li>
                <li><a href="index.php?id=contact.php" title="Schreib mir ne Mail">contact</a></li>
</ul>

Merbi · 30. Juni 2007

Nochmal vielen Dank

Obwohl ich jetzt nicht verstehe wo das Problem liegt naja kopiere (falls ich das richtig verstanden habe) den code:

Code:

.main:after {
	content: ".";  
	display: block; 
	height: 0; 
	clear: both; 
	visibility:hidden;
}

/*  \*/
* html .main {
	height: 1%;
}
/*  */

einfach in mein css.

MFG Daniel

Habe das einegegeben aber jetzt ist das erst über einander geschoben und selbst wenn ich es rückgängig mache ändert sich das aussehen!

Maik · 30. Juni 2007

Ich weiß ja nicht, ob das so von dir erwünscht ist, oder auf deinem System anders dargestellt wird, aber bei mir wird die Seite unter Win2000 in allen mir zur Verfügung stehenden Browsern (außer IE6) zunächst mal wie im angehängten Firefox-Screenshot dargestellt.

Mit der empfohlenen Technik wird die Main-Box in ihrer vollen Höhe angezeigt.

Merbi · 30. Juni 2007

Also im IE und fox lief es bei mir bis gerade, jetzt mit deinen Änderungen nicht mehr.

MFG Daniel

Maik · 30. Juni 2007

KingOfRap hat gesagt.:
Habe das einegegeben aber jetzt ist das erst über einander geschoben und selbst wenn ich es rückgängig mache ändert sich das aussehen!

Falls du damit die eingerückte Navigation meinst, nachdem du das fehlende ul-Element hinzugefügt hast, dann setz mal seine Polsterungseigenschaften zurück:

Code:

.menue ul {
margin: 0;
padding: 0;
}

KingOfRap hat gesagt.:
Also bei mir läufts im Fox und im IE einwandfrei und passt sich immer an

Wie ich bereits erwähnte, zeigt auch bei mir der IE6 die Main-Box in der vollen Höhe an, aber in den nicht-IE-Browsern (Firefox 2.0.0.4, Mozilla 1.7.12, Netscape 7.0, Opera 9.10 und SeaMonkey 1.0.5) wird bei mir die Box abgeschnitten.

✔ IE verändert Homepage aussehen

Merbi

Maik

Merbi

Maik

Merbi

Maik

Merbi

Maik

Anhänge

Merbi

Maik

Neue Beiträge