spacegaier: Mittlere flexible Spalte und IE7 / FF / Opera-Problem

Beitrag lesen

SELF-Forum

Mittlere flexible Spalte und IE7 / FF / Opera-Problem

spacegaier
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich habe mir jetzt ein Lyout mit Css zusammen gebaut, welches fast fertig ist. Es gibt nur zwei Probleme:

1. Ih habe nach dem Header un Co. drei Spalten. Die beiden äußeren sind mit floats positioniert. Nun soll die mittlere Spalte automatisch den Raum dazwischen füllen. Wie kann ich das erreichen?

2. Im IE7 sieht das Layout genau so aus, wie es sein sollte. Im FF und in Opera aber nicht! Da fehlen z.B. die ganzen Button-JPGs und die linke Spaltengraphik.
Vermutlich ist hier mal wieder ein Bug im IE schuld.

Ich poste jetzt mal den ganzen Code, auch wenn es ein bissel viel ist, aber ich weiß halt echt nicht woran des liegt.

html-Datei:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 //EN">  
<html>  
<head>  
<title>test</title>  
<link rel="stylesheet" type="text/css" href="design_4.css">  
</head>  
<body>  
<div id="wrapper">  
  
    <div id="header"></div>  
     <div id="subnav">  
          <span style="float: left; margin-left:5px; margin-top:2px">Hier kommt die akt. Pos. hin:</span>  
          <span style="float:right; margin-right:5px; margin-top:2px;">Login / Logout</span>  
     </div>  
  
     <div id="contentfloatholder">  
  
          <div id="left">  
                   <div id="menu">  
                    <div class="menu_button"><a class="menu_link" href="#"><div class="link_font">HOME</div></a></div>  
                    <div class="menu_button"><a class="menu_link" href="#"><div class="link_font">News</div></a></div>  
                    <div class="menu_button"><a class="menu_link" href="#"><div class="link_font">Stufe</div></a></div>  
                    <div class="menu_button"><a class="menu_link" href="#"><div class="link_font">Gremien</div></a></div>  
                    <div class="menu_button"><a class="menu_link" href="#"><div class="link_font">Downloads</div></a></div>  
                    <div class="menu_button"><a class="menu_link" href="#"><div class="link_font">Kontakt</div></a></div>  
                   </div>  
  
               <div id="status_screen">  
                    Die Seite ist im Alpha-Stadium!  
               </div>  
          </div>  
  
          <div id="centerwrap">  
               test  
          </div>  
  
          <div id="right">  
  
          </div>  
      </div>  
  
      <div id="footer">TullaAbi08Homepage<br>© spacegaier 2007</div>  
</div>  
</body>  
</html>

CSS-Datei:

*  
{  
   margin: 0px;  
   padding: 0px;  
   border: 0px;  
   font-family: Tahoma, 14pt;  
}  
  
body  
{  
   background: #fff;  
   min-width: 700px;  
   font-family: Tahoma;  
}  
  
#wrapper  
{  
   width: 90%;  
   margin: 0 -5% 0 5%;  
   border: 1px solid #000;  
}  
  
#header, #subnav, #footer  
{  
   clear: both;  
   width: 100%;  
}  
  
#header  
{  
   background-image: url(header_4.jpg);  
   height: 70px;  
}  
  
#subnav  
{  
   background-image: url(subnav_4.jpg);  
   color: #377593;  
   height: 25px;  
   border-bottom: 1px solid #000;  
   border-top: 1px solid #000;  
}  
  
#contentfloatholder  
{  
   background: #ffffff;  
   width: 100%;  
   height:100%;  
}  
  
#centerwrap  
{  
   float:left;  
   height: 100%;  
   background-image: url(middle_4.jpg);  
  
}  
  
#right  
{  
  float: right;  
  width: 180px;  
 background-image: url(right_column_4.jpg);  
 height: 100%;  
 border-left: 1px solid #000;  
}  
  
#left  
{  
  width: 180px;  
  float:left;  
  background-image: url(left_column_4.jpg);  
  height: 100%;  
  border-right: 1px solid #000;  
}  
  
#menu  
{  
   padding-top: 25px;  
}  
  
a  
{  
   text-decoration: none;  
}  
  
.menu_button  
{  
   height: 30px;  
   width: 100%;  
   border-top: 1px solid #fff;  
   border-bottom: 1px solid #C0D1D3;  
   margin-bottom: 3px;  
}  
  
a.menu_link  
{  
   width: 100%;  
   height: 100%;  
   color: #000;  
   background-image: url(link_4.jpg);  
}  
  
a.menu_link:hover  
{  
   width: 100%;  
   height: 100%;  
   color: #000;  
   font-weight: bold;  
   background-image: url(link_4_hover.jpg);  
}  
  
a.menu_link:active  
{  
  font-weight: bold;  
  background-image: url(link_4_active.jpg);  
}  
  
  
div.link_font  
{  
   padding-left: 35px;  
   margin-top: 5px;  
}  
  
#status_screen  
{  
   color: #000;  
   font-size: 10pt;  
   font-style: italic;  
   margin-left: 15px;  
   margin-right: 15px;  
   margin-top: 35px;  
   text-align: center;  
   color: #fff;  
}  
  
#footer  
{  
   background-image: url(subnav_4.jpg);  
   color: #000;  
   height: 35px;  
   font-size: 8pt;  
   text-align: center;  
   padding-top: 5px;  
   border-top: 1px solid #000;  
}

Hier auch noch zwei Screenshots:

www.spacegaier.de/ie7.jpg
www.spacegaier.de/opera.jpg
Ich hoffe des sind alle nötigen Infos und dass sich jemand findet der mir sagen kann wo hier was schief läuft.

Grüße - spacegaier

Beitrag melden
–
Informationen zu den Bewertungsregeln