✔ Darstelungsprobleme CSS-Layout -> Firefox vs. IE

Status
Nicht offen für weitere Antworten.
T

TMG

Mitglied
Seid gegrüßt,

ich möchte mir eine eigene Firmenwebsite erstellen.
Leider habe ich da ein unangenehmes Problem, finde aber nach stundenlangem Suchen keine Lösung.

In der mittleren Spalte möchte ich gern den Inhalt präsentieren. Leider gibt es dabei Darstellungsprobleme, jedoch nur beim IE.

Schaut es euch doch bitte einfach an:

Bitte hier klicken

Euch sollte sofort auffallen, wo der Unterschied liegt. Für diejenigen, die Mutter Natur nicht mit einer optischen Verarbeitungsmatrix versehen hat, schildere ich eben das "Optimierungspotential" um nicht zu sagen Problem.

Der innere DIV wird von einer gepunkteten Linie umgeben und zeigt den Inhalt mit einem Abstand von 5 Pixel auf jeder Seite zum Text an.

Der IE zeigt jedoch gestrichelte Linien an. Nach unten, links und rechts sind es ebenfalls 5 Pixel. Jedoch nicht nach oben. Ich habe schon alles, was mir einfiel und was die Foren hergaben probiert. Leider bin ich zu keinem Ergebnis gekommen.

Ich bitte euch daher um Hilfe.
Vielen Dank

Hier der komplette Code:

index.php

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>CR-Design --- Ihr Grafik- und Webdesigner</title>
<link rel=stylesheet type="text/css" href="style.css">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body background="bilder/bg.jpg">

<div id="page" class="hauptbox">
     <div id="header">
	 <img src="bilder/header.jpg" width="800" height="113"><table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><a href="javascript:;" onMouseOver="MM_swapImage('Home','','bilder/home_mo.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="bilder/home.jpg" alt="Home" name="Home" width="115" height="29" border="0" id="Home"></a></td>
        <td><a href="javascript:;" onMouseOver="MM_swapImage('Preise','','bilder/preise_mo.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="bilder/preise.jpg" alt="Preise" name="Preise" width="114" height="29" border="0" id="Preise"></a></td>
        <td><a href="javascript:;" onMouseOver="MM_swapImage('Leistung','','bilder/leistung_mo.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="bilder/Leistung.jpg" alt="Leistung" name="Leistung" width="171" height="29" border="0" id="Leistung"></a></td>
        <td><a href="javascript:;" onMouseOver="MM_swapImage('Referenz','','bilder/referenz_mo.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="bilder/referenz.jpg" alt="Referenz" name="Referenz" width="171" height="29" border="0" id="Referenz"></a></td>
        <td><a href="javascript:;" onMouseOver="MM_swapImage('Kontakt','','bilder/kontakt_mo.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="bilder/kontakt.jpg" alt="Kontakt" name="Kontakt" width="114" height="29" border="0" id="Kontakt"></a></td>
        <td><a href="javascript:;" onMouseOver="MM_swapImage('Impressum','','bilder/impressum_mo.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="bilder/impressum.jpg" alt="Impressum" name="Impressum" width="115" height="29" border="0" id="Impressum"></a></td>
        </tr>
    </table>
	 </div>
	 <div id="leftcontent">
	 
	 </div>
     <div id="rightcontent">
	 
	 </div>
     <div id="centercontent"><table width="100%"  border="0" cellspacing="0" cellpadding="0">
  		<tr>
    		<td valign="top"><?
		  	// Inhalte einladen Start
					
					if ($_GET['content']=='') {
						if (file_exists('content/00.php')){include ('content/00.php');} else {include ('content/404.php');}
					}	
					else {if (file_exists('content/'.$_GET['content'].'.php')) {include ('content/'.$_GET['content'].'.php');}
							else {include ('content/404.php');}
					}
				
				// Inhalte einladen Ende
		  ?>
			
			</td>
  		</tr>
	 </table>
	 </div>
     <div id="footer">
	 <img src="bilder/footer.jpg" width="800" height="27">
	 </div>
</div>


</body>
</html>

style.css

Code: 
* {
margin: 0;
padding: 0;

}

body {
background:background-image:url(bilder/bg.jpg);
background:background-color:#FFFFFF;
text-align: center; 
}

div {
text-align: left; 
}

html, body {
height: 100%;
font-size:12px;
}

/* DIV-Boxen */

div#page {
position:relative;
margin: 0 auto;
width: 800px;
min-height: 100%;
height: auto !important;
height: 100%;
border-left: 1px solid #AAAAAA;
border-right: 1px solid #AAAAAA;
background:background-image:url(bilder/bg_content.jpg);
}

div#header {
height: 142px;
background: #fff;
}

/*
div#topNavi {
top:113px;
height: 29px;
background: #fff;
}
*/

div#leftcontent {
margin: 25px 0px;
width: 105px;
float: left;
background-color:#;
padding:5px;
}

div#rightcontent {
margin: 25px 0px;
width: 104px;
float: right;
background-color:#;
padding:5px;
}

div#centercontent {
	vertical-align:top;
	margin: 25px 125px 0px;
	background-color:#F9F9F9;
	padding:5px;
	border: 1px dotted #A8A8A8;
}

div#leftcontent, div#rightcontent, div#centercontent {

}

div#footer {
clear: both;
position: absolute;
bottom: 0;
width: 800px;
background: #fff;
border-top: 1px solid #b8b8b8;
}


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

.hauptbox {display: inline-block;}

/* Hides from IE-mac \*/
* html .hauptbox {height: 1%;}
.hauptbox {display: block;}
/* End hide from IE-mac */


/* Überschrift */

h2 {
margin-left: 10px;
}

00.php

HTML: 
<p>Herzlich Willkommen.<br>
  <br>
  Diese Seiten befinden sich zurzeit noch im Aufbau.<br>
  Bitte haben Sie noch ein wenig Geduld.<br>
  <br>
  Mit freundlichen Gr&uuml;&szlig;en,<br>
  CR-Design Team </p>

Als Vorlage dient das CSS Tutorial von Maik. Vielen Dank nochmal an dieser Stelle.
 
Okay, mit diesem Problem kann ich relativ gut leben.
Was mich aber wirklich stört ist der freie Raum zwischen Text und Rand, der beim Firefox nicht ist.

Dieses Problem konnte ich bisher nich lösen.
 
Das hängt mit der eingebundenen Tabelle und ihrer width=100%-Angabe zusammen, der "Schwellenwert" liegt hier bei "98%".

Meines Erachtens könntest du den Inhalt aber auch ohne die Tabelle in dem DIV notieren. ;)
 
Perfekt.

Es hat funktioniert.
Vielen Dank!

Hier der geänderte Code:
HTML: 
<div id="centercontent"><?
		  	// Inhalte einladen Start
					
					if ($_GET['content']=='') {
						if (file_exists('content/00.php')){include ('content/00.php');} else {include ('content/404.php');}
					}	
					else {if (file_exists('content/'.$_GET['content'].'.php')) {include ('content/'.$_GET['content'].'.php');}
							else {include ('content/404.php');}
					}
				
				// Inhalte einladen Ende
		  ?>
	 </div>

Big THX :)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück