✔ Darstellungsfehler IE6

tonik · 8. April 2007

Hi...

ich versuche mit YAML layout_3col_fixed ein Templat zu machen, das problem ist das bei FF und IE7 die Bilder werden richtig dargestellt bei IE6 nicht. Um zu verdeutlichen hab ich ein Bild von FF, IE7 und IE6 gemacht da kann man das unterschied sehen. (habe in Bild mit roten Pfeil markiert)

PS: ich habe in YMLA Forum versucht Hilfe zubekommen, leider ohne ergebnis.

FF : http://alba.wspace-service.de/FF1.jpg
IE7: http://alba.wspace-service.de/IE7.jpg
IE6: http://alba.wspace-service.de/IE6.jpg

Ich Hoffe das einer mir hilft....

===DANKE===

base.css

Code:

/* ######################################################################################################
** # "Yet Another Multicolum Layout" (c) by Dirk Jesse (http://www.yaml.de) #############################
** # "YAML for TYPO3" (c) by Dieter Bunkerd (http://yaml.t3net.de) ######################################
** ######################################################################################################
**
**  YAML Version: 2.5.2
**  Dateiversion: 6.11.06
**  Datei       : base.css
**  Funktion    : Basis-Stylesheet
**
**  Don't make any changes in this file!
**  Any changes should be placed in basemod-files in css/modifications directory.
**  Checked with http://jigsaw.w3.org/css-validator/ 19.1.07 - DB
*/

@media all
{
/* ######################################################################################################
** ### Vorbereitende Maßnahmen | Reset ##################################################################
** ######################################################################################################
*/
	/* Hiermit werden die Randabstände und border aller HTML-Elemente auf Null gesetzt. Damit wird das
	** Aussehen der Webseite in unterschiedlichen Browsern vereinheitlicht.
	*/

	* { margin:0; padding: 0; }

	/* Das zurücksetzen der Innen- und Außenabstände verursacht zu kleine Selectboxen. Dies wird korrigiert */
	option {padding-left: 0.4em}

	/*
	** Die nachfolgenden Angaben entstammen dem Artikel 'Useful Code Snippets' von Mike Foskett
	** [http://www.websemantics.co.uk/tutorials/useful_css_snippets/]
	*/

	/* Vertikalen Scrollbalken im Netscape & Firefox erzwingen. Dies verhindert, dass zentrierte Layouts
	** um 10 Pixel springen wenn der Seiteninhalt kleiner wird als die Höhe des Browserfensters. */
	html { height: 100% }
	body {
		min-height: 101%;
	/* Beseitigung des Rundungsfehlers bei Schriftgrößen im Opera sowie Standardformatierungen */
		font-size: 100.01%;
	/* FIX: Verhindert, dass positionierte Elemente nicht verschoben werden when die Größe des Browser
			Fensters geändert wird. */
		position: relative;

	/* Vorgabe der Standardfarben und Textausrichtung*/
		color: #000;
		background: #fff;
		text-align: left;
	}

	/* Standardrahmen zurücksetzen */
	fieldset, img { border:0; }

	/* Anpassung für Safari Browser. font-size:100% ist für den Safari in Formularen zu groß */
	select, input, textarea { font-size: 99% }

/* ######################################################################################################
** ### DIV-Container des Basislayouts ###################################################################
** ######################################################################################################
*/

   #topheader{
	background: url(../../img/Header_O.png);
	height: 13px;
	background-repeat: no-repeat;
}
	
	#header { position:relative }

	#topnav {
		position:absolute;
		top: 10px;
		right: 10px;
		color: #fff;
		background: transparent;
		text-align: right; /* Erforderlich, damit im Opera 6 wirklich rechts plaziert ! */
	}

	#nav { clear:both; width: auto; }
	#main {	clear:both; width: auto; }


	#col1 {
		float: left;
		width: 180px; /* Standard-Wert, falls keine anderen Vorgaben gemacht werden */
	}

	#col2 {
		float:right;
		width: 180px; /* Standard-Wert, falls keine anderen Vorgaben gemacht werden */
	}

	#col3
	{
		width:auto;
		margin-left: 180px; /* Standard-Wert, falls keine anderen Vorgaben gemacht werden */
		margin-right: 180px; /* Standard-Wert, falls keine anderen Vorgaben gemacht werden */
	}

	#footer { clear:both; }	/* Backup für IE-Clearing */

	/* Der z-Index verhindert, dass im Falle des noch bestehenden IE-Bugs die Texte vor
	** dem Spaltenhintergrund erscheinen. */
	#col1 {z-index: 3;}
	#col2 {z-index: 5;}
	#col3 {z-index: 1;}
	#col1_content {z-index: 4;}
	#col2_content {z-index: 6;}
	#col3_content {z-index: 2;}

	#col1_content, #col2_content, #col3_content, { position:relative; }

/* ######################################################################################################
** ### Markupfreie CSS-Floatclearing-Lösungen ###########################################################
** ######################################################################################################
*/

	/* Clearfix-Methode zum Clearen der Float-Umgebungen */
	 .clearfix:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}

	/* Diese Angabe benötigt der Safari-Browser zwingend !! */
	.clearfix { display: block; }

	/* Overflow-Methode zum Clearen der Float-Umgebungen */
	.floatbox { overflow:hidden; }

	/* IE-Clearing: Benötigt nur der Internet Explorer und über iehacks.css zugeschaltet */
	#ie_clearing { display: none }

/* ######################################################################################################
** ### IE-Clearing bis YAML V2.4 ########################################################################
** ######################################################################################################
**
** Die CSS-Definition des IE-Clearings, welches bis YAML 2.4 verwendet wurde, ist aus Gründen der
** Abwärtskompatibilität des Basis-Stylesheets weiterhin enthalten.
*/
	/* Clearen der 3 Inhaltsspalten mittels dieses speziellen hr-Tags */
	hr.clear_columns {
		clear: both;
		float: left;
		content: ".";
		display: block;
		height: 0;
		line-height: 0px;
		visibility: hidden;
		border: 0;
		padding: 0;
		margin: -1.1em 0 0 0; /* erforderlich damit kein Leerraum zwischen Spalten und Footer entsteht */
	}

/* ######################################################################################################
** ### Standard-Formatierungen für Listen & Zitate ######################################################
** ######################################################################################################
*/

	ul, ol, dl { margin: 0 0 1em 1em }
	li { margin-left: 1.5em; line-height: 1.5em; }

	dt { font-weight: bold; }
	dd { margin: 0 0 1em 2em; }

	blockquote, cite { margin: 0 0 1em 1.5em; font-size: 0.93em; width: auto;}

/* ######################################################################################################
** ### Subtemplates #####################################################################################
** ######################################################################################################
*/

	.subcolumns {
		width: 100%;
		padding: 0 1px 0 1px;
		margin: 0 -1px 0 -1px;
		overflow:hidden;
	}
   .box100 {float: left; overflow: hidden; }
	.box38L, .box50L, .box62L {clear:left;float: left; overflow: hidden; }
	.box38R, .box50R, .box62R {float: right; overflow: hidden; }

	.box38L, .box38R { width: 38.196%; }
	.box50L, .box50R { width: 49.999%; }
	.box62L, .box62R { width: 60.803%; }
   .box100 { width: 180px; }
/* Box Begin */

	
/** BOX Top - Header **/
.BoxHeader, .BoxTop { height: 31px; border-bottom: 1px solid #C9D0D4; }
.BoxHeader { margin: 0 6px; }

.BoxTop, .NoBorderB {border-bottom: none;}
.BoxTop h1 {font-size: 1.2em;}
.BoxTop h2 {font-size: 1.2em;}
.BoxHeader { margin: 0 6px; background: url(../../img/bgTop_1.png) repeat-x; }

.BoxTop h1, .BoxTop h2 {
/*	color: #0D2F60;*/
	margin: 0;g
	padding: 0;
	height: 31px;
	padding: 8px 0 7px 3px;
	overflow: hidden;
}
.BoxTop h1 a, .BoxTop h2 a {text-decoration: none;}
.BoxTop h1 a:hover, .BoxTop h2 a:hover {text-decoration: underline;}

.BoxLEcke, .BoxREcke {width: 6px; height: 31px;}
.BoxLEcke {background: url(../../img/bgTopLeft_.png) no-repeat;  }
.BoxREcke {background: url(../../img/bgTopRight_.png) no-repeat;  }

.NoEcke{display: none;}

.BoxLEcke{float: left;}
.BoxREcke{float: right;}

/** BOX Top ENDE **/
/************************************************************************************/

/** BOX Mittel **/
.boxmittel  { padding: 0 1em 0 1em; overflow: hidden; border-left: 1px solid #C9D0D4;  border-right: 1px solid #C9D0D4; }
.boxmittelL { padding: 0 0 0 1em; overflow: hidden; background: #FF8484; border-left: 1px solid #C9D0D4;  border-right: 1px solid #C9D0D4; }
.boxmittelR { padding: 0 0 0 1em; overflow: hidden; background: #DAF0FD; border-left: 1px solid #C9D0D4;  border-right: 1px solid #C9D0D4;    }
/** BOX Mittel ENDE **/
/***********************************************************************************/

/** Bottom **/
.BoxBLEcke, .BoxBREcke {width: 6px; height: 6px;}
.BoxBLEcke {background: url(../../img/bgBottomLinks.png) no-repeat;  float: left; }
.BoxBREcke {background: url(../../img/bgBottomRechts.png) no-repeat;  float: right; }

.BoxFooter {font-size: 0; height: 6px; }
.BoxFooter {background: url(../../img/bgBottom.png) repeat-x; margin: 0 6px;  background-color: #DF0000;  }

.NoEcke{display: none;}
/** Bottom ENDE **/
/***********************************************************************************/			

}



/* ######################################################################################################
** ### Skiplink-Navigation ##############################################################################
** ######################################################################################################
*/
@media screen, print
{
.skip {
	position: absolute;
	left: -1000em;
	width: 20em;
}

}

 .xsnazzy h1, .zsnazzy h1 {
margin:0; 
font-size:1.2em; 
padding:0 10px 5px 10px; 
border-bottom:1px solid #444;
}
.xsnazzy p, .zsnazzy p {
margin:0; 
padding:5px 10px; 
font-size:10px;
}
.xsnazzy {
background: transparent; 
width:240px; 
float:left; 
margin:0 3px;
}

.xtop, .xbottom {
display:block; 
background:transparent; 
font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block; 
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#fff; 
border-left:1px solid #444;
border-right:1px solid #444;
}
.xb1 {
margin:0 5px; 
background:#444;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px; 
margin:0 1px;
}

.xboxcontent {
display:block; 
border:0 solid #444; 
border-width:0 1px; 
height:auto;
}
* html .xboxcontent {
height:1px;
}

.color_a {
background:#c9ba65;
color:#fff;
}
.color_b {
background:#d4d8bd; 
color:#000;
}
.color_c {
background:#758279; 
color:#fff;
}
.color_d {
background:#b2ab9b; 
color:#000;
}

basemod.css

Code:

/* ######################################################################################################
** # "Yet Another Multicolum Layout" (c) by Dirk Jesse (http://www.yaml.de) #############################
** # "YAML for TYPO3" (c) by Dieter Bunkerd (http://yaml.t3net.de) ######################################
** ######################################################################################################
**
**  YAML Version: 2.5.2
**  Dateiversion: 6.11.06
**  Datei       : basemod.css
**  Funktion    : Basis-Modifikation für das Layout des YAML-Tutorials
**  Checked with http://jigsaw.w3.org/css-validator/ 19.1.07 - DB
*/

@media all
{

/* Formatierung der Seite */
body {background:#E2E7EB; padding:10px;}

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

/* Formatierung der Kopfbereiches */
#header {position:relative; height:140px; color:#fff; background:#1f1e2e url(../../img/yaml_bg.gif) repeat-x top;}
#header img {position:absolute; top:23px; left:10px; font-size:208%;}
#banner {position:absolute; top:20px; right:0px; 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;}

/* Formatierung der Fußzeile */
#footer {color:#888; background:#fff; margin:1em; padding:1em 0 0 0; border-top:1px #ddd solid; line-height:2em;}

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

/* linke Spalte */
#col1 {
width:180px;
}
#col1_content {
margin-left:0em; 
margin-right:0em; 
color:#444; 
background:inherit;
}

/* Rechte Spalte */
#col2 {
width:180px;
}
#col2_content {	
margin-left:0em; 
margin-right:0em;
}

/* Mittlere Spalte */
#col3 {
margin-left:22.5%; 
margin-right:25%; 
border-left:0px dotted #ddd; 
border-right:0px dotted #ddd;
}
#col3_content {
margin-left:0em; 
margin-right:0em;
}

/* ######################################################################################################
** ### Formatierung des Teasers der Startseite ##########################################################
** ######################################################################################################
*/
#teaser {margin:0; padding:0; background:#D5D0BA; color:#765;}
#teaser div {float:left; width:auto; 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;}


}

basemod_3col_fixed.css

Code:

/* ######################################################################################################
** # "Yet Another Multicolum Layout" (c) by Dirk Jesse (http://www.yaml.de) #############################
** # "YAML for TYPO3" (c) by Dieter Bunkerd (http://yaml.t3net.de) ######################################
** ######################################################################################################
**
**  YAML Version: 2.5.2
**  Dateiversion: 6.11.06
**  Datei       : basemod_3col_fixed.css
**  Funktion    : Variation des Basislayouts (3-Spalten-Layout mit fixer Gesamtbreite
**                                            und grafikfreien Spaltentrennern)
**  Checked with http://jigsaw.w3.org/css-validator/ 19.1.07 - DB
*/

@media screen
{
/* Festlegung der Layoutbreite und Zentrierung*/
#page_margins {
width:950px; 
margin-left:auto; 
margin-right:auto;
 max-width:inherit;  /* min-width für fixes Layout abschalten */
 min-width:inherit;  /* max-width für fixes Layout abschalten */
}
/* Korrektur von Randabständen */
#main {
margin:0; 
padding:0;}

#footer {margin:0; padding:1em; border-color:#aaa;}
/* Himtergrundgrafik für linke Spalte - Grafikbreite 250 Pixel */
#main { background-color: #1E90FF; }
/* ######################################################################################################
** ### Formatierung der Inhaltsspalten ##################################################################
** ######################################################################################################
*/
#col1, #col2 {
width:180px;  
background: #4682B4; 
}
#col3 { 
margin-left: 185px; 
margin-right: 185px; 
border-left: 0px solid #aaa; 
border-right: 0px dotted #aaa;  
background-color: #778899;
 }

}

HTML

HTML:

<!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>YAML Typo3 - 3 Spalten fest (1-3-2)</title>
<link href="../css/layout_3col_fixed.css" rel="stylesheet" type="text/css"/>
<!--[if lte IE 7]>
<link href="../css/explorer/iehacks_3col_fixed.css" rel="stylesheet" type="text/css" />
<![endif]-->


</head>

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

<div id="header">
  <div id="topheader"></div>
	
	<img src="../img/yaml_title.gif" alt="Yet Another Multicolumn Layout"/></div>

<!-- #nav: Hauptnavigation -->
<div id="nav"><a id="navigation" name="navigation"></a>
  <!-- Skiplink-Anker: Navigation -->
	<div id="nav_main">
		<ul>
			<li id="current"><a href="#">Button 1</a></li>
			<li><a href="#">Button 2</a></li>
			<li><a href="#">Button 3</a></li>
			<li><a href="#">Button 4</a></li>
			<li><a href="#">Button 5</a></li>
		</ul>
	</div>
</div>
<!-- #nav: - Ende -->

<!-- #main: Beginn Inhaltsbereich -->
<div id="main">
<div id="teaser" class="clearfix">
<div class="block1">
<ul>
  <li>Verst&auml;ndlich</li>
  <li>Flexibel</li>
  <li>Standardkonform</li>
  <li>Barrierearm</li>

  <li>Anpassbar</li>
  </ul>
</div>
</div>

<!-- #col1: Erste Float-Spalte des Inhaltsbereiches -->
    <div id="col1">
      <div id="col1_content" class="clearfix">
 <div class="subcolumns">
  <div class="box100">
    <div class="BoxTop">
	  <div class="BoxLEcke"></div>
      <div class="BoxREcke"></div>
	    <div class="BoxHeader">
		
	    </div>
    </div>
   <div class="boxmittel"> Linke spalte </div> 
  </div>

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

<!-- #col2: zweite Flaot-Spalte des Inhaltsbereiches -->
    <div id="col2">
    	<!--TYPO3SEARCH_begin-->
      <div id="col2_content" class="clearfix">
 <div class="subcolumns">
  <div class="box100">
    <div class="BoxTop">
	  <div class="BoxLEcke"></div>
      <div class="BoxREcke"></div>
	    <div class="BoxHeader">
		
	    </div>
    </div>
   <div class="boxmittel"> Rechte spalte </div> 
  </div>

	  </div>
    </div></div>
      <!--TYPO3SEARCH_end-->
   
<!-- #col2: - 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">
      	  <div class="subcolumns">
  <div class="box62L">
    <div class="BoxTop">
	  <div class="BoxLEcke"></div>
      <div class="BoxREcke"></div>
	    <div class="BoxHeader">
		
	    </div>
    </div>
   <div class="boxmittelL"> Links </div> 
  </div>

  <div class="box38R">
    <div class="BoxTop">
	  <div class="BoxLEcke"></div>
      <div class="BoxREcke"></div>
	    <div class="BoxHeader">
		
	    </div>
    </div>
   <div class="boxmittelR"> Rechts </div> 
  </div>

</div></div></div>
<div class="box62L">
<div class="BoxBLEcke"></div>
<div class="BoxBREcke"></div>
<div class="BoxFooter"><div></div></div>
</div>
<!-- #col3: - Ende -->

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

<!-- #footer: Beginn Fusszeile -->
<div id="footer">
  Dieses Layout basiert auf <a href="http://www.yaml.de/">YAML</a> 
  &copy; 2005-2006 by <a href="http://www.highresolution.info">Dirk Jesse</a>
</div>
<!-- #footer: Ende -->
</div>
</div>
</body>
</html>

Maik · 8. April 2007

Hi,

die drei Links erzeugen bei mir im Firefox eine Fehlermeldung:

Fehler:

Das Aufrufen dieser Daten von extern Quellen ist nicht erlaubt

Welche der drei gezeigten Stylesheets werden nun in dem Dokument geladen? Im HTML-Code werden sie nämlich nicht genannt.

Und wie lautet der Quellcode des IE-spezifischen Stylesheets iehacks_3col_fixed.css?

tonik · 8. April 2007

Bei ausführen werden diese CSS gelden

** YAML Version: 2.5.2
** Dateiversion: 19.1.07
** Datei : layout_3col_fixed.css
** Funktion : Zentrales Stylesheet 3-Spalten-Layout mit fester Breite und grafikfreien Spaltentrennern
**
*/
@import url(main/base.css);
@import url(modifications/basemod.css);
@import url(modifications/basemod_3col_fixed.css);
@import url(navigation/nav_slidingdoor.css);
@import url(navigation/nav_vlist.css);
@import url(main/content.css);
@import url(main/typo3-RTE.css);
@import url(print/print_003.css);

(Copy and Paste)

FF : __http://alba.wspace-service.de/FF1.jpg
IE7: __http://alba.wspace-service.de/IE7.jpg
IE6: __http://alba.wspace-service.de/IE6.jpg

iehacks

Code:

/* ######################################################################################################
** # "Yet Another Multicolum Layout" (c) by Dirk Jesse (http://www.yaml.de) #############################
** # "YAML for TYPO3" (c) by Dieter Bunkerd (http://yaml.t3net.de) ######################################
** ######################################################################################################
**
**  YAML Version: 2.5.2
**  Dateiversion: 6.11.06
**  Datei       : iehacks.css
**  Funktion    : Basis-Stylesheet [Korrektur der Rendering-Bugs des Internet Explorers]
**
**  Don't make any changes in this file!
**  Any changes should be placed in adaptation-files in css/explorer directory.
**  Checked with http://jigsaw.w3.org/css-validator/ 19.1.07 - DB - DONT CORRECT ERRORS !
*/

/* LAYOUT-UNABHÄNGIGE ANPASSUNGEN ------------------------------------------------------------------------- */
@media all
{
	/*------------------------------------------------------------------------------------------------------*/
	/* Debugging: Um festzustellen, ob der IE die Anpassungs-Stylesheets wirklich erhält kann während der   */
	/*            Testphase der Farbwechsel aktiviert werden. Ist der Seitenhintergrund grün, so ist alles  */
	/*            in Ordnung.                                                                               */

	/* body { background: #0f0; background-image: none; }                                                   */
	/*------------------------------------------------------------------------------------------------------*/

	/*------------------------------------------------------------------------------------------------------*/
	/* Anpassung für Firefox/Netsape aus der base.css für den Internet Explorer rückgängig machen           */
	/*
	** IE5.x/Win - x
	** IE5.x/Mac - x
	** IE6       - x
	** IE7       - x
	*/

	body { min-height: none; }
	html { height: auto; }
	/*------------------------------------------------------------------------------------------------------*/

	/*------------------------------------------------------------------------------------------------------*/
	/* Workaround: Clearfix-Anpassung für diverse IE-Versionen */
	/*
	** IE5.x/Mac - x
	** IE7       - x
	*/
	.clearfix { display: inline-block; }  /* ... Clearing für IE5/Mac und IE7 */

	/*
	** IE5.x/Win - x
	** IE6       - x
	*/
	/* Hides from IE-mac \*/
	* html .clearfix { height: 1%; }   /* ... für IE5 + IE6/Win | IE-Clearing aktivieren */
	.clearfix { display: block; }      /* ... für IE5,IE6,IE7 | Mac-Einstellungen für IE/Win zurücksetzen */
	/* End hide from IE-mac */
	/*------------------------------------------------------------------------------------------------------*/

	/*------------------------------------------------------------------------------------------------------*/
	/* Workaround Anpassung der .floatbox-Klasse für IE */
	/*
	** IE5.x/Win - x
	** IE5.x/Mac - x
	** IE6       - x
	** IE7       - 0
	*/

	* html .floatbox { width:100%; }
	/*------------------------------------------------------------------------------------------------------*/

	/*------------------------------------------------------------------------------------------------------*/
	/* Bug: Unvollständige Darstellung der Spalteninhalte / Spaltentrenner                                  */
	/*
	** IE5.x/Win - x
	** IE5.x/Mac - unbekannt
	** IE6       - x
	** IE7       - x
	*/

	* html #col1 { position:relative; } /* Nur für < IE7, sonst gibts im IE7 neue Positionierungsprobleme */
	* html #col2 { position:relative; } /* Nur für < IE7, sonst gibts im IE7 neue Positionierungsprobleme */
	* html #col3 { position:relative; }
	/*------------------------------------------------------------------------------------------------------*/

	/*------------------------------------------------------------------------------------------------------*/
	/* Bug: "Escaping Floats Bug" Der Hack sorgt im IE dafür, dass Floats ihre Breite behalten und nicht    */
	/* unkontrolliert seitlich ausbrechen. */
	/*
	** IE5.x/Win - x
	** IE5.x/Mac - 0
	** IE6       - x
	** IE7       - x
	*/

	/* Hides from IE-mac \*/
	.hold_floats { height: 1%; }
	/* End hide from IE-mac */
	/*------------------------------------------------------------------------------------------------------*/

	/*------------------------------------------------------------------------------------------------------*/
	/* Bug: "Disappearing List-Background Bug" */
	/*
	** IE5.x/Win - x
	** IE5.x/Mac - x
	** IE6       - x
	** IE7       - 0
	*/

	* html ul { position: relative }
	* html ol { position: relative }
	* html dl { position: relative }
	/*------------------------------------------------------------------------------------------------------*/

	/*------------------------------------------------------------------------------------------------------*/
	/* Bug: "Disappearing Backgrounds in various HTML-Elements". To be extended on demand ... */
	/*
	** IE5.x/Win - x ( IE5 reagiert hier auf zoom:1 )
	** IE5.x/Mac - ?
	** IE6       - x
	** IE7       - 0
	*/

	* html blockquote { zoom:1 }
	/*------------------------------------------------------------------------------------------------------*/

	/*------------------------------------------------------------------------------------------------------*/
	/* Allgemeine IE-Layouthilfe, um die freie Spaltenanordnung zu gewährleisten und die Robustheit der     */
	/* DIV-Container für beliebige Inhalte zu erhöhen. Die Eigenschaft "zoom" erzwingt "hasLayout" im IE.   */
	/*
	** IE5.01/Win - 0 (Eigenschaft "zoom" wird nicht interpretiert)
	** IE5.x/Win - x
	** IE5.x/Mac - x
	** IE6       - x
	** IE7       - x
	*/

	#page_margins, #page, #header, #nav, #main, #footer { zoom: 1; }
	/*------------------------------------------------------------------------------------------------------*/

	/*------------------------------------------------------------------------------------------------------*/
	/* Bug: "Doubled Float Margins" des Internet Explorers *
	**
	** IE5.x/Win - x
	** IE5.x/Mac - x
	** IE6       - x
	** IE7       - 0
	*/

	* html #col1 { display: inline; }
	* html #col2 { display: inline; }
	/*------------------------------------------------------------------------------------------------------*/

	/*------------------------------------------------------------------------------------------------------*/
	/* Bug: 'Internet Explorer and Italics Problem'
	** Bei Verwendung des Schriftstils 'Italics' mittels der HTML-Tags <i> oder <em> erweitert der Internet
	** Explorer die Breite der umgebenden Box, falls diese Tags sich am Ende einer Zeile befinden. Die
	** Erweiterung der Box führt zu Layoutproblemen, da die Box plötzlich nicht mehr in das Layout passt.
 	** Durch 'overflow:visible' wird dieses Problem im IE5.5+ aufgehoben.
	**
	** IE5.0/Win - x (nicht zu beheben !!)
	** IE5.5/Win - x
	** IE5.x/Mac - x
	** IE6       - x
	** IE7       - 0
	*/

	* html #col1_content { overflow: visible; }
	* html #col2_content { overflow: visible; }
	* html #col3_content { overflow: visible; }
	* html i, * html em { overflow: visible; display:inline-block; }
	/*------------------------------------------------------------------------------------------------------*/

	/*------------------------------------------------------------------------------------------------------*/
	/* Bug: 'kollabierender Margin an #col3 beim Clearing der Spalten'
	**
	** Im speziellen Fall dass im 3-Spalten-Layout (1-3-2 oder 2-3-1) die linke Spalte die kürzeste und die
	** rechte Spalte gleichzeitig die längste der drei Spalte ist, kollabiert im Internet Explorer der
	** linken Margin von #col3 durch das Clearen der Spalten mittels "clear:both".
	** Im IE6 und IE7 lässt sich das Problem beseitigen durch eine trickreiche alternative Clearing-Lösung.
	**
	** IE5.0/Win - x (Bug nicht zu beheben! Stattdessen wird normales Clearing eingesetzt)
	** IE5.5/Win - x (Bug nicht zu beheben! Stattdessen wird normales Clearing eingesetzt)
	** IE5.x/Mac - ?
	** IE6       - x
	** IE7       - x
	*/

	#ie_clearing {
		display:block;       /* DIV sichtbar machen */
		\clear:both;         /* nur für IE5.x/Win gedacht, um normales Clearing zu aktivieren */

		width: 100%;         /* IE-Clearing mit 100%-DIV für IE 6 */
		font-size:0;         /* reduziert zusammen mit dem negativen Margin die Höhe des DIVs auf 2 Pixel */
		margin: -2px 0 -1em 1px; /* IE-Clearing mit übergroßem DIV für IE7 */
	}

	* html #ie_clearing { margin: 0 0 -1em 0}

	html {margin-right: 1px} /* Vermeidung horizontaler Scrollbalken bei randabfallenden Layouts im IE7 */
	* html {margin-right: 0} /* Der IE6 benötigt das nicht */

	#col3_content {margin-bottom:-2px; } /* Beseitigt auch die letzten 2 Pixel des IE-Clearings */
	#col3 { position:relative; } /* notwendig für den IE 7 */
	/*------------------------------------------------------------------------------------------------------*/

	/*------------------------------------------------------------------------------------------------------*/
	/* IE-Anpassung für Subtemplates  */

	.box38L, .box50L, .box62L { display:inline; } /* Float-Margin Hack */
	.box38R, .box50R, .box62R { display:inline; } /* Float-Margin Hack */

	.boxmittel, .boxmittelL, .boxmittelR { width:auto; zoom: 1; } /* IE-Clearing mittels hasLayout für IE6 und IE7 */
	.boxmittel, .boxmittelL, .boxmittelR { width:100%; w\idth: auto; } /* IE-Clearing für IE5.x/win */

	/*------------------------------------------------------------------------------------------------------*/
}

@media screen
{
	/*------------------------------------------------------------------------------------------------------*/
	/* Bug: 'Internet Explorer and the Expanding Box Problem'
	/* Erläuterungen zum Hack: http://www.positioniseverything.net/explorer/expandingboxbug.html
	**
	** Der Lösungsvorschlag mittels overflow:hidden macht in den IE-Versionen 5.01 und 5.5 massive Probleme.
	** Die DIVs werden dort überhaupt nicht mehr angezeigt. Der erzwungene Textumbruch funktioniert hingegen
	** und kann angewandt werden. Sieht allerdings nicht sonderlich schön aus.
	**
	** IE5.x/Win - x
	** IE5.x/Mac - x
	** IE6       - x
	** IE7       - 0
	*/

	* html #col1_content { word-wrap: break-word; }
	* html #col2_content { word-wrap: break-word; }
	* html #col3_content { word-wrap: break-word; }
	/*------------------------------------------------------------------------------------------------------*/

	/*------------------------------------------------------------------------------------------------------*/
	/* Bug: "IE/Win Guillotine Bug"
	** Ausgelöst durch: Hovereffekte mit Wechsel der Hintergrundfarbe bei Hyperlinks
	** Die Fälle für sein Eintreten sind zahlreich: http://www.positioniseverything.net/explorer/guillotine.html
	** Abhängig vom fertigen Layout können daher weitere Anpassungen erforderliche werden.
	**
	** IE5.x/Win - x
	** IE5.x/Mac - x
	** IE6       - x
	** IE7       - x
	*/

	a, a:hover { background-color: transparent; }
	#footer a, #footer a:hover { background-color: transparent; }

	/*------------------------------------------------------------------------------------------------------*/
}

Maik · 8. April 2007

Kannst du die Seite mal online zur Verfügung stellen, damit man auch die eingebundenen Grafiken zur Verfügung hat?

Und was hat es mit den beiden Unterstrichen vor dem URL auf sich?

__http://alba.wspace-service.de/FF1.jpg

tonik · 8. April 2007

ok ich stelle jetz die seite online.

Die Bilder sind in einer FreeHoster hinterlegt, und dort werden keine Externe links erlaubt und deswegen mit dem Unterstrichen (Copy and Paste)

Maik · 8. April 2007

tonik hat gesagt.:
ok ich stelle jetz die seite online.

Ich gehe davon aus, dass du dich mit dem Link meldest, wenn du mit dem Upload soweit bist.

tonik · 8. April 2007

So... es ist online nicht ganz vertig, wie gesagt versuch einen Template zu machen aber ich komme nicht weiter.

http://www.ebay.struga.de/yaml/template/yaml.html

mit der FF schaut die seite gut an, aber mit der IE6 nicht

Maik · 9. April 2007

Hi,

bei den abgerundeten Boxen tritt im IE6 der "3px-Gap-Bug" auf, der sich mit Hilfe der !important-Regel beheben lässt - die erstgenannte Eigenschaft gilt für die modernen Browser, die zweite mit dem negativen margin-Wert für den IE6:

Code:

.BoxLEcke { float: left; margin-right: 0 !important; margin-right: -3px; }
.BoxREcke { float: right; margin-left: 0 !important; margin-left: -3px; }

.BoxBLEcke { background: url(../../img/bgBottomLinks.png) no-repeat;  float: left; margin-right: 0 !important; margin-right: -3px; }
.BoxBREcke { background: url(../../img/bgBottomRechts.png) no-repeat;  float: right; margin-left: 0 !important; margin-left: -3px; }

Damit sich die Lücken im IE6 vollends schliessen, müssen zusätzlich die horizontalen margin-Werte für .BoxHeader und .BoxFooter auf null gesetzt werden:

Code:

.BoxHeader { margin: 0 6px !important; margin: 0; }

.BoxHeader { margin: 0 6px !important; margin: 0; background: url(../../img/bgTop_1.png) repeat-x; }

.BoxFooter {background: url(../../img/bgBottom.png) repeat-x; margin: 0 6px !important; margin: 0; background-color: #DF0000; }

Für die unteren Boxen hast du eine Höhe von sechs Pixeln festgelegt, die der IE6 höher darstellt und sich dadurch ein Abstand zum unteren Rand der übergeordneten Box ergibt.

Lösung:

Code:

.BoxBLEcke, .BoxBREcke {width: 6px; height: 6px; overflow: hidden; }

Okay, soweit zum CSS ...

Im HTML-Quellcode muss noch eine Korrektur vorgenommen werden; und zwar den von mir rotmarkierten und im Quellcode auskommentierten Abschnitt innerhalb der Box .box62L unterbringen:

Code:

<div id="main">
    ...
    <div id="col3">

      <div id="col3_content" class="clearfix">
           <div id="col3_innen" class="floatbox">
                <div class="subcolumns">
                     <div class="box62L">
                          <div class="BoxTop">
                               <div class="BoxLEcke"></div>
                               <div class="BoxREcke"></div>
                               <div class="BoxHeader"></div>
                          </div>
                          <div class="boxmittelL"> Links </div>
                          <div class="BoxBottom">
                               <div class="BoxBLEcke"></div>
                               <div class="BoxBREcke"></div>
                               <div class="BoxFooter"><div></div></div>
                          </div>
                     </div>

                     <div class="box38R">
                          ...
                     </div>
                </div>
           </div>
      </div>
<!--<div class="box62L">
<div class="BoxBLEcke"></div>
<div class="BoxBREcke"></div>
<div class="BoxFooter"><div></div></div>-->
    </div>
    <!-- #col3: - Ende -->

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

tonik · 10. April 2007

Super Danke die Bilder werden jetz richtig Dargestelltich.
ich habe jetzt ein andere probleme:
1. das IE 6 mit Transparente PNG Bilder probleme macht
2. das gesamte mittlere Spalter bei IE hatt meher pixel abstand zur Linke -und Rechte Spalte als FF

http://www.ebay.struga.de/yaml/template/yaml.html

===DFANKE===

Maik · 10. April 2007

Hi!

Die Vorgängerversionen des IE7 können halbtransparente PNGs nicht darstellen. Eine Lösung hierfür bietet IE PNG Alpha Fix Demonstration .
Derzeit kann ich nicht nachvollziehen, weshalb der IE den Abstand zu den beiden äußeren Spalten vergrössert.

✔ Darstellungsfehler IE6

tonik

Grünschnabel

Maik

tonik

Grünschnabel

Maik

tonik

Grünschnabel

Maik

tonik

Grünschnabel

Maik

tonik

Grünschnabel

Maik

Neue Beiträge