✔ IE6 li floaten nicht

D

Dimitrj

Grünschnabel
Hallo Leute

Mein Problem ist, dass bei der zweiten Liste (menu infonav) der IE6 (getestet im IETester) die lis nicht floatet, d.h. er stellt sie untereinander dar. Ich habe es probiert mit float, display inline, feste breite für ul und li, und bin nun mit meinem Latein am Ende.
Im Internet habe ich bisher nur die genannten Problemlösungen gefunden, das hat mir allerdings nicht weiter geholfen.
Validiert ist sowohl html und auch css.

Ich steht da jetzt schon lange an, hoffentlich weiss jemand Rat! :)

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/screen.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="container">

  <div class="container1">
  
  	<div class="containertop">
      <div class="logo">
      </div>
      <div class="ad">
      </div>
  	  <div class="news">
      </div>
  	</div>
    
    
    <div class="containernav">

		<ul class="menu">
       	  <li id="current" class="parent active item2">
            	<a href="#"><span>Angebot</span></a>
          </li>
          <li class="parent item3">
            	<a href="#"><span>Firma</span></a>
          </li>
          <li class="parent last">
            	<a href="#"><span>Kontakt</span></a>
          </li>
        </ul>
        
      	<ul class="menu infonav">
       		<li class="item30">
            	<a href="#"><span>Support</span></a>
            </li>
        	<li class="item30">
            	<a href="#"><span>AGB</span></a>
            </li>
        	<li class="item30">
            	<a href="#"><span>Sitemap</span></a>
            </li>
   	  	</ul>
	</div>
    
    
    <div class="containerinhalt">
    </div>
    
  </div>
  
  <div class="container2">
  </div>
  
</div>
</body>
</html>
HTML: 
@charset "utf-8";
body {
	background-image: url(../images/hintergrund.gif);
	margin: 0;
	padding: 0;
}
a:link, a:visited, a:hover, a:active {
	color: #3874b7;
	text-decoration: none;
}

/* Container und Hintergrundschatten */
.container {
	background-image: url(../images/schattenseiten.jpg);
	background-repeat: repeat-y;
	width: 990px;
	margin: 0 auto;
}
.container1 {
	width: 940px;
	margin: 0 25px;
}
.container2 {
	width: 990px;
	height: 30px;
	background-image: url(../images/schattenunten.jpg);
	background-repeat: no-repeat;
	background-position: left;
}
/* Topbereich */
.containertop {
	height: 273px;
	width: 940px;
	border-bottom: solid #FFF 1px;
}
.logo {
	height: 273px;
	width: 289px;
	background-image: url(../images/logo.jpg);
	float: left;
}
.ad {
	height: 273px;
	border-right: solid #FFF 1px;
	width: 389px;
	background-image: url(../images/ad.jpg);
	float: left;
}
.news {
	height: 273px;
	width: 261px;
	background-image: url(../images/news.jpg);
	float: left;
}
/* Navigationsbereich */
.containernav {
	height: 33px;
	border-bottom: solid #FFF 1px;
	padding-left: 350px;
	background-image: url(../images/nav.jpg);
	overflow: hidden;
}
.containernav ul.menu {
	height: 33px;
	float: left;
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.containernav ul.menu li {
	height: 33px;
	margin: 0;
	padding: 5px 15px 0 15px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #3874b7;
	float: left;
	border-left: solid #FFF 1px;
}
.containernav ul.menu li.last {
	border-right: solid #FFF 1px;
}

.containernav ul.infonav {
	float: right;
}
.containernav  ul.infonav  li {
	height: 16px;
	margin: 8px 0 0 0;
	font-size: 14px;
	border-right: solid #FFF 1px;
	padding: 0 15px 0 15px;
	border-left: none;
}

Danke im Voraus!

Dimitrj
 
Hi,

eines vorweg: im IE7 floaten die rechten Menüpunkte ebenso nicht, dafür aber im aktuellen IE8 ;)

Abhilfe schafft hier eine kleine Ergänzung des HTML-Codes:
Code: 
    <div class="containernav">
         <div class="left">
              <ul class="menu">
                 ...
              </ul>
         </div>

         <div class="right">
              <ul class="menu infonav">
                       ...
              </ul>
         </div>
    </div>
mit dieser CSS-Formatierung:
CSS: 
/* Navigationsbereich */
.containernav {
        height: 33px;
        border-bottom: solid #FFF 1px;
        padding-left: 200px;
        background-image: url(../images/nav.jpg);
        overflow: hidden;
}
.containernav .left {
        float:left;
}
.containernav .right {
        float:right;
}
.containernav .left ul, .containernav .right ul  {
        margin: 0;
        padding: 0;
        list-style-type: none;
}
.containernav .left li {
        height: 33px;
        margin: 0;
        padding: 5px 15px 0 15px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        color: #3874b7;
        float: left;
        border-left: solid #FFF 1px;
}
.containernav .left li.last {
        border-right: solid #FFF 1px;
}
.containernav  .right  li {
        height: 16px;
        margin: 8px 0 0 0;
        font-size: 14px;
        border-right: solid #FFF 1px;
        padding: 0 15px 0 15px;
        border-left: none;
        float: left;
}

mfg Maik
 
Vielen Dank für die prompte Lösung Maik!

Ich bin aber auch etwas auf dem Schlauch gestanden: Eigentlich ist es ja völlig unnötig, dass die erste Liste bereits links floatet.
Und weil ich für Joomla programmiere und keine Divs um die jeweiligen Menüs möchte/gebrauchen kann, hab ich jetzt nochmal die Linke Liste nicht gefloatet und siehe da - es geht.

Trotzdem Danke und schönen Tag noch!

Hier noch die Lösung:
HTML: 
    <div class="containernav">
    
      	<ul class="menu infonav">
       		<li class="item30">
            	<a href="#"><span>Support</span></a>
            </li>
        	<li class="item30">
            	<a href="#"><span>AGB</span></a>
            </li>
        	<li class="item30">
            	<a href="#"><span>Sitemap</span></a>
            </li>
   	  	</ul>

		<ul class="menu">
       	  <li id="current" class="parent active item2">
            	<a href="#"><span>Angebot</span></a>
          </li>
          <li class="parent item3">
            	<a href="#"><span>Firma</span></a>
          </li>
          <li class="parent last">
            	<a href="#"><span>Kontakt</span></a>
          </li>
        </ul>

	</div>

CSS: 
/* Navigationsbereich */
.containernav {
	height: 33px;
	border-bottom: solid #FFF 1px;
	padding-left: 350px;
	background-image: url(../images/nav.jpg);
	overflow: hidden;
}
.containernav ul.menu {
	height: 33px;
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.containernav ul.menu li {
	height: 33px;
	margin: 0;
	padding: 5px 15px 0 15px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #3874b7;
	float: left;
	border-left: solid #FFF 1px;
}
.containernav ul.menu li.last {
	border-right: solid #FFF 1px;
}

.containernav ul.infonav {
	float: right;
}
.containernav  ul.infonav  li {
	height: 16px;
	margin: 8px 0 0 0;
	font-size: 14px;
	border-right: solid #FFF 1px;
	padding: 0 15px 0 15px;
	border-left: none;
}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück