• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

IE 7 Probleme mit 2 UL- Navis - XHTML 1.1 strict

A

Andreas Zech

New member
Hallo Zusammen,

irgendwie fehlen mir die Kenntnisse über den Bugs von IE, zumindest konnte ich diese nicht finden im Buch CSS-Praxis.

Zwei UL Menüs, Haupt-nav und Sub-nav, (DIE LINKE. FRECHEN: Aktuell) entsteht eine sog. Leerzeile im IE 7, die ich nicht wegbekomme, ausser ich im mit zusätzlich

#sub_nav {
position: relative;
top: -30px;
}


Das kann es aber auch nicht sein. Gibt es denn eine Lösung ohne JavaScript ?



http://dielinke-frechen.de/static/standard.css
PHP: 
/* Nullung der Default-Margins */

* { margin: 0; padding: 0; }


/* Globale body - Grundeinstellungen */

body {
  color: #000000;
  background-color: #ECF0F1;
  background-image: url(img/bg_dielinke.gif);
  background-repeat: repeat-x;
  font-family: verdana, arial, helvetica, sans-serif; 
  font-size: 100.01%;
  text-align: left;
  min-width: 41em;
}

img {
  border-style: none;
}

#content {
  background-color: #FFFFFF;
  background-image: url(img/frechen_panorama_455x150.gif);
  background-repeat: no-repeat;
  width: 890px;
  margin-left: auto;
  margin-right: auto;
  padding: 1px 32px 64px 32px; 
}  

#service_nav {
  background-color: #F2F4F6;
  font-size: 11px;
  float: left;
}

#service_nav a {
	color: #999999;
	background-color: #F2F4F6;
	text-decoration: none;
  padding:5px 7px 5px 7px;
	line-height:25px;
	border-right:1px solid #FFFFFF;
	border-bottom:3px solid #FFFFFF;
}
	
#service_nav a:hover {
	color: #000000;
	border-bottom:3px solid #DF0404;
}

#logo {
  margin-top: 20px;
  text-align: right;
}



/* TOP-Navigation */

#haupt_nav {
  margin: 1.5em 0.0em 0.0em 0.0em;
  padding: 0;
}

ul#haupt_navigation {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul#haupt_navigation li {  
  float: left;
  background-color: #CC0000;
  margin-right: 2px;
}

ul#haupt_navigation li.hauptnav_current {
  background-color: #FFFFFF;
}

ul#haupt_navigation li a {
  display: block;
  color: #FFFFFF;
  font-size: 0.75em;
  font-weight: bold;
  text-decoration: none; 
  padding: 0.5em 1.0em 0.5em 1.0em;
}

ul#haupt_navigation li a:hover {
  background-color: #868686;
}

ul#haupt_navigation li.hauptnav_current a {
  color: #DF0404;
  background-color: #FFFFFF;
  border-top: 1px solid #CC0000;
  border-left: 1px solid #CC0000;
  border-right: 1px solid #CC0000;
}

#sub_nav {
  clear: both;
  background-color:#F2F4F6;
  <!--[if IE]>
    position: relative;
    top: -30px;
    left: 0px;
  <![endif]-->
}

ul#sub_navigation {
  list-style-image: url(img/bg_subnavi_pfeil.gif);
  list-style-position: inside;
  float: left;
}

ul#sub_navigation li {
  float: left;
  background-color: #F2F4F6;
  border-bottom: 1px dashed #ECF0E1;
}

ul#sub_navigation li.subnav_current {
  list-style-image: url(img/bg_subnavi_pfeil_aus.gif);
  list-style-position: inside;
}

ul#sub_navigation li a {
  color: #00314A;
  font-size: 0.7em;
  padding: 0.5em 1.0em 0.5em 1.0em;
  text-decoration: none;
}

ul#sub_navigation li a:hover {
  font-weight: bold;
}

ul#sub_navigation li.subnav_current a:hover {
}

ul#sub_navigation li.subnav_current a {
  color: #DF0404;
  font-weight: bold;
  padding: 0.5em 1.0em 0.5em 1.0em;
}



<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3c.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml" xml:lang="de">
  <head>
    <title>DIE LINKE. FRECHEN: Aktuell</title>    
    <meta http-quiv="content-type" content="application/xhtml+xml; charset=UTF-8"/>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <link rel="stylesheet" href="standard.css" type="text/css"/>
    <link rel="shortcut icon" href="favicon.ico" />
  </head>
  <body>
    <div id="content">
      <div id="service_nav">
        <a href="service/kontakt/" tabindex="13">Kontakt</a><a href="service/sitemap/" tabindex="14">Sitemap</a><a href="service/impressum/" tabindex="15">Impressum</a>
      </div>
      <div id="logo">
        <img src="img/frechen_panorama_225x75.gif" width="225px" height="75px" alt="Frechen Panorama"/>
        <img src="img/die_linke_frechen.gif" width="235px" height="75px" alt="DIE LINKE. Frechen"/>
      </div>
      <div id="haupt_nav">
        <ul id="haupt_navigation">
          <li class="hauptnav_current"><a href="" tabindex="1" title="DIE LINKE. Frechen">DIE LINKE. FRECHEN</a></li>
          <li><a href="" tabindex="2">POLITIK</li>
          <li><a href="" tabindex="3">PARTEI</li>
          <li><a href="" tabindex="4">PRESSE</li>
          <li><a href="" tabindex="5">MITGLIEDSCHAFT</li>
          <li><a href="" tabindex="6">SERVICE</li>
        </ul>
      </div>
      <div id="sub_nav">
        <ul id="sub_navigation">
          <li class="subnav_current"><a href="" tabindex="7">AKTUELL</a></li>
          <li id="pfeil"><a href="" tabindex="8">NACHRICHTEN</a></li>
          <li><a href="" tabindex="9">TERMINE</a></li>
          <li><a href="" tabindex="10">VORSTAND</a></li>
          <li><a href="" tabindex="11">[solid] JUGENDVERBAND</a></li>
          <li><a href="" tabindex="12">ARBEITSGEMEINSCHAFTEN</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
Andreas Zech schrieb:
Zwei UL Menüs, Haupt-nav und Sub-nav, (DIE LINKE. FRECHEN: Aktuell) entsteht eine sog. Leerzeile im IE 7, die ich nicht wegbekomme, ausser ich im mit zusätzlich

#sub_nav {
position: relative;
top: -30px;
}

Das kann es aber auch nicht sein. Gibt es denn eine Lösung ohne JavaScript ?
Zum Vergrößern anklicken....

1. Bitte benutze die Codetags über dem Eingabefeld für Code.
2. Das ist kein JavaScript, das ist CSS.
_________________________________________
Edit:
Du weiß schon, dass Du mit dem XML-Prolog den Browser in den Quirksmode versetzt?

Code: 
<!--[if IE]>
position: relative;
top: -30px;
left: 0px;
<![endif]-->
Das sind Conditional Comments, die nicht ins CSS, sondern üblicherweise in den Head gehören.

Aber hier reicht es, wenn Du hier jeweils änderst:
alt:
Code: 
#haupt_nav {
margin: 1.5em 0.0em 0.0em 0.0em;
padding: 0;
}

neu:
Code: 
#haupt_nav {
margin-right: 2px;
padding: 0;
}

alt:
Code: 
ul#haupt_navigation li {
float: left;
background-color: #CC0000;
margin-right: 2px;
}

neu:
Code: 
ul#haupt_navigation li {
float: left;
background-color: #CC0000;
margin: 1.5em 2px 0.0em 0.0em;
}
 
Zuletzt bearbeitet:
Hallo Anna,

Du bist spitze !!!

Da ich ein Lernender bin, ist ne Lösung toll, mir fehlt noch ein bischen Text für die genaue Erklärung.

Mit dem Quirks-Modus hast Du recht, aber ich möchte gerne zukunftsorientierten Quellcode schreiben und der sollte schon mal XML sein. Only strict, deshalb griff ich dann gleich zu 1.1.

Dann noch eine Frage: Aus welchem Buch oder Quelle hast Du Dein Wissen. Jetzt bin ich auch noch unverschämt und möchte dies anzapfen.

Ganz lieben Gruss für Deine schnelle Hilfe

Andy
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben