CSS-Probleme

[tigerstyle]

Hi Leute,

hab ein paar Probleme und ich hoffe Ihr könnt mir dabei helfen

klick mich

1. Die Mozilla-Browser zeigen die Page ganz normal an aber der IE plaziert die DIV Elemente total komisch. Woran liegt das? Ich dachte eigl. der Vorteil von CSS ist, dass es in allen Browsern gleich aussieht.

2. Das Menü in der mitte ist eine UL Liste, kann man die List Elemente irgendwie mit CSS dynamisch dem Platz (vertikal) anpassen. Unten ist ja noch eine Lücke.

Hier ist mal der Code:

  <div id="outer" style="height:300px">
    <div id="graphic">
      <img src="layout/plan.gif" width="285"></img>
    </div>
    <div id="logo">
      <img src="layout/logo_190.gif">
    </div>
    <ul id="mainMenu">
      <li><a href="#">klsdhg</a></li>
      <li><a href="#">klsdhg</a></li>
      <li><a href="#">klsdhg</a></li>
      <li><a href="#">klsdhg</a></li>
      <li><a href="#">klsdhg</a></li>
      <li><a href="#">klsdhg</a></li>
      <li><a href="#">klsdhg</a></li>
    </ul>
    <div id="content" style="height:300px">
    <a href="#">klsdhg</a></div>
  </div>

Edit: hier hatte ich zweimal den gleich code drin.

#outer 
{
 background-color: #ebebd2;
 border:1px solid #000000;
 height: 300px;
 padding: 10px;
}

#graphic 
{
 position: fixed;
 width: 300px;
 height: 300px; 
 border:1px solid #aaaaaa;
}

div#logo 
{ 
  position: fixed;
  margin-left: 304px;
  width: 190px; 
  height: 75px; 
  border: 1px solid #aaaaaa;
  text-align: center;
  vertical-align: middle;
  font-family: Arial Black, Arial;
  background-color: #529973; 
  color: #EBEBD2;
  font-weight: bold;
}

ul#mainMenu
{
  position: fixed;
  margin-left: 304px;
  margin-top: 77px;
  padding: 0px;
  width: 190px; 
  height: 223px;
  list-style-type: none;
  font-family: Arial, Helvetica, sans-serif;
}

div#content 
{ 
  position: relative;
  margin-top: 0px;
  margin-right: 0px; 
  min-height: 300px; 
  margin-left: 498px;
  border: 1px solid #aaaaaa;
}

ul#mainMenu a
{
	display: block;
	padding: 3px;
	margin: 2px 0px;
	width: 184px;
	height: auto;
	border: 1px solid #aaaaaa;
	color: #c2cca9;
	text-decoration: none;
}

ul#mainMenu a:hover
{
  background-color: #c2cca9;
  color: #ffffff;
}

 

[dms]

Hab mir Deinen Code jetzt nicht angeschaut. Wenn's im IE Probleme mit der Positionierung gibt, liegts wahrscheinlich am unterschiedlichen Box-Modell.
http://de.selfhtml.org/css/formate/box_modell.htm#box_model_bug

 

[JohnP]

... IDs sind einmalig, d.h. dürfen nur einmal vorkommen. Also mehrere IDs mit dem selben Namen geht nicht - verwende stattdessen "class".

 

[tigerstyle]

ja ist klar, hatte aus versehen, zweimal den gleichen code eingefügt.