Zum Inhalt springen

Darstellungsproblem im IE / Seite wird nicht zentriert

Erstellt am 11. September 2007 · 4 Antworten · letzte Antwort am 11. September 2007

Tags: Frage

schrumpelgnom ·

Hallo zusammen,

ich bin gerade dabei den Webauftritt eines Kunden in Typo3 umzusetzen. Dazu habe ich ein HTML/CSS Template erstellt. Soweit funktioniert auch alles, die Module, die Navigation, alles klappt reibungslos. Nur im IE wird die Seite, wie eigentlich im Template vorgesehen nicht zentriert. Außerdem wird die Schrift zu groß dargestellt. In Firefox und Safari wird die Seite zu 100% korrekt angezeigt.

Um mögliche Fehler zu finden habe ich das Template auch nochmal vom Server geholt, lokal (also statisch und ohne Typo) angeschaut und siehe da, es wird auch im IE richtig dargestellt. Sprich das Template an sich ist in Ordnung. Jetzt frage ich mich woran die fehlerhafte Darstellung liegen kann und vor allem, wie ich sie beheben kann?!

Dankeschön, schon mal im Voraus....

Hier noch der Code, falls der was hilft

#-------------------------------------------------------------------------



#Allgemein Anweisungen und Einbinden des Templates
#--------------------------------------------------------------------------

page = PAGE
page.includeLibs.gmenu_layers=fileadmin/template/site/script/gmenu_layers.php
page.stylesheet = fileadmin/template/site/css/general.css
page.10 = TEMPLATE
page.10 {
template = FILE
template.file = fileadmin/template/site/template_de.html
workOnSubpart = DOCUMENT_BODY

#--------------------------------------------------------------------------


#Definition der ersten Menüebene / Toplevel
#--------------------------------------------------------------------------

subparts.MENU = HMENU
subparts.MENU.1 = GMENU_LAYERS
subparts.MENU.1 {
exp.All = 1
xPosOffset=0
lockPosition = x
NO {
backcolor = #252525
XY = [10.w]+25,26
10 = TEXT
10.text.field = title
10.fontFile =fileadmin/template/site/HelveticaNeueLTStd-LtCn.otf
10.fontColor = #A2A2A2
10.fontSize = 15.5
10.offset = 10,18
10.nice Text = 1
5 = IMAGE
5.file = fileadmin/template/site/images/nav_no.gif
allWrap= | <img src="fileadmin/template/site/images/nav_spacer.gif" alt="" />
}
RO <.NO
RO = 1
RO {
10.fontColor = #FFFFFF
5.file = fileadmin/template/site/images/nav_ro.gif
}
}

subparts.MENU.2 = TMENU
subparts.MENU.2 {
hideMenuWhenNotOver = 1
    hideMenuTimer = 500
    disableAltText = 1
    useLargestItemX = 1 
    useLargestItemY = 1
    layerStyle = position:absolute;VISIBILITY:hidden; 
    expAll = 1 
    topOffset = 0
    leftOffset = 200
    relativeToTriggerItem = 1
    relativeToParentLayer = 1
    relativeToParentLayer.addWidth = 1
wrap = <table style="font-family:Verdana, sans serif; font-size:small; color:#252525; text-decoration:none;"> | </table>
NO.allWrap = <tr> <td> | </td> </tr>
}

#--------------------------------------------------------------------------



#Auslesen/Zuordnung der Inhalte zu den jeweiligen Markern
#--------------------------------------------------------------------------

subparts.CONTENT = CONTENT
subparts.CONTENT < styles.content.get
subparts.CONTENT_LEFT = CONTENT
subparts.CONTENT_LEFT < styles.content.getLeft
subparts.CONTENT_RIGHT = CONTENT
subparts.CONTENT_RIGHT < styles.content.getRight
subparts.LAST_UPDATE = TEXT
subparts.LAST_UPDATE {
data = page:lastUpdated
if.isTrue.data = page:lastUpdated
date = d.m.Y H:i
wrap = Letzte Änderung: |
wrap2 = | 
data = register : SYS_LASTCHANGED
if >
}
}

#--------------------------------------------------------------------------

Hier das Stylesheet

/************************************* General Formatting (Common Styles and Alignments for all Sites) *************************************/
* {
margin:0;
padding:0;
}

/* ### Clearing methods ################################## */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
	clear: both;
}
	
/* Required for Safari */
.clearfix {
	display: block;
}

/*******************/


body {
background:#FFFFFF url(../images/bg.gif) repeat-x;
font-family:"Verdana", sans-serif;
font-size:small;
height:100%;
color:#252525;
}

#wrap {
/* center the page: */
margin: 0 auto;
/* required for centering: */
width: 794px;
background:#FFFFFF url(../images/bg_form.gif) repeat-y 100%;
font-size: 80%;
}

#page {
padding-top:10px;
margin-left:17px;
width:760px;
}

#header {
margin-bottom:10px;
}

#navigation {
float:left;
margin-bottom:10px;
width:566px;
height:26px;
}

#language {
float:right;
margin-bottom:10px;
width:194px;
height:26px;
background:#FFFFFF url(../images/bg_language.gif) repeat-x;
}

#content {
float:left;
width:589px;
border-right:1px solid #d2d2d2;
line-height:1.5em;
}

#airbus {
	margin-bottom: 10px;
}

/* Boxen innerhalb des Contents */
.contentbox_left h2, .contentbox_right h2 {
	color: #185F97;
	font-size: 120%;
}

.contentbox_left {
	float: left;
	width: 279px;
	padding-right: 10px;
	border-right: 1px solid #D2D2D2;
}


.contentbox_right {
	float: left;
	width: 280px;
	padding-left: 10px;
}


#modules {
float:right;
width: 160px;
}

#modules strong {color: #005294}

 #box_top
{
width:160px;
height:20px;
background:url(../images/box_top.jpg);
font-weight:bold;
color:#a2a2a2;
text-align:center;
}

#caption {
padding-top:3px;
}

#box_border {
width:158px;
border: 1px solid #d2d2d2;
border-top:none;
margin-bottom:20px;
background: url(../images/bg_sidebar.gif) bottom left repeat-x;
}

#box_content {
padding-top:8px;
padding-left:8px;
line-height:1.5em;
}

.img_holder {
width: 59px;
padding-left:35px;
}


.img_box {
width:59px;
margin:0 auto;
}

#input {
 font-size:11px;
 border: 1px solid #d2d2d2;
 background: #FFF;
 color: #005294;
 width:83px;
 font-weight:bold;
 margin-bottom:8px;
 margin-left:60px;
}


#footer {
font-size:80%;
margin: 0 auto;
width:794px;
height:62px;
background: url(../images/footer.gif);
}


#footer_content
{
border-top:1px solid #d2d2d2;
border-bottom:1px solid #d2d2d2;
padding-top:8px;
padding-bottom:6px;
width:760px;
margin-left:17px;
}

#last_changed {
float:left;
}

#footer_function {
float:right;
}

.img_footer {
padding-right:15px;
}

Und hier die HTML-Datei

<!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" xml:lang="de" lang="de">
<head>
<!--###DOCUMENT_HEADER###-->	
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	
	<title>Lutro-TypoTemplate</title>
		<link rel="stylesheet" media="all" type="text/css" href="css/general.css" />
<!--###DOCUMENT_HEADER###-->
</head>
<body>
<!--###DOCUMENT_BODY###-->

<!-- Seitenanfang-->
<!-- Wrap div, der die ganze Seite, bzw, den repeated bg enthält -->
<div id="wrap" class="clearfix"> 
		
<!-- Beginn des Page Divs, der den ganze Content beinhaltet und ihn innerhalb des wraps zentriert -->		
	<div id="page">
		
		
<!-- Beginn Header -->		
			<div id="header">
			<!--###BANNER####-->
			<img src="fileadmin/template/site/images/header.jpg" alt="" />
				<!--###BANNER####-->
			</div>
<!-- Header Ende -->
		
<!-- Beginn Navigation -->		
			<div id="navigation">
			   <!--###MENU###-->
 				
 		       	<!--###MENU###-->
			</div>
<!--  Ende Navigation -->
			
<!-- Beginn der Sprachauswahl -->			
			<div id="language">
			<!--###SPRACHWAHL###-->
			
			<!--###SPRACHWAHL###-->
			</div>
<!-- Ende Sprachauswahl -->
			
<!-- Beginn des Contentbereichs -->
			<div id="content" class="clearfix">
			
			<!-- ###CONTENT### -->
			
			<!-- ###CONTENT### -->
			
				
				
<!-- Contentbox links -->				
				<div class="contentbox_left">
						
						<!-- ###CONTENT_LEFT### -->
					
						<!-- ###CONTENT_LEFT### -->
						
				</div>
<!-- Ende Contentbox links -->

<!-- Contentbox rechts -->
				<div class="contentbox_right">
					
					<!-- ###CONTENT_RIGHT### -->
					
					<!-- ###CONTENT_RIGHT### -->
				
				</div>
<!-- Ende Contentbox rechts -->




				
			</div>
<!-- Ende Contentbereich-->			
		
		
<!-- Beginn des Modulbereichs -->		
			<div id="modules">
			
				<div id="box_top">
			 		<div id="caption">Referenzen</div>
				</div>
				<div id="box_border">
					    <div id="box_content">
					  		<div class="img_holder"><img src="fileadmin/template/site/images/logo_bmw.gif" alt="" /></div>
					  		<br />
							BMW entscheidet sich für Lackieranlagen aus dem Hause <strong>LUTRO</strong>.<br /><br />
					 		<input type="submit" id="input" value="&raquo; weiter" />
					 </div>
			 </div>
			 
			 <div id="box_top">
			 		<div id="caption">Suche</div>
				</div>
				<div id="box_border">
					    <div id="box_content">
					  			 <br />
					  			 <br />
					 			 <input type="submit" id="input" value="&raquo; senden" /> </p>
					 </div>
			 </div>
			 
			 <div id="box_top">
			 		<div id="caption">Call-Back</div>
				</div>
				<div id="box_border">
					    <div id="box_content">
					  			<br />
					  			<br />
					 			 <input type="submit" id="input" value="&raquo; senden" /> </p>
					 </div>
				</div>
				 
				 
			</div>
<!-- Ende des Modulbereichs -->

		
<!-- Ende des Page-divs -->			
		</div>
	
<!-- Ende des Wrap-divs -->
	</div>
	

<!-- Beginn des Footers -->	
	<div id="footer">
	<br />
	<div id="footer_content" class="clearfix">
	
		<div id="last_changed">
		© LUTRO 2007 | 
			<!-- ###LAST_UPDATE### -->
			
			<!-- ###LAST_UPDATE### -->
		</div>
		
		<div id="footer_function">
		<img src="fileadmin/template/site/images/home.gif" class="img_footer" alt="" />
		<img src="fileadmin/template/site/images/impressum.gif" class="img_footer" alt="" />
		<img src="fileadmin/template/site/images/mail.gif" class="img_footer" alt="" />
		<img src="fileadmin/template/site/images/sitemap.gif" class="img_footer" alt="" />
		</div>
		
	
		</div>
	</div>
<!-- Ende Footer -->		

<!--###DOCUMENT_BODY###-->
</body>
</html>
schrumpelgnom ·

Ahh, dankeschön 🙂 - jetzt gehts...
(auf die grandiose Idee mit der Suche hätte ich auch kommen können :p - sorry - bin heut bissl fiebrig, vielleicht liegts daran)