Float Problem IE 6

snafu89 · 22 Juni 2009

Hi, also ich bin langsam echt am verzweifeln.

Mein Template sollte, ganz simpel, aus einer header box, einem Menü und einem Inhaltsbereich bestehen. Diese Boxen sind auch vorhanden, allerdings wird der Inhaltsbereich nicht direkt neben dem Menü gefloatet, sondern darunter.

HTML Code

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>
  <link href="style.css" rel="stylesheet" type="text/css">
        <title>Dr. Borrmann</title>
        <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
  </head>
<body>
      <div id="wrapAll">
        <div id="wrapContent">
 

             
                   <div id="container">  
                               <div id="top"></div>
             <!-- div id TOP-->
                      <div id="header">
                       
                                <div class="logo"> 
                                  
                                        
                                </div><!-- class logo -->  
                      </div> <!-- div header -->
                   
                      <div id="bottom"></div>
                      <!-- div id BOTTOM -->
                      
            
            
                                
        
                     <div id="mainNav">                                                                      
                         <div id="menutop"></div>
                            <div id="menuhead">Hauptmenü</div><!-- div class menuhead -->
                                 <div class="mainNav">                    
                                        <div id="navigation">
                                            <!--<img src="http://www.html.de/images/button.png" class="menu_class" alt="" />-->
                                            <ul>
                                                <li><img src="http://www.html.de/images/arrow.gif" alt=""><a href="#">Be #1</a></li>
                                                <li><img src="http://www.html.de/images/arrow.gif" alt=""><a href="#">Me #2</a></li>
                                                <li><img src="http://www.html.de/images/arrow.gif" alt=""><a href="#">St #2</a></li>
                                            </ul>
                                        </div>
                                        
                                 </div><!-- div class mainNav -->
                                 <div id="bottom_slider"></div>  
                     </div><!-- div id    mainNav -->
                     <div id="menubottom"></div>
                           
                  
    
                           
            <div id="content"> 
                  <div id="contenttop"></div><!-- div id CONTENTTOP --> 
                                           
                        <div class="inner">
        
               
                               <div id="box1"></div><!-- div id BOX1 -->
                               
                               <div id="box2"></div><!-- div id BOX2 -->
                               
                               <div id="box3"></div><!-- div id BOX3 -->
                        </div>               
                         
                <div class="end_float"></div>    
                
                <div id="icon">
                    <div class="inner">
                  
                          <a class="icon" href="#"><img src="http://www.html.de/images/icon1.gif" alt=""></a>
                        <a class="icon" href="#"><img src="http://www.html.de/images/icon2.gif" alt=""></a>
                        <a class="icon" href="#"><img src="http://www.html.de/images/icon3.gif" alt=""></a>
                      </div>
      </div><!-- div id ICONS -->
        <div id="contentbottom"></div>
            </div><!-- div id content -->
            


      
      <div class="end_float"></div>
   </div><!-- div wrapContent --> 
        
        
      </div><!-- wrapAll -->

</body>
</html>

_________________________________________
CSS

Code:

* {
    margin: 0;
    padding: 0;
  font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
  }


  
body  {
        background-color:#f1f1f1;
        text-align: center;
      color: #5f5f5f;
      
      }

#wrapAll {
           margin: 20px auto 0;
           width: 880px;
           text-align: left;
             position: relative;
              margin-bottom: 15px;
         }
         
#container {
            height:99px;
            width:880px;
            
            }
            


#header {
        background: url(images/container.gif) center repeat-y;  
        width: 883px;
        height: 71px;
        visibility:overflow;
        
        }
        
#header .logo {
              
             margin-left: 30px;
             background: url(images/logo.gif) no-repeat ;
             height: 63px;
             
             }        

#content .inner {
                margin: 13px 47px 13px 47px;
                
                }
             
             
#mainNav  { 
           background: url(images/menu_container.gif) repeat-y;  
        
           width:204px;
           float: left; 
           margin-top:6px;
           }
           
#button {
 
    height: 32px;
    text-align:left;
    width:194px;
  background:#ffffff;
}

ul, li {

    margin:0; 
    padding:0; 
    list-style:none;
}
#menuhead { letter-spacing: 0.1em;
                     height: 27px;
                     width:175px ;
                     color:#e98a48;
                     
                     list-style: none;
                   
                     margin-left:6px;
                     padding-left:48px;
                     

                     
                   }
.menu_class {

position:absolute;
     width:204px;
  background: url(images/button.png); }

.the_menu {
    display:none;
    width:204px;
    
}

.the_menu li img{border:none;
    background-color: #ffffff;
  margin-left:20px;
  
  
}

.the_menu li a {
  
    color:#000000; 
    text-decoration:none; 
    padding:10px; 
    display:block;
  background: url(images/menu_container.gif) repeat-y;  
  
}

.the_menu li a:hover {
    
    font-weight:bold;
    color: #ec8a4b;
   background: url(images/menu_container_visited.gif) repeat-y;  
}
                }
          
a.mainNav:link { 
               color:#727272;
               }
a.mainNav:visited {display:block;
                    
                   background: url (images/menu_container_visited.gif);
                  }

#content {margin-top: 5px;
          background: url(images/content_container.gif) repeat-y ;
          width: 669px;
          float: right;
          display:inline;
         }

          .end_float {clear: both; font-size: 1px; height: 0px; }

#icon     {
            height: 30px;
            width: 208px;
            position: absolute;
            left: 0px;
            bottom: 15px;
          }
#icon .inner  {
    margin-left: 50px;
    height: auto;
    }


a.icon .inner  {
    margin-left: 50px;
    height: auto;

    }
    
#icon img     {
  border: none;
}


#box1 { background-color:white;
        
      }
      
#box2 { background-color:white;
        
        float:left;
        width:49%;
      }
#box3 { background-color:white;
        
        width:50%;
        float:right;
      }
      
  
  



#top {
      background:url(images/bg_top.gif) no-repeat;
      height:14px;
            width:883px; 
      }

#bottom {
        background:url(images/bg_bottom.gif) no-repeat ;
        clear:both;
        
        height:14px;
        width:883px; 
        } 

#menutop {
          background: url(images/menu_top.gif) no-repeat; 
          width: 204px;
          height: 13px;
          visibility:overflow;
          }
        


#menubottom   {
              background:url(images/menu_bottom.gif) no-repeat;
              clear:both;
              visibility:overflow;
              height:13px;
              width:204px; 
              } 
              
              
#menucontainer {background:url (images/menu_container.gif)transparent repeat-y;
                }
                
                
#contenttop {
          background: url(images/content_top.gif) no-repeat; 
          width: 676px;
          height: 14px;
          visibility:overflow;
          }
        


#contentbottom   {
              
              background:url(images/content_bottom.gif) no-repeat;
              visibility:overflow;
              height:14px;
              width:676px; 
              } 
              
#bottom_slider {background: url(images/menu_bottom.gif);}

h2 { font-weight:normal;color:#ff7f00;}
p { font-weight:normal;color:#727272;}

_________________________________________________

Mich stört wirklich nur das mit dem Float - solltet ihr also andere Fehler entdecken, schwamm drüber.

Grenzenlose Wertschätzung demgegenüber der mir helfen kann - oder es zumindest versucht - wird garantiert...

mfg adrian

Efchen · 23 Juni 2009

Ist doch klar, Du hebst das float ja auch vor dem Content wieder auf.

mainnav floatet, menubottom hebt das float mit clear wieder auf, erst dann kommt bei Dir der Content.

Aber ich kann mir nicht verkneifen zu fragen, wie Du für so ein einfaches Layout, so viele <div>s brauchst, und wie Du da selber noch durchsteigen kannst bei so einem Code.
Ich würd ja empfehlen, erstmal ein HTML-Studium zu machen, Semantik zu lernen und dann mit dem Inhalt anzufangen, dann mit der Auszeichnung in HTML und erst dann mit CSS. Ist einfacher.

Float Problem IE 6

snafu89

Neues Mitglied

Efchen

Guest

Neueste Beiträge