Fehler mit IE

CeeJay · 4. August 2008 13:40

Moin Miteinander,

ich quäle mich gerade mit dem Internet Explorer.

Ich hab eine Seite für meine Firma gemacht, die soweit auch Fertig ist. Jetzt stehen die letzten Tests an, ob alles läuft und alles so ausschaut, wie man sich das vorstellt. Die Vorgabe ist, dass es auf dem FireFox, Safari und IE laufen soll. Und hier ist mein Problem. Auf dem IE tritt ein recht seltsamer Fehler auf.

Meine Startseite Basiert aus 3 Spalten. Linkleiste, Mitte, Rechts (tt_news).
Die rechte Spalte wird aber um verrecken nicht angezeigt. Wenn ich mir den Quellcode im IE anschaue, dann seh ich aber, dass sie vorhanden ist und alles drin ist, was drin sein soll.

Ich hab jetzt schon in den betreffenden CSS nachgeschaut, und diverse einstellungen versucht. Ohne erfolg. Selbst wenn ich alle anderen Spalten ausblende (in den CSS auf width:0px😉 wird sie nicht angezeigt. Langsam gehen mir die Ideen aus.

Ich arbeite nur mit CSS und HTML-Templates, die ich aus dem Beispiel von YAML habe.

Das Template:

<!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>
<title>Codemercs Layout: IO-Controller</title>
<link href="../css/layout_io.css" rel="stylesheet" type="text/css"/>
<link href="../css/horizontal_CSS.css" rel="stylesheet" type="text/css"/>


<link href="../css/layout_3col_fixed.css" rel="stylesheet" type="text/css"/>

</head>

<body>

<div id="page_margins">

<div id="page" class="hold_floats">

<!--<div align="right" id="teaser" class="clearfix">&nbsp;</div>-->

<!-- #nav: - Ende -->
<div id="header"><a href='../../index.php' target='_self' title='Startseite'>###banner### </a></div>

<!--<div align="right" id="teaser" class="clearfix">&nbsp;</div>-->

<!-- #nav: Hauptnavigation -->

<div align="left" id="nav_main">&nbsp;</div><div align="right" id="teaser" class="clearfix">&nbsp;</div><!-- #nav: Hauptnavigation  #teaser: Sprachauswahl -->

<!-- #main: Beginn Inhaltsbereich -->

<div id="main">
<div class="block1"></div>
<div class="block2"></div>
<div class="block3"></div>

<!-- #col1: Erste Float-Spalte des Inhaltsbereiches -->
    <div id="col1">
      <div id="col1_content" class="clearfix">
	  </div>
    </div>
<!-- #col1: - Ende -->

<!-- #col1: Erste Float-Spalte des Inhaltsbereiches -->
    <div id="col2">
      <div id="col2_content" class="clearfix">
	  </div>
    </div>
<!-- #col1: - Ende -->

<a id="content" name="content"></a> <!-- Skiplink-Anker: Content -->
<!-- #col3: Statische Spalte des Inhaltsbereiches -->
    <div id="col3">
    	<!--TYPO3SEARCH_begin-->
      <div id="col3_content" class="clearfix">
      	<div id="col3_innen" class="floatbox">&nbsp;</div>
      </div>
      <!--TYPO3SEARCH_end-->

    </div>
<!-- #col3: - Ende -->

</div>




<!-- #main: - Ende -->

<!-- #footer: Beginn Fusszeile -->
<div id="footer"></div>
<!-- #footer: Ende -->
<div id="page_end" ></div>
</div>

</div>


</body>
</html>

Die CSS-Datei:

@media all
{

/* Formatierung der Seite */
body {background:#444444; background:url(../../img/bg/bg_all.GIF) repeat; padding:50px 0 50px 0; }

/* Hier kann ein umlaufender Rand um die gesamte Webseite erzeugt werden */
#page{border:1px #667 solid; background:#ffffff; } /*fff*/
#page_margins {border:1px #889 solid; min-width:1024px; max-width:1024px; margin:auto;} 

/* Formatierung der Kopfbereiches */
#header {position:relative; top:0; left:0; height:180px; background-color:#BDD2D9; background:url(../../img/bg/design_io_banner_bg.gif) repeat; border-left:1px #BBBBBB solid; border-right:1px #BBBBBB solid;} /*C4DDEA*/
#header img {position:relative; top:0px; left:0px; font-size:208%; }
#banner {position:absolute; top:0; left:0; z-index:10;}
#banner img {position:relative; top:0px; left:0px; font-size:100%;}
#topnav {top:100px;}
#header div.tx-macinasearchbox-pi1 {position:absolute; top:130px; right:10px; font-size:0.8em;}
#header div.tx-macinasearchbox-pi1 input {margin-left:0;}

#platzhalter {position:relative; top:0; left:0; height:12px; background:url(../../img/bg/menu_1.gif) repeat; border-left:0px #BBBBBB solid; border-right:1px #BBBBBB solid;}

/* Formatierung der Fußzeile */
#footer {color:#888; background:#FFFFFF; background:url(../../img/bg/bg_7.gif) repeat; margin-top: 1em; padding:40px 0 0 0; border-top:0px #ddd solid; line-height:2em; hight:10px;}

/* ######################################################################################################
** ### Formatierung der Inhaltsspalten ##################################################################
** ######################################################################################################
*/
#main {background:#ffffff; padding-top:5px;} /*fff*/

/* linke Spalte */
#col1 {width:22.5%;}
#col1_content {margin-left:1em; margin-right:1em; color:#444; background:inherit;}

/* Rechte Spalte */
#col2 {width:25%; background:#FFFFFF; margin-right:1em; margin-left:1em;} 
#col2_content {	margin-left:1em; margin-right:1em; margin-top:1em; background:transparent; }

/* Mittlere Spalte */
#col3 {margin-left:22.5%; margin-right:5px; background:transparent;}
#col3_content {margin-left:1em; margin-right:1em; margin-top:1em; background:transparent;}

/* ######################################################################################################
** ### Formatierung des Teasers der Startseite ##########################################################
** ######################################################################################################
*/
/*#teaser {margin:0; background:url(../../img/bg/AK-tutTemplate02_05.jpg) repeat; border:1px #BBBBBB solid; color:#000000; padding:2px 5px 4px 1px;}*/
#teaser {background:url(../../img/bg/bg_5.gif) transparent repeat; color:#000000; padding:0px 10px 0px 0px; height:40px;}
#teaser div {float:right; margin-right:1em;}
#teaser .block1 {padding:0.5em 0 0.4em 1em; font-size:0.82em;}
#teaser .block1 a {color:#334;}
#teaser .block1 a:hover {background:transparent;}
#teaser .block3 {width:45%; padding-top:0.5em; font-size:0.82em;}
/*#teaser .langMenu {float:right; padding-top:0.2em; margin-right:0;}
#teaser .selectFontSize {float:right; padding-top:0.4em; padding-right:1em;}
#teaser .selectFontSize a {color:#334;}
#teaser .selectFontSize a:hover {background:transparent;}*/
/*#teaser .aktDatum {float:right; font-size:0.82em; padding-top:0.5em; padding-right:1em;}*/
#teaser .block3 .title {font-family:'Lucida Grande', Verdana, Arial, Sans-Serif; display:block; font-size:1.2em; font-weight:bold; color:#336699; background:inherit; margin:0 0 0.5em 0;}

/*#page_end {margin:0; background:#FFFFFF; border:0px #BBBBBB solid; color:#000000; padding:2px 5px 4px 1px;}*/
#page_end {margin:0; background:url(../../img/bg/design_io_banner_bg.gif) repeat-x bottom; border:0px #BBBBBB solid; color:#000000; padding:2px 5px 4px 1px;}

}

In den anderen Tamplates hab ich nichts zu den Spalten gefunden.
Weiß einer Rat?
Alles andere geht reibungslos und wird ohne Fehler angezeigt.

Danke
CJ

alexd0001 · 5. August 2008 13:34

hi,

ich denke, das ist eindeutig ein CSS-Problem. Ich glaube ich hatte auch mal das Problem und habs dann mit nem Div gelöst, der nach dem eigentlichen Inhalt in der jeweiligen Spalte folgte mit dem Attribut clear: both; (du kannst auch left oder right verwenden wenn du dir sicher bist, was du "clearen" möchtest).

Ebenso kann es an nicht exakt angegebenen width in px handeln..

Ich hoffe, das hilft dir weiter

gruß - alex

CeeJay · 5. August 2008 15:08

Ich habs gelöst. War ein fehler im "Sammel"-CSS

Da hab ich nachdem ich meine CSS geladen hatte eine Weiter geladen (die noch aus dem Beispiel von YAML stammte) und die hat alle einstellungen neu geladen. Jetzt siehts auch auf dem IE gut aus.

Danke für den Hinweis mit dem clearing. Dadurch hab ich alle CSS nochmal durchgesehen und das da gefunden. :p