Hompage auch für IE

MEITIN2 · 05/28/2012, 13:33

Weiß wer wie ich diese Homepage auch für IE hinbekomm? In Firefox geht das alles aber im IE nicht ganz.

HTML Code:

<html>
<head>
  <title>Test</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body><table align="center" border="0" cellpadding="0" cellspacing="0" width="1000">
 <tr>
      <td colspan="2" id="topbar1" height="50"></td>
    </tr>
    <tr>
      <td colspan="2" id="topbar2" height="166"><div class="ueberschrift">Test</div></td>
    </tr>
    <tr>
      <td valign="top" id="navigation">
        <ul class="menue">


        <p>&nbsp;</p>



        <p>&nbsp;</p>


          <li><a href="ues.htm">Startseite</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
          <li><a href="#">Link 5</a></li>
        </ul>        
        <ul class="menue">
          <li><a href="#">Link 6</a></li>
          <li><a href="#">Link 7</a></li>
          <li><a href="#">Link 8</a></li>
          <li><a href="#">Link 9</a></li>
          <li><a href="#">Link 10</a></li>
	<br>
	<br>
	<br>
        </ul></td>

	
      <td id="mainbg" valign="top"><div id="haupttext">

<br>
	<br>
	<h1>Startseite</h1>
      <p></p>

        <h2></h2>

        <p></p>

        <h3></h3>

        <p></p>

        <h4></h4>

        <p></p>
	
        </div></td>
    </tr>
    <tr>
      <td colspan="2" id="unten" height="51">Test</td>
    </tr>
</table>
</body>
</html>

Und die .css

Code:

body {
  margin: 0px;
  padding: 0px;
  color: #FF9F00;
  background:url(bg.jpg) repeat-x;
  background-color: #FFFFFF;
  font-family: verdana,arial,helvetica,sans-serif;
  font-size: 10pt;
}

p {
  margin: 8px 4px 4px 4px;
}

table,li {
  color: #000000;
  background-color: #FFFFFF;
  font-family: verdana,arial,helvetica,sans-serif;
  font-size: 10pt;
}

td,tr {
  font-family: verdana,arial,helvetica,sans-serif;
  color: #000000;
  background-color: #FFFFFF;
}

#topbar1 {
  background:url(topbar1.jpg);
}

.headernavi {
  color: #ffffff;
  background-color: inherit;
  font-family: "Trebuchet MS",verdana,arial,helvetica,sans-serif;
  font-style: italic;
  padding: 5px 30px 0px 0px;
  font-size: 14pt;
  text-align: right;
  }

#topbar2 {
  background:url(topbar2.jpg);
}

.ueberschrift {
  text-align: right;
  padding-right: 30px;
  font-size: 30pt;
  color: #000000;
  background-color: inherit;
  font-family: "Segoe Print";
  font-style: ;
}

#navigation {
  background:url(navigation.jpg) repeat-y;
  width: 200px;
  }

#mainbg {
  background:url(mainbg.jpg);
  width: 800px;
}

#haupttext {
  font-family: verdana,arial,helvetica,sans-serif;
  padding: 5px 20px 5px 5px;
  text-align: justify;
  font-size: 11pt;

}

.naviueberschrift {
  color: #005A87;
  background-color: #ffffff;
  font-family: "Trebuchet MS",verdana,arial,helvetica,sans-serif;
  font-size: 14pt;
  font-weight: bold;
  font-style: italic;
  margin: 10px 0px 10px 20px;
  padding-left: 10px;
  text-align: left;
  line-height: 25px;
  border-bottom: 1px solid #375229;
}

.menue {
  list-style-type: none;
  margin: 0px;
  padding-left: 25px;
  padding-right: 0px;
  background-color: #ffffff;
  background:url(navigation.jpg);
  color: #000000;
  width: 130px;
}

.menue li a, menue li a:active, menue li a:visited{
  color: #000000;
  background-color: #004500;
  width: 130px;
  margin: 0px;
  padding: 2px;
  text-decoration: none;
  font-size: 12pt;
  font-family: Segoe Print;
  display: block;
  font-weight: bold;
  text-indent: 5px;
  letter-spacing: 0px;
  vertical-align: middle;

  border-width:3px;
  border-style:solid;
  border-color:black;

  margin-bottom: 2px;
}

.menue li a:hover {
  color: #ffffff;
  background-color: #999999;
  font-family: Segoe Print;
  text-decoration: none;
  margin: 0px;
  padding: 2px;
  font-weight: bold;
  text-indent: 5px;
  margin-bottom: 2px;
}

#unten {
  color: #000000;
  background-color: inherit;
  background:url(unten.jpg);
  font-family: "Century Gothic",sans-serif;
  font-size: 10pt;
  font-weight: bold;
  text-align: center;
  letter-spacing: 3px;
  padding-bottom: 2px;
}

h1 {
  background-color: inherit;
  color: #000000;
  font-family: "Segoe Print";
  font-size: 18pt;
  font-style: ;
  text-align: center;
  margin: 0px;
}

h2 {
  color: #7F7F7F;
  background-color: inherit;
  font-family: "Century Gothic",verdana,arial,helvetica,sans-serif;
  font-size: 14pt;
  text-align: left;
  padding-left: 16px;
  text-decoration: underline;
  letter-spacing: 2px;
}

h3 {
  color: #78AEFF;
  background-color: inherit;
  font-family: "Century Gothic",verdana,arial,helvetica,sans-serif;
  font-size: 14pt;
  font-style: italic;
  padding-left: 5px;
}

h4 {
  color: #ffffff;
  background-color: #78AEFF;
  font-family: "Century Gothic",verdana,arial,helvetica,sans-serif;
  font-size: 14pt;
  font-weight: bold;
  padding-left: 5px;
}

h5 {
  color: #000000;
  background-color: inherit;
  font-family: "Century Gothic",verdana,arial,helvetica,sans-serif;
  font-size: 12pt;
  font-weight: bold;
  padding-left: 5px;
}

a:link, a:visited, a:active {
  color: #005A87;
  background-color: inherit;
  text-decoration: none;
}

a:hover {
  color: #ffffff;
  background-color: #005A87;
  text-decoration: none;
}

NotEnoughForYou · 05/28/2012, 13:57

1. Der Doctype fehlt
2. Tabellenlayouts sind veraltet

es waere auch noch ganz sinnvoll zu sagen was im ie nicht stimmt

MEITIN2 · 05/28/2012, 14:04

Unter den Links ist ein weißer freiraum. Und die Buttons sind kleiner als bei FF sind auch unterschiedlich groß

Edit: den freiraum kann ich beheben aber dann is der platz der da sein sollte weg. der wird bei FF ja grün angezeigt aber IE wurde er weiß angezeigt. Wenn die <br> raus sind gehts aber wiegesagt der platz der da sein sollte is weg

Fratyr · 05/28/2012, 14:33

Der IE berechnet Padding falsch, deshalb der größenunterschied.

MEITIN2 · 05/28/2012, 14:46

Wie umgehe ich das Problem^^?