1848er: li Abstände IE & float im Firefox

Beitrag lesen

SELF-Forum

li Abstände IE & float im Firefox

1848er
– Informationen zu den Bewertungsregeln

Hallo Community,

ich versuche momentan von Tabellen auf div/css umzusteigen und habe dabei 2 Probleme, die ich leider nicht mit Google & Forumsuche beheben kann.

Problem 1:

Ich habe ein Menü mit <li> aufgebaut und dieses mit css formatiert. Im Firefox, sowie in Opera erhalte ich auch das gewünschte Ergebnis. Der Internet Explorer zeigt mir jedoch Abstände zwischen den einzelnen Elementen an.

Jetzt könnte ich zwar eine zweite css-Datei anlegen für den IE und dort "margin" negativ setzen, jedoch wollte ich erst einmal hier fragen ob es noch eine bessere Lösung dazu gibt.

Problem 2:

Ich habe via "float: left;" den Text um das Menü fliessen lassen und "margin" dazu benutzt um einen Abstand zu setzen. Hier funktioniert das ganze in Opera & IE, im Firefox aber greift "margin" nicht und es wird nicht der komplette Text neben dem Menü angezeigt sondern nur die ersten Zeilen.

Der Link: click

Der CSS-Code:

  
body  
{  
  background-color: #FFFFCC;  
  color: #000;  
  font-size: 100.01%;  
  margin: 0;  
  padding: 0;  
  text-align: center;  
}  
  
* html div#content  
{  
  height: 1em;  /* IE Workaround 3-Pixel-Bug */  
  margin-bottom: 0;  
}  
  
div#page  
{  
  text-align: left;  
  background: #fff;  
  width: 702px;  
  margin: 0 auto;  
  padding: 0;  
}  
  
div#header  
{  
  text-align: center;  
}  
  
ul#nav  
{  
  float: left;  
  width: 162px;  
  margin: 0;  
  padding: 0 0 0 0.8em;  
}  
  
ul#nav li  
{  
  list-style-type: none;  
  margin: 0;  
  padding: 0;  
}  
  
ul#nav a  
{  
  display: block;  
  margin: 0;  
  padding: 0;  
}  
  
div#content  
{  
  width: 475px;  
  padding: 0 0 0 3em;  
  margin: 0;  
}

Der HTML-Code:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
  "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
  <head>  
  <link rel="stylesheet" type="text/css" href="fileadmin/css/style.css">  
  </head>  
  <body>  
    <div id="page">  
      <div id="header">  
        <img src="fileadmin/images/header.jpg" width="702" height="169">  
      </div>  
      <ul id="nav">  
         ###MENU###  
      </ul>  
      <div id="content">  
        ###INHALT###  
      </div>  
    </div>  
  </body>  
</html>

Es handelt sich eine HP in Typo3.
In ###MENU### wird per TypoScript das <li> um jeden Menüpunkt gelegt und in ###INHALT### wir der der Inhalt ausgegeben. Das nur zur Erklärung :)

Gruß
1848er

Beitrag melden
–
Informationen zu den Bewertungsregeln