✔ Css im IE!

svennson · 8. Juli 2005

Hi,
ich habe den css-Kram für den Firefox fertig und es klappt einwandfrei. Nur IE weigert sich mal wieder hartnäcking Ich poste hier zuerst mal den CSS-Kram für den firefox, dann den für den IE und dann noch meine index.php!
Ich euch wirklich sehr dankbar, wenn sich das mal wer anschauen kann, der davon Ahnung hat, da ich selber mich nich so gut mit CSS auskenne und selbst schon froh bin, dass ich das einfachste für den Firefox hinkriege. Ihr müsst euch ja auch nur die Sachen kopieren und könnt es euch dann anscheun...
Firefox:

PHP:

body{
background-color:#fff;
overflow:hidden;
}
/*oberer teil*/
#top{
background-color:#6666FF;
position:absolute;
top:0px;
left:0;
right:0;
height:25px;
overflow:hidden;
}

*html #top{
background-color:#6666FF;
border-left-width:0;
border-right-width:0;
border-top-width:0;
height:25px;
z-index:4;
}

#undertop{
background-color:#fff;
position:absolute;
top:25px;
right:0;
left:150px;
height:100px;
overflow:hidden;
}

#rightline{
background-color:#6666FF;
position:absolute;
top:25;
right:0;
width:25px;
height:100px;
overflow:hidden;
}

#underline{
background-color:#6666FF;
position:absolute;
top:125px;
left:150px;
right:0;
height:25px;
overflow:hidden;
}

/*menü teil*/
#left{
background-color:#fff;
position:absolute;
top:100;
left:0;
bottom:150px;
width:150px;
overflow:hidden;
}

#leftline{
background-color:#6666FF;
position:absolute;
top:150px;
left:150px;
bottom:150px;
width:25px;
overflow:hidden;
}

#leftunder{
background-color:#6666FF;
position:absolute;
bottom:125px;
left:0;
width:175px;
height:25px;
overflow:hidden;
}

/*links unten*/
#under{
background-color:#fff;
position:absolute;
left:0;
bottom:0;
Width:175px;
height:125px;
overflow:hidden;
}
/*mittle teil*/
#center{
position:absolute;
top:150px;
left:175px;
right:0;
bottom:0;
overflow:auto;
}

/*menü gestaltung*/
#left a{
text-decoration:none;
display:block;
width:100px;
margin:1px;
padding:2px;
border:1px solid #fff;
font-family:verdana, arial, helvetica;
font-size:13px;
font-weight:bold;
text-align:center;
color:#fff;
background-color:6666FF;
}

#left a:hover{
color:#000;
background-color:#fff;
}


#center a:link,
#center a:visited{
color:blue;
text-decoration:none;
}

IE:

PHP:

body{
background-color:#fff;
overflow:hidden
}

*html body{
position:absolute;
width:100%;
height:100%;
border:0;
margin:0;
padding:0;
}

*html #top{
background-color:#6666FF;
top:0;
left:0;
border-left-width:0;
border-right-width:0;
border-top-width:0;
height:25px;
border-style:solid;
z-index:8;
}

*html #undertop{
background-color:#fff;
left:0;
border-left-width:150px;
border-right-width:25px;
bordertop-width:25px;
width:100%,
height:100px;
border-style:solid;
z-index:7;
}

*html #rightline{
background-color:#6666FF;
right:0;
top:0;
border-right-width:0;
border-top-width:25;
width:25px;
border.style:solid;
z-index:6;
}

*html #underline{
background-color:#6666FF;
border-top-width:125px;
border-left-width:150px;
border-right-width:0px;
height:25px;
border-style:solid;
z-index:5;
}

*html #left{
background-color:#fff;
border-top-width:100px;
border-left-width:0;
border-bottom-width:150px;
height:100%;
width:150px;
border-style:solid;
z-index:4;
}

*html #leftline{
background-color:#6666FF;
border-top-width:150px;
border-left-width:150px;
border-bottom-width:150px;
height:100%;
width:25px;
border-style:solid;
z-index:3;
}

*html #leftunder{
background-color:#6666FF;
border-left-width:0;
border-bottom:125px;
width:175px;
height:25px;
border-style:solid;
z-index:2;
}

*html #under{
background-color:#fff;
border-left-width:0;
border-bottom-width:0;
Width:175px;
height:125px;
border-style:solid;
z-index:1;
}

#center{
border-top-width:150px;
border-left-width:175px;
border-right-width:0;
border-bottom-width:0;
width:100%;
height:100%;
border-style:solid;
}

PHP:

body{
background-color:#fff;
overflow:hidden
}

*html body{
position:absolute;
width:100%;
height:100%;
border:0;
margin:0;
padding:0;
}

*html #top{
background-color:#6666FF;
top:0;
left:0;
border-left-width:0;
border-right-width:0;
border-top-width:0;
height:25px;
border-style:solid;
z-index:8;
}

*html #undertop{
background-color:#fff;
left:0;
border-left-width:150px;
border-right-width:25px;
bordertop-width:25px;
width:100%,
height:100px;
border-style:solid;
z-index:7;
}

*html #rightline{
background-color:#6666FF;
right:0;
top:0;
border-right-width:0;
border-top-width:25;
width:25px;
border.style:solid;
z-index:6;
}

*html #underline{
background-color:#6666FF;
border-top-width:125px;
border-left-width:150px;
border-right-width:0px;
height:25px;
border-style:solid;
z-index:5;
}

*html #left{
background-color:#fff;
border-top-width:100px;
border-left-width:0;
border-bottom-width:150px;
height:100%;
width:150px;
border-style:solid;
z-index:4;
}

*html #leftline{
background-color:#6666FF;
border-top-width:150px;
border-left-width:150px;
border-bottom-width:150px;
height:100%;
width:25px;
border-style:solid;
z-index:3;
}

*html #leftunder{
background-color:#6666FF;
border-left-width:0;
border-bottom:125px;
width:175px;
height:25px;
border-style:solid;
z-index:2;
}

*html #under{
background-color:#fff;
border-left-width:0;
border-bottom-width:0;
Width:175px;
height:125px;
border-style:solid;
z-index:1;
}

#center{
border-top-width:150px;
border-left-width:175px;
border-right-width:0;
border-bottom-width:0;
width:100%;
height:100%;
border-style:solid

}

index:

PHP:

<html>
<head>
<title>REDI - <?php echo"$seite";?></title>
<link rel="stylesheet" type="text/css" href="ie.css">
</head>
<body>
<!-- Gestaltung des oberen Teils-->
<div id="top">
<div class="inhalt">
</div></div>

<div id="undertop">
<div class="inhalt">
<table align=center>
<tr><td>
<img src="redi.gif" valign="center">
</td></tr>
</table>
</div></div>

<div id="rightline">
<div class="inhalt">
</div></div>

<div id="underline">
<div class="inhalt">
</div></div>
<!--Gestaltung des Menubereiches-->
<div id="left">
<div class="inhalt">
<table align=center >
<tr><td><a href='?seite=home'>Home</a></td></tr>
<tr><td><a href='?seite=profil'>Profil</a></td></tr>
<tr><td><a href='?seite=services'>Services</a></td></tr>
<tr><td><a href='?seite=aktuelles'>Aktuelles</a></td></tr>
<tr><td><a href='?seite=security'>Security</a></td></tr>
<tr><td><a href='?seite=partner'>Partner</a></td></tr>
<tr><td><a href='?seite=download'>Download</a></td></tr>
<tr><td><a href='?seite=anfahrt'>Anfahrt</a></td></tr>
<tr><td><a href='?seite=kontakt'>Kontakt</a></td></tr>
<tr><td><a href='?seite=support'>Support</a></td></tr>
<tr><td><a href='?seite=techinfo'>TechInfo</a></td></tr>
</table>
</div></div>

<div id="leftline">
<div class="inhalt">
</div></div>

<div id="leftunder">
<div class="inhalt">
</div></div>


<!--Anderer Bereich -->
<div id="center">
<div class="inhalt">
<table align=center><tr><td>
<?php
switch($seite){
default: include("home.txt");break;
case "home": include("home.txt");break;
case "profil": include("profil.txt");break;

?></td></tr></table>
</div></div>

<div id="under">
<?php
echo"<table align=center>
<tr><td><br><a href='http://www.ibm.com/de/' target=_blank><img src='ibm.gif'></a>
</td></tr></table>";
?>
</div>

</body>
</html>

MFG,
Sven

svennson · 11. Juli 2005

Alle am Wochende mit Alkoholvergiftung ins Krankenhaus eingeliefert worden oder was? :suspekt:

Wäre wirklich nett, wenn da mal einer nachschaun könnte, der sich auskennt. Ich komm da einfach nicht weiter ...

eiisa · 11. Juli 2005

Hallo,

Code:

body{ 
background-color:#fff; 
overflow:hidden; 
position:absolute; 
width:100%; 
height:100%; 
border:0; 
margin:0; 
padding:0; 
}#top{ 
background-color:#6666FF; 
top:0; 
left:0; 
border-left-width:0; 
border-right-width:0; 
border-top-width:0; 
height:25px; 
border-style:solid; 
z-index:8; 
}
#undertop{ 
background-color:#fff; 
left:0; 
border-left-width:150px; 
border-right-width:25px; 
bordertop-width:25px; 
width:100%, 
height:100px; 
border-style:solid; 
z-index:7; 
}
#rightline{ 
background-color:#6666FF; 
right:0; 
top:0; 
border-right-width:0; 
border-top-width:25; 
width:25px; 
border.style:solid; 
z-index:6; 
} 

#underline{ 
background-color:#6666FF; 
border-top-width:125px; 
border-left-width:150px; 
border-right-width:0px; 
height:25px; 
border-style:solid; 
z-index:5; 
} 

#left{ 
background-color:#fff; 
border-top-width:100px; 
border-left-width:0; 
border-bottom-width:150px; 
height:100%; 
width:150px; 
border-style:solid; 
z-index:4; 
} 

#leftline{ 
background-color:#6666FF; 
border-top-width:150px; 
border-left-width:150px; 
border-bottom-width:150px; 
height:100%; 
width:25px; 
border-style:solid; 
z-index:3; 
} 

#leftunder{ 
background-color:#6666FF; 
border-left-width:0; 
border-bottom:125px; 
width:175px; 
height:25px; 
border-style:solid; 
z-index:2; 
} 

 #under{ 
background-color:#fff; 
border-left-width:0; 
border-bottom-width:0; 
Width:175px; 
height:125px; 
border-style:solid; 
z-index:1; 
} 

#center{ 
border-top-width:150px; 
border-left-width:175px; 
border-right-width:0; 
border-bottom-width:0; 
width:100%; 
height:100%; 
border-style:solid 

}

Lass doch mal die *html's vor deinen ID's in der CSS weg, bzw. kopier dier einfach obigen Code. Der funktioniert bei mir sowohl im FireFox als auch im IE.

Außerdem: In deiner index.php fehlt die schließende Klammer deiner Switch-Anweisung.

LG eiisa

svennson · 11. Juli 2005

Danke für die Mühe, aber leider klappt das damit bei mir weder im IE noch bei Firefox...
Ich hab auch nichts verändert, einfach in ne .css Datei gespeichert und dann wie normal in der index.php verlinkt.

Hier nochmal ne Version , welche bei mir im Firefox zu 100% und im IE zu ca. 70% richtig angezeigt wird:

Code:

body{
background-color:#fff;
overflow:hidden;
}
/*oberer teil*/
#top{
background-color:#6666FF;
position:absolute;
top:0px;
left:0;
right:0;
height:25px;
overflow:hidden;
z-index:9;
}

*html #top{
background-color:#6666FF;
top:0;
left:0;
right:0;
border-left-width:0;
border-right-width:0;
border-top-width:0;
width:100%;
height:25px;
z-index:4;
}

#undertop{
background-color:#fff;
position:absolute;
top:25px;
right:0;
left:150px;
height:100px;
overflow:hidden;
}

#rightline{
background-color:#6666FF;
position:absolute;
top:25;
right:0;
width:25px;
height:100px;
overflow:hidden;
z-index:3;
}


#underline{
background-color:#6666FF;
position:absolute;
top:125px;
left:150px;
right:0;
height:25px;
overflow:hidden;
}

/*menü teil*/
#left{
background-color:#fff;
position:absolute;
top:75;
left:0;
bottom:150px;
width:150px;
overflow:hidden;
}

#leftline{
background-color:#6666FF;
position:absolute;
top:150px;
left:150px;
bottom:150px;
width:25px;
overflow:hidden;
}

*html #leftline{
border-top-width:150px;
border-left-width:150px;
border-bottom-width:150px;
width:25px;
height:100%;
border-style:solid;
z-index:2;
}

#leftunder{
background-color:#6666FF;
position:absolute;
bottom:125px;
left:0;
width:175px;
height:25px;
overflow:hidden;
}

/*links unten*/
#under{
background-color:#fff;
position:absolute;
left:0;
bottom:0;
Width:175px;
height:125px;
overflow:hidden;
}
/*mittle teil*/
#center{
position:absolute;
top:150px;
left:175px;
right:0;
bottom:0;
overflow:auto;
z-index:3
}

*html #center{
bottom:0;
right:0;
border-left-width:175px;
border-right-width:0;
border-top-width:150px;
border-bottom-width:0;
width:100%;
height:100%;
border-style:solid;
}

eiisa · 11. Juli 2005

So, ich habs auch nochmal versucht...

Code:

body{ background-color:#fff;
   overflow:hidden;
   margin:0px 0px;
}
/*oberer teil*/
#top { background-color:#6666FF;
   top: 0px;
   width:100%;
   height:25px;}

#undertop {  text-align:center;
	  height:100px;
	  top:25px;
	  right:25px;}

#rightline{ background-color:#6666FF;
	 position:absolute;
	 top:25px;
	 right:0px;
	 width:25px;
	 height:100px;
	 overflow:hidden; }
/*nnooooooooooooo ned*/
#underline{ background-color:#6666FF;
	  position:absolute;
	  top:125px;
	  left:150px;
	  right:0px;
	  width:100%;
	  bottom:0px;
	  height:25px; 
	  overflow:hidden;}

/*menü teil*/
#left{ position:absolute;
   top:75px;
   left:0px;
   bottom:150px;
   width:150px;
   overflow:hidden;}
   
#leftline { background-color:#6666FF;
	 position: absolute;
	 top: 150px;
	 left: 150px;
	 bottom: 150px;
	 width: 25px; 
	 height: 100%;
	 overflow:hidden;}

	 
#leftunder{ background-color:#6666FF;
	  position:absolute;
	  bottom:125px;
	  left:0px;
	  width:175px;
	  height:25px;
	  overflow:hidden; }

/*links unten*/
#under{ background-color:#fff;
	position:absolute;
	left:0px;
	bottom:0px;
	width:175px;
	height:125px;
	overflow:hidden; }
/*mittle teil*/
#center{ position:absolute;
	top:150px;
	left:175px;
	right:0px;
	bottom:0px;
	overflow:auto;
}

Und die leicht abgeänderte PHP-Datei...

Code:

 <html> 
<head> 
<title>REDI - <?php echo"$seite";?></title> 
<link rel="stylesheet" type="text/css" href="ie.css"> 
</head> 
<body> 
<!-- Gestaltung des oberen Teils--> 
<div id="top">
</div> 
<div id="undertop"> 
 <img src="redi.gif" valign="center">  
</div> 
<div id="rightline">
</div> 
<div id="underline">
</div> 
<!--Gestaltung des Menubereiches--> 
<div id="left"> 
 <table align=center > 
 <tr><td><a href='?seite=home'>Home</a></td></tr> 
 <tr><td><a href='?seite=profil'>Profil</a></td></tr> 
 <tr><td><a href='?seite=services'>Services</a></td></tr> 
 <tr><td><a href='?seite=aktuelles'>Aktuelles</a></td></tr> 
 <tr><td><a href='?seite=security'>Security</a></td></tr> 
 <tr><td><a href='?seite=partner'>Partner</a></td></tr> 
 <tr><td><a href='?seite=download'>Download</a></td></tr> 
 <tr><td><a href='?seite=anfahrt'>Anfahrt</a></td></tr> 
 <tr><td><a href='?seite=kontakt'>Kontakt</a></td></tr> 
 <tr><td><a href='?seite=support'>Support</a></td></tr> 
 <tr><td><a href='?seite=techinfo'>TechInfo</a></td></tr> 
 </table> 
</div>
<div id="leftline">
</div> 
<div id="leftunder">
</div>  

<!--Anderer Bereich --> 
<div id="center"> 
 <table align=center><tr><td> 
  <?php 
  switch($seite){ 
  default: include("home.txt");break; 
  case "home": include("home.txt");break; 
  case "profil": include("profil.txt");
  }
  ?></td></tr>
 </table> 
</div> 
<div id="under"> 
<?php 
echo"<table align=center> 
<tr><td><br><a href='http://www.ibm.com/de/' target=_blank><img src='ibm.gif'></a> 
</td></tr></table>"; 
?> 
</div> 
</body> 
</html>

svennson · 12. Juli 2005

Danke eiisha, jetzt funktioniert es mit beiden Browsern.

✔ Css im IE!

svennson

Erfahrenes Mitglied

svennson

Erfahrenes Mitglied

eiisa

Mitglied

svennson

Erfahrenes Mitglied

eiisa

Mitglied

svennson

Erfahrenes Mitglied

Neue Beiträge