mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Fr 19.04.2024 06:47 Benutzername: Passwort: Auto-Login

Thema: [css] Probleme mit Darstellung im IE6 vom 09.03.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [css] Probleme mit Darstellung im IE6
Autor Nachricht
Ragnaroek
Account gelöscht Threadersteller


Ort: -

Verfasst Fr 09.03.2007 15:19
Titel

[css] Probleme mit Darstellung im IE6

 Antworten mit Zitat Zum Seitenanfang
Hallo allerseits...es geht um folgende Seite:

PerlenReich

im FF sieht das ganze gut aus, aber im IE6 ist der mittlere Teil plötzlich nach unten gerutscht. Ich habe auch schon versicht das ganze zu "verbreitern" aber kein Erfolg. Vielleicht kann von euch mal jemand drüber schauen. Vielleicht fällt ja jemandem noch was auf...

hier das HTML

Code:
<!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>PerlenReich</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<!-- Fügen Sie hier ihre Meta-Daten ein -->
<link href="css/layout.css" rel="stylesheet" type="text/css"/>

<!--[if lte IE 7]>
<link href="css/iehacks_1-3-2.css" rel="stylesheet" type="text/css" />
<link href="css/basemod_simple_ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->


</head>
<body>




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

   <!-- #main: Beginn Inhaltsbereich -->
   <div id="main">
   <a id="content" name="content"></a> <!-- Skiplink-Anker: Content -->
   
      
      <!-- #col1: Erste Float-Spalte des Inhaltsbereiches -->
      <div id="col1">
      
         <div id="col1_content" class="clearfix">
            
            <p><b><a href="#">Warenkorb:</a></b> 0 Produkte</p>
            
            <div id="col1_login">
            
               <p>Willkommen</p>
                  
               <form name="form1" method="post" action="#">
               
                  <fieldset>
                  <input type="text" name="name" size="26"/>
                  <input type="text" name="passwort" size="15" />
                  <input type="image" name="submit" src="images/go.gif" class="senden"/>
                  </fieldset>
               
               </form>
      
            </div>
         
            <div id="nav_links" class="clearfix">
               
               <br /><h2>Categories:</h2><br />
               
               <ul>
                  <li><a href="#">Wedding decoration</a></li>
                  <li><a href="#">Wedding cars</a></li>
                  <li><a href="#">Wedding flowers</a></li>
                  <li><a href="#">Wedding designers</a></li>
                  <li><a href="#">Bridal dress designs</a></li>
                  <li><a href="#">Banquet decorations</a></li>
                  <li><a href="#">Man speeches</a></li>
                  <li><a href="#">Boda deco</a></li>
                  <li><a href="#">Bridal gown</a></li>
                  <li><a href="#">Church decoration</a></li>
                  <li><a href="#">Best Gifts</a></li>
                  <li><a href="#">Wedding Reception</a></li>
                  <li><a href="#">Wedding Favors</a></li>
               </ul>
            
           </div>
          
           <div id="col1_images_bottom">
          
            <a href="#"><img src="images/wedding_jewelry.jpg" alt="weddingcars" width="180" height="121" /></a><br />
          
           </div>
         
         </div>
         
      </div>
      
      <!-- #col1: - Ende -->
      
      <!-- #col2: zweite Flaot-Spalte des Inhaltsbereiches -->
      <div id="col2">
         
         <div id="col2_content" class="clearfix">
      
            <form class="clearfix" action="#">
                  
               Währung: &nbsp;
                     
               <select name="waehrung" size="1" class="dropdown_waehrung">
                  
                  <option>US Dollar</option>
                  <option>Euro</option>
               
               </select>
               
            </form>
            
            <div id="col2_nav_header">
            
               <ul>
                  <li><a href="#">Liefer &amp; Versandkosten</a></li>
                  <li><a href="#">Datenschutz</a></li>
                  <li><a href="#">Unsere AGB</a></li>
                  <li><a href="#">Impressum</a></li>
                  <li><a href="#">Kontakt</a></li>
               </ul>
      
            </div>
      
            <div id="col2_bestseller">
            
               <h2>Bestseller</h2>
            </div>
            
            <div id="col2_nav_bestseller">
            
               <ul>
             
                  <li><a href="#">Pooh Air Chair Set</a></li>
                  <li><a href="#">Battleship</a></li>
                  <li><a href="#">Line Control Car</a></li>
                  <li><a href="#">Bright Slide Balls</a></li>
                  <li><a href="#">Intex Winnie</a></li>
                
               </ul>
            
            </div>
            
            <div id="col2_bilder">
            
               <a href="#"><img src="images/weddingcars.jpg" alt="weddingcars" width="151" height="97" /></a><br />
               <a href="#"><img src="images/weddingflowers.jpg" alt="weddingflowers" width="151" height="98" /></a><br />
               <a href="#"><img src="images/moneyback.jpg" alt="moneyback" width="151" height="93"  /></a>   
            
            </div>
         
         </div>
      
      </div>
         
      <!-- #col2: - Ende -->
      
      <!-- #col3: Statische Spalte des Inhaltsbereiches -->
         
      <div id="col3">
          
        <div id="col3_content" class="clearfix">
       
         <p>Sprachen: &nbsp;
               
            <a href="#"><img src="images/sprache_eng.jpg" width="24" height="15" alt="a" /></a>&nbsp;
            <a href="#"><img src="images/sprache_de.jpg" width="24" height="15" alt="a" /></a>&nbsp;
            <a href="#"><img src="images/sprache_sp.jpg" width="24" height="15" alt="a" /></a>&nbsp;
         
         </p>
      
         
         <div id="col3_kategorie">
         
            <h1>Kategorie 1</h1>
            
         </div>
      
         <div id="col3_content_innen" class="clearfix">
         
            <div class="col3_content_produktbilder">
            
               <a href="#"><img src="images/produkt1.jpg" width="132" height="80" alt="a" /></a>
      
            </div>
            
            <div class="col3_content_produktbeschreibung">
            
               <h3><a href="#">Beispiel Artikel 5301</a></h3>
               
               <b>12,90 &euro;</b>
               
               <br /><span class="versandkosten">(inkl. 19% Mwst zzgl. Versandkosten)</span>
               
               <br /><br />
      
            </div>
            
            <div class="col3_content_produktbilder">
            
               <a href="#"><img src="images/produkt1.jpg" width="132" height="80" alt="a" /></a>
      
            </div>
            
            <div class="col3_content_produktbeschreibung">
            
               <h3><a href="#">Beispiel Artikel 5301</a></h3>
               
               <b>12,90 &euro;</b>
               
               <br /><span class="versandkosten">(inkl. 19% Mwst zzgl. Versandkosten)</span>
               
               <br /><br />
      
            </div>
            
            <div class="col3_content_produktbilder">
            
               <a href="#"><img src="images/produkt1.jpg" width="132" height="80" alt="a" /></a>
      
            </div>
            
            <div class="col3_content_produktbeschreibung">
            
               <h3><a href="#">Beispiel Artikel 5301</a></h3>
               
               <b>12,90 &euro;</b>
               
               <br /><span class="versandkosten">(inkl. 19% Mwst zzgl. Versandkosten)</span>
               
               <br /><br />
      
            </div>
            
            <div class="col3_content_produktbilder">
            
               <a href="#"><img src="images/produkt1.jpg" width="132" height="80" alt="a" /></a>
      
            </div>
            
            <div class="col3_content_produktbeschreibung">
            
               <h3><a href="#">Beispiel Artikel 5301</a></h3>
               
               <b>12,90 &euro;</b>
               
               <br /><span class="versandkosten">(inkl. 19% Mwst zzgl. Versandkosten)</span>
               
               <br /><br />
      
            </div>
         
            
            <div class="col3_content_produktbilder">
            
               <a href="#"><img src="images/produkt1.jpg" width="132" height="80" alt="a" /></a>
      
            </div>
            
            <div class="col3_content_produktbeschreibung">
            
               <h3><a href="#">Beispiel Artikel 5301</a></h3>
               
               <b>12,90 &euro;</b>
               
               <br /><span class="versandkosten">(inkl. 19% Mwst zzgl. Versandkosten)</span>
               
               <br /><br />
      
            </div>
            
            
         
         </div>
             
      
         </div>
      
      </div>
      
      <!-- #col3: - Ende -->
      
      
      
      <!-- IE Column Clearing -->
                  <div id="ie_clearing">&nbsp;</div>
              <!-- Ende: IE Column Clearing -->
      
      
      
      <!-- #main: - Ende -->
      
      <!-- #Footer: Beginn Fußzeile -->
      
      
      <div id="footer">
      Copyright &copy; 2007 osCommerce | <a href="#">Privatsphäre und Datenschutz </a>| <a href="#">Unsere AGB</a>&nbsp;&nbsp;&nbsp; Powered by osCommerce
      </div>
      <!-- #Footer: Ende -->

   <!-- #main: ende -->

</div>
<!-- #page: ende -->
</div>      

<!-- #page_margins: ende -->      
</div>

</body>
</html>


und hier das CSS
Code:

/* ######################################################################################################
** # "Yet Another Multicolum Layout" (c) by Dirk Jesse (http://www.yaml.de) #############################
** ######################################################################################################
**
**  YAML Version: 2.5.2
**  Dateiversion: 01.11.06 
**  Datei       : basemod_simple.css
**  Funktion    : Basis-Modifikation für Browsertests
**
*/

@media all
{

/* Formatierung der Seite */
body
{
   background: #fff;
   font-family: Arial, Helvetica, sans-serif;
}


/* Hier kann ein umlaufender Rand um die gesamte Webseite erzeugt werden */
#page{
   background: #fff;
   border-top-width: 0px;
   border-right-width: 0px;
   border-bottom-width: 0px;
   border-left-width: 0px;
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   
}


#page_margins {border: 0px solid #FFFFFF; min-width: 756px; max-width: 80em; margin:auto;}

/* Formatierung der Kopfbereiches */
#header
{ 
   color: #7D7D7D;
}

.form_waehrung
{
   width: 130px;
}



#nav { color:#fff; background:#888; padding: 1em; }

/* Formatierung der Fußzeile */

#footer {color:#888; background:#fff; font-size:12px; width: auto; padding: 20px 0 0 60px;;}



/* ######################################################################################################
** ### Formatierung der Inhaltsspalten ##################################################################
** ######################################################################################################
*/
#main {
   color: #000;
   background: #fff;
   margin: 0 auto;
   padding: 0 auto;
   position: relative;
   font-family: Arial, Helvetica, sans-serif;
   font-size: .72em;
   width: 989px;
}

*html #main
{
   width: 1024px;
}

/* linke Spalte */
#col1
{   
   background: url(../images/col1_repeater.gif) repeat-y !important;
   width: 225px;
   margin:0;
   padding:0;
}
   
#col1_content
{
   background: url(../images/col1_back.jpg) no-repeat !important;
   color: #000000;
   width: 225px;
   list-style-image: url(../images/pfeil_categories.gif);
   margin:0;
   padding:0;
}



#col1_content p
{
   padding: 21px 0 0 80px;
   
}

#col1_content p a
{
   color: #F9BFE8;
   text-decoration: none;
}

#col1_login
{
   width: 225px;
   height: 70px;
   padding-top: 100px;
}

#col1_login p
{
   color: #FFFFFF;
   padding: 0 0 0 60px;
   margin-top: -5px;
}

#col1_content form
{
   padding: 0 0 0 60px;
   margin-top: -12px;
}

#col1_content input
{
   height: 19px;
   padding: 0 0 0 0;
   margin-top: -3px;
}

#col1_content input.senden
{
   width: 39px;
   height: 19px;
}

#col1_images_bottom
{
   padding: 0 0 2px 45px;
}

/* Navigation linke Spalte */

#nav_links
{
   margin: -6px 0 0 0px;
   float: left;
   width: 225px;
   height: 338px;
}

#nav_links ul
{
   padding-left: 50px;
}


#nav_links li
   {
   border-bottom: 1px dotted #C7C7C7; width: 125px;
   }
   
#nav_links li a
   {
   color: #FFFFFF;
   text-decoration: none
   }
   
#nav_links li a:hover
{
   color: #B7B7B7;
}    

#nav_links h2
{
   color:#fff;;
   font-style:normal;
   font-weight:lighter;
   font-family:Arial, Helvetica, sans-serif;
   padding: 0 0 0 50px;
   margin:  5px 0  0 15px;
   text-decoration: none;
}

/* Rechte Spalte */
#col2
{   
   width: 200px;
}

#col2 h2
{
   font-family: Arial, Helvetica, sans-serif;
   color: #8D4BAB;
   font-size: 1.4em;
   font-weight: bold;
   padding: 7px 0 0 10px;
}

*html #col2 h2
{
   padding: 7px 0 0 20px;
}

#col2_content
{
   padding-top: 1.5em;
   margin-left: 10px;
   list-style-image: url(../images/pfeil.gif);
}

*html #col2_content
{
   padding-top: 1.5em;
   margin-left: -2px;
   list-style-image: url(../images/pfeil.gif);
}

#col2_content ul
{
   width: 100px;
   padding-top: 4px;
}

#col2_content ul li
{
   width: 100px;
   padding-top: 5px;
}

#col2 form
{
   width: 151px;
   height: 25px;
   padding: 2px 0 0 0;
   margin: 5px 0 0 -12px;
   border-bottom: #C675A9 2px solid;
   float: left;
}

*html #col2 form
{
   margin: 0 0 0 0;
}

.dropdown_waehrung
{
   width: 80px;
}

#col2_nav_header
{
   width: 150px;
}

#col2_nav_header ul
{
   width: 150px;
   margin: 10px 0 0 -10px;   
   list-style-image: url(../images/pfeil.gif);
   float: left;
}

*html #col2_nav_header ul
{
   margin: 10px 0 0 0;
}

#col2_nav_header ul li
{
   width: 130px;
   border-bottom: #C4C4C4 1px dotted;
}

#col2_nav_header a
{
   color: #999999;
   text-decoration: none;
}

#col2_nav_header a:hover
{
   color: #C4C4C4;
}

#col2_bestseller
{
   background: #DDD1E4;
   width: 151px;
   height: 35px;
   border-top: 1px solid #C9B6D5;
   margin: 198px 0 0 -12px;

}

*html #col2_bestseller
{
   margin: 22px 0 0 -12px;
}

#col2_nav_bestseller
{
   width: 134px;
   margin: 10px 0 0 -20px;
}

*html #col2_nav_bestseller
{
   width: 190px;
   margin: 0px 0 0 -8px;
}

#col2_nav_bestseller ul
{
   padding-bottom: 10px;
   
}

*html #col2_nav_bestseller ul
{
   width: 190px;
}

#col2_nav_bestseller ul li
{
   list-style-image: none;
   list-style-type: disc;
}

*html #col2_nav_bestseller ul
{
   width: 190px;
}

#col2_nav_bestseller a
{
   color: #D23C9D;
   text-decoration:underline;
}

#col2_bilder
{
   margin: 0 0 0 -12px;
}

#col2_clear_both
{
   clear: both;
}

/* Mittlere Spalte */
#col3
{
   background: url(../images/col3_header_3.jpg) no-repeat !important;
   width: 560px;
   height: 214px;
   margin-left: 225px;
   
   
}

#col3_content
{
   width: 558px;
   float: left;
}

#col3_content p
{
   color: #B7B7B7;
   padding: 18px 0 0 90px;
   
}

#col3_kategorie
{
   background: #DDD1E4;
   width: 558px;
   height: 35px;
   border-top: 1px solid #C9B6D5;
   margin: 178px 0 0 2px;
}

#col3_content_innen
{
   width: 558px;
   background: #FDE1E1;
   margin: 1px 0 0 2px;
}

#col3 h1
{
   font-family: Arial, Helvetica, sans-serif;
   color: #C775AA;
   font-size: 1.4em;
   font-weight: bold;
   padding: 7px 0 0 10px;
}

#col3 h3
{
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1em;
   color: #C775AA;
}

.col3_content_produktbilder
{
   width: 136px;
   height: 84px;
   border: #B7B7B7 1px solid;
   padding: 4px 0px 0px 4px;
   margin: 2px 4px 0 3px;
   float: left;
}

.col3_content_produktbeschreibung
{
   width: 188px;
   height: 84;
   color: #999999;
   border: #B7B7B7 1px solid;
   padding: 4px 0px 4px 4px;
   margin: 2px 2px 0 2px;
   float: left;
}

*html .col3_content_produktbeschreibung
{
   width: 180px;
}

.col3_content_produktbeschreibung a
{
   color: #C775AA;
   text-decoration: none;
}

.versandkosten
{
   font-size: 0.74em;
}




/* Wrapper für 3 spaltiges Layout */

#wrapper
{
   padding-left: 47px;
   width: 800px;;
   float: left;
}


/* ######################################################################################################
** ### Farbschema für Browsertests ######################################################################
** ######################################################################################################
*/
   #col1 {background: #FFFFFF; }
   #col1_content {background: #FFFFFF; }
   #col2 {background: #FFFFFF; }
   #col2_content {background: #FFFFFF; }
   #col3 {};
   #col3_content {}
   #main {background: #fff; }
   
}


vielen lieben Dank

sagt artig

Ragna
 
jeichi

Dabei seit: 01.08.2006
Ort: Austria
Alter: 44
Geschlecht: Männlich
Verfasst Fr 09.03.2007 15:55
Titel

Antworten mit Zitat Zum Seitenanfang
versuch einfach mal testweise den mittleren block um ein paar pixel schmäler auszugeben, dann geht er sicher nach oben! der ie macht da immer 'was er will' ... oder gib dem mittleren block zwischendurch einfach einen markanten hintergrund - rot zb - dann fällt dir wahrscheinlich der fehler leichter auf - ich tendiere dazu, dass der mittlere block ein wenig zu breit sein dürfte

jeichi
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Ragnaroek
Account gelöscht Threadersteller


Ort: -

Verfasst Fr 09.03.2007 16:02
Titel

Antworten mit Zitat Zum Seitenanfang
ne, daran liegt es nicht...dachte ich auch...habe allem was da war mal "Rahmen" gegeben. Und selbst wenn ich den Mittelteil um 90 px verkleinert hatte, ging er nich hoch...da muss irgendwo anders der Wurm drinn sein...
 
 
Ähnliche Themen Probleme bei der Darstellung mit css in Dreamwaver
[Safari] Probleme bei Darstellung
Probleme bei der Darstellung im Internet Explorer
CSS: Probleme bei der Darstellung beim IExplorer
Probleme bei Darstellung Mozilla Safari
probleme im internet explorer beim darstellung? css fehler?
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB