• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

In IE7 gut (aber eben dort falsch) und in FF/Opera falsch (oder zumindest anders)

Status
Für weitere Antworten geschlossen.
spacegaier

spacegaier

Neues Mitglied
Hallo zudsammen,

ich arbeite momentan an einem neuen Layout. Nun habe ich es mal im FF und in Opera getestet und siehe da: :evil::evil::evil:

So werden z.B. die NaviButtonGraphiken nicht mehr angezeigt!!!

Hier mal der Code:

Code: 
!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>© xxx 2007</div>
</div>
</body>
</html>

Und hier die Css-Datei:

Code: 
*
{
   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:

http://www.spacegaier.de/ie7.jpg
http://www.spacegaier.de/opera.jpg

Ich hoffe mir kann jemand sagen, woran das liegt.
 
Als ich deinen HTML-Code zuerst sah dachte ich "was willer denn nu". HTML 3.2 mit xhtml-Struktur? Abgesehen davon fehlt vor

Code: 
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 //EN">
ein Zeichen, vielleicht ist es ja nur beim Kopieren untergegangen.

Deine Buttons würde ich so formatieren:

Code: 
<div><a href="#">Beschriftung</a></div>

Und bei deinem CSS noch ergänzen, dass "a.menu_link" auch "display: block" ist - nur dann hat das Element Layout und wird vom IE angezeigt.
 
1. Das fehlende Zeichen war ein Kopierfehler...trotzdem danke für den Hinweis.

2. Wenn ich 4.0 nehme hat das zur Folge, dass die Buttons nicht voll mit dem Hintergrundbild ausgefüllt werden, sondern nur der Teil in dem die Beschriftung steht, warum weiß ich net? Vielleicht kann mir das ja jemand sagen. Und was meintest du mit der xhtml-Struktur?

3. Dank dem display: block; werden die Buttons jetzt in allen Browsern richtig dargestellt, allerdings wird bislang weiterhin nur im IE7 die rechte (noch leere) Spalte mit dem Hintegrundbild ausgefüllt. Wie kann ich erreichen, das sie ganz gefüllt wird?

4. Bei meinen Buttons hat die Beschriftung nochmal ein extra div um den Text auf den Buttons zu positionieren. Was spricht da dagegen?

Ich poste jetzt nochmal den ganzen Code, damit ihr die Änderungen seht.

Code: 
<!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">
              dsgdsfg
          </div>
      </div>
      <div id="footer">TullaAbi08Homepage<br>© xxx 2007</div>
</div>
</body>
</html>

Css-Datei:

Code: 
*
{
   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);
   display: block;
}
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;
   padding-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;
}

Danke schon mal für die Hinweise. Wenn jemand mir jetzt noch helfen kann die letzten Probleme auszumerzen, war echt glücklich!!!

EDIT: Wenn ich in der id wrapper height:100% setze dann wird die rechte Spalte auch im Opera ausgefüllt, im FF aber immer noch nicht :( .
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben