✔ Falsche Darstellung in Opera 9.0

[jdgf]

Hallo,
im Gegensatz zum IE und FF wird bei Opera 9.0 das Topmenü auf meiner Webseite außerhalb des rot markierten Rahmens angezeigt. Der HTML-Code erscheint mir richtig.

<table width="100%"  border="0" align="center" cellpadding="0" cellspacing="0">
   <tr>
         <td width="30%"  align="left"  valign="middle">
              <div >
                     <form  SUCHFELD /></form>
              </div>
         </td>
         <td  width="70%"  class="topnav" valign="bottom">
              <?php if($this->countModules('user3')) : ?>
                  <div>
                        <jdoc:include type="modules" name="user3" />
                  </div>
               <?php endif; ?>
          </td>
   </tr>
</table>

CSS:

td.topnav {
  margin : 0px;
  padding:  0px;
  background     : url(../images/bg_top.gif) repeat-x top left;
  height         : 42px;
  /*width          : 100%;*/
  border      : 5px solid red;
 }

Weiss jemand eine Lösung?
Danke für die Hilfe!
Gruss Dietmar

 

[Maik]

Hi,

das hängt dem Anschein nach auf irgendeine Weise mit dem Include-Prozeß des Menüs zusammen, denn in meiner lokalen Testseite, in der bei ihrem Aufruf der HTML-Code des Menüs nun im Seitenquelltext enthalten ist (alle eingebundenen CSS-,JS-,Grafik-Dateien sind von mir absolut referenziert), paßt auf einmal im Opera 9.6 alles:



So gesehen ist dein CSS-Code in Ordnung

Da es sich hier aber um ein Listenmenü mit floatenden li-Elementen handelt, könnte dir möglicherweise das "Clearing" der Floats weiterhelfen: http://positioniseverything.net/easyclearing.html.

mfg Maik

 

[Adrian_Broher]

http://joomla.kolping-hohenfels.de/joomla/templates/biz_blue_ii/css/template.css

#mainlevel-nav {
  font-size        : 11px;
  list-style       : none;
  padding          : 0;
  margin           : 0;
  margin-left      : 1px;
 
}

#mainlevel-nav li {
  float            : right;
  display          : block;
  list-style       : none;
  background-image : none;
  padding-left     : 2px;
  padding-right    : 2px;
  margin           : 0;
  width            : auto !important;
  font-size        : 11px;
  line-height      : 28px;
  white-space      : nowrap;
  border-left      : 1px solid #cccccc;

}

Die li Elemente sollten nicht nach rechts floaten. Sorge lieber dafuer, dass sie als inline Elemente dargestellt werden. um die ganze Konstruktion nach rechts zu schieben sollte stattdessen das ul element nach rechts floaten.

#mainlevel-nav {
  float            : right;
  font-size        : 11px;
  list-style       : none;
  padding          : 0;
  margin           : 0;
  margin-left      : 1px;
 
}

#mainlevel-nav li {
  display          : inline;
  list-style       : none;
  background-image : none;
  padding-left     : 2px;
  padding-right    : 2px;
  margin           : 0;
  width            : auto !important;
  font-size        : 11px;
  line-height      : 28px;
  white-space      : nowrap;
  border-left      : 1px solid #cccccc;

}

 

[jdgf]

Hallo,
vielen herzlichen Dank für eure Mühe und Lösung. Es paßt jetzt auch in Opera.
Gruss, Dietmar