css fehler im ie, korrekt im ff

Status
Nicht offen für weitere Antworten.
Promaetheus

Promaetheus

Mitglied
Ich habe auf meiner Seite ein Menü, welches ich mit SPAN-Definitionen bearbeite. Ich weiss dass das nicht perfekt ist und noch viel vereinfacht werden könnte, jedoch bin ich leider kein Profi auf dem Gebiet.

Im Firefox wird alles korrekt dargestellt, im Internet Explorer leider nicht.

Mein CSS Code für die Navigation lautet wie folgt:
Code: 
/* nav style start */
a.navig {
  font-family: Arial, verdana, arial, sans-serif;
  font-size: 15px;
  color: #FFFFFF;
  font-weight: bold;
  text-decoration: none;
}

a.navig:hover {
  font-family: Arial, verdana, arial, sans-serif;
  font-size: 15px;
  color: #FF9900;
  font-weight: bold;
  text-decoration: none;
}

a.sub {
  font-size: 14px;
  margin-top: 0px;
  color: #FFFFFF;
}

a.sub:hover {
  font-size: 14px;
  color: #FF9900;
  text-decoration: none;
}

a.active {
  color: #FF9900;
}

span.navig {
  margin-top: 2px;
  line-height: 30px;
  padding-left: 30px;
  display: block;
  color: #FFFFFF;
  background: #333333;
  font-family: Arial, verdana, arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  background-image: url(images/site/icon_nav_inactive.gif);
  background-repeat: no-repeat;
  background-position: 0.9em 0.8em;
}

span.sub {
  padding-left: 48px;
  border-bottom: 0px solid #D7BB70;
  font-size: 11px;
  margin-top: 0px;
  color: #FFFFFF;
  background: #333333;
  background-image: url(images/site/icon_nav_inactive.gif);
  background-repeat: no-repeat;
  background-position: 2.7em 0.9em;
}



span.navig.active {
  color: #000000;
  text-decoration: none;
  background-image: url(images/site/icon_nav_active.gif);
  background-repeat: no-repeat;
  background-position: 0.9em 0.8em;
}

span.navig.sub.active {
  background-image: url(images/site/icon_nav_active.gif);
  background-repeat: no-repeat;
  background-position: 2.7em 0.9em;
}
/* nav style end */

hier seht ihr den Fehler auf der Seite: http://www.promadesign.com/tcms/cms/deutsch/cat_2/cId_3
Wie gesagt funktioniert es im Firefox, im Internet Explorer 6 und 7 jedoch leider nicht. Mir ist schleierhaft warum bei span.navig.sub.active (span class="navig sub active") auch der span.navig.sub (span class="navig sub") verändert wird

Ich wäre euch sehr dankbar wenn ihr mir hier weiterhelfen könntet.
 
Hi,

dir ist wohl nicht bewusst oder bekannt, dass du mit dieser "speziellen" Syntax die IEs gnadenlos in den "Quirksmode" schickst?

Code: 
<!--
   ################################################
   #                                              #
   #  TCMS - Tourismus Content Management System  #
   #      Wort und Bild schnell ins Internet      #
   #                                              #
   #      Programmierung: www.PromaDesign.com     #
   #      Marketing:      www.eTouristik.at       #
   #                                              #
   #            All rights reserved.              #
   #                                              #
   ################################################
-->
<!-- Version 1.2.003 -->
<html>
Und in diesem proprietären Darstellungsmodus haben sie beispielsweise in punkto CSS-Boxmodell-Interpretation überhaupt nichts mehr zu bieten, sondern verhalten sich, wie ihre Vorgängerversionen 5.x aus dem vergangenen Jahrhundert.

Sorge also erstmal dafür, dass sie das Dokument im standardkonformen Modus übergeben bekommen - Stichwort: Der »DOCTYPE-Switch« und seine Auswirkungen - dann sollte die Welt in ihnen gleich bedeutend besser aussehen.

mfg Maik
 
Sorry. Das wusste ich in der Tat nicht. Den DOC-TYPE hatte ich im übrigen nur vergessen. Nun funktioniert auch alles im Menü korrekt, nur wird mir das Hintergrundbild (rechts: 100110101) nicht mehr angezeigt, da durch den DOC-TYPE der IE die "height="100%" Attribute der Tabellenspalte nicht mehr "kennt"
 
Hi,

im standardkonformen Modus muß dann für das body- und ggfs. auch für das html-Element eine 100%-Höhe deklariert werden.

mfg Maik
 
Ich habe überall meine 100% Höhendeklarationen vermerkt:
Code: 
<table border="0" cellpadding="0" cellspacing="0" width="980" height="100%" align="center">
  <tr>
    <td width="100%" height="100%" valign="top">

Jedoch wird das "dezent" ignoriert. Witzigerweise nun auch vom FF?! 100% Höhen sind wohl immer noch ein schwieriges Kapitel. Sonderbarerweise hat das früher IE 6 > immer ganz problemlos funktioniert (Und tut es auch immer noch wenn man den DOC-TYPE weglässt).
 
Doch. Das habe ich. Auch der BODY Tag hat 100%. Ist über das CSS definiert:
Code: 
html {
  height: 100%;
}

body {
  font-family: Arial, Times New Roman, Times, serif, Geneva, Helvetica, sans-serif, Verdana;
  font-size: 12px;
  background: #F0F0F0;
  margin-top: 20px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  height: 100%;
}
. Auch hat JEDES Element die Höhe 100% wie du oben gesehen hast.

Ich verstehe deine Antwort jetzt gerade nicht wenn ich ehrlich bin?

EDIT: SORRY. HTML hatte ich übersehen. Nun ist die Seite aber wieder zu hoch. Muss ich da mit min-height arbeiten? Im FF passt es besser als im IE. Sollte ich eventuell auf <DIV>´s umsteigen? Dann ergibt sich aber doch dieselbe Problematik mit den 100% Höhen oder?
 
Zuletzt bearbeitet:
Solange du dem Grafikelement eine feste Höhe von 5px zuweist, wird sich daran im IE auch nichts ändern.

Stattdessen solltest du es als Hintergrundbild in der Zelle einsetzen, das vertikal wiederholt wird.

mfg Maik
 
Dieses Grafikelement was du ansprichst ist einfach ein Platzhalter für die BREITE, nicht jedoch für die Höhe. Es ist ein transparentes Bild. Der Hintergrund, welcher sich über die gesamte Höhe ziehen sollte ist das bridge.gif, welches auch als Hintergrund eingebaut ist:
Code: 
<td background="{IMAGEDIR}bridge.gif" height="100%"><img src="{IMAGEDIR}pixel_transp.gif" width="250" height="5"></td>
Wie gesagt hat das ohne die DOC-TYPE Spezifikation funktioniert.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück