• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS funktioniert im IE nicht so wie gewünscht

Index

Index

Neues Mitglied
Hallo Gemeinde

Ich hab meine (uralte) Website jetzt mal mit einem neuen Design versehen und ich bin auch ganz stolz darauf das es funktionier es sieht im Firefox,Safari,Opera,K-Meleon,Seamonkey überall gleich richtig aus nur natürlich der Internet-Explorer raffts nicht und zeigt mir irgend ein Käse bei ihm ist nämlich die Div ID="Header" komplett nach rechts verschoben.

Leider benutzen ja ziemlich viele Leute den IE und somit sollte ich es schaffen dass auch der das richtig anzeigt

mein HTML-Code sieht so aus:
PHP: 
<html>
<head>
<title>Mikescher.de</title>

<LINK href="mainstyle.css" rel="stylesheet" type="text/css">
<script src="mainscript.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body  text="#000000" onLoad="OnLoading()">
  <div id="header">
    <form name="form1" method="post" action="">
      <div id="ms_search_label">Mikescher-Suche:</div>
      <input type="text" name="textfield" id="ms_search_edit">
      <input type="submit" name="Submit" value="Find" id="ms_search_button">
    </form>
    
    <a href="<? print(GetRandomSite()); ?>" onMouseOut="MM_swapImgRestore()" 
    onMouseOver="MM_swapImage('randompage','','images/Header/random_over.gif', 1)">
    <img src="http://www.html.de/images/Header/random.gif" id="randompage" \> </a>
  </div>
  
  <div id="header_line">&nbsp;</div>

  <div id="navigation"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage( 'menubutton_home','','images/Navigation/menubar_home_over.png',1)">
  <img src="http://www.html.de/images/Navigation/menubar_home.png" name="menubutton_home" class="menubuttons" id="menubutton_home">  </a>  
  <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage( 'menubutton_downloads','','images/Navigation/menubar_downloads_over.png',1)">
  <img src="http://www.html.de/images/Navigation/menubar_downloads.png" name="menubutton_downloads" class="menubuttons"   id="menubutton_downloads">  </a>
  <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage( 'menubutton_witziges','','images/Navigation/menubar_witziges_over.png',1)">
  <img src="http://www.html.de/images/Navigation/menubar_witziges.png" name="menubutton_witziges" class="menubuttons"    id="menubutton_witziges">  </a>
  <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage( 'menubutton_schule','','images/Navigation/menubar_schule_over.png',1)">
  <img src="http://www.html.de/images/Navigation/menubar_schule.png" name="menubutton_schule" class="menubuttons"    id="menubutton_schule">  </a>
  <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage( 'menubutton_admin','','images/Navigation/menubar_admin_over.png',1)">
  <img src="http://www.html.de/images/Navigation/menubar_admin.png" name="menubutton_admin" class="menubuttons"    id="menubutton_admin">  </a>
  <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage( 'menubutton_linkliste','','images/Navigation/menubar_linkliste_over.png',1)">
  <img src="http://www.html.de/images/Navigation/menubar_linkliste.png" name="menubutton_linkliste" class="menubuttons" id="menubutton_linkliste">  </a>
  <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage( 'menubutton_impressum','','images/Navigation/menubar_impressum_over.png',1)">
  <img src="http://www.html.de/images/Navigation/menubar_impressum.png" name="menubutton_impressum" class="menubuttons"   id="menubutton_impressum">  </a></div>
 

    
<div id="navigation_line">
  <img id="counter" src="http://www.andyhoppe.com/software/images/cyberlog.gif"\></div>

<div id="maindiv" align="center" >
  <!------------------------------------MAIN--------------------------------------->  
  <table id="idx_info_tab"> 
<?php
$aftercode = "<!-- /CODE -->
</td>
<td rowspan=\"2\" class=\"idx_info_right_image\" >&nbsp;</td>
</tr>
<tr>
</tr>
<tr>
<td height=\"9\" class=\"idx_info_LU\" ></td>
<td colspan=\"2\" valign=\"top\" class=\"idx_info_footer_image\"></td>
<td class=\"idx_info_RU\" ></td>
</tr>
</table>
</td><tr> ";

$beforecode ="<tr ><td id=\"idx_info_td_first\" ></td><tr> 
<tr><td class=\"idx_info_td\" valign=\"top\"> 
<table width=\"100%\" height=\"100%\" class=\"idx_info_td_table\" cellspacing=\"0\"       cellpadding=\"0\">
<tr>
<td height=\"9\" width=\"9\" class=\"idx_info_LO\" ></td>
<td colspan=\"2\" valign=\"top\" class=\"idx_info_header_image\"></td>
<td width=\"9\" class=\"idx_info_RO\" ></td>
</tr>
<tr>
<td rowspan=\"2\" class=\"idx_info_left_image\">&nbsp;</td>
<td colspan=\"2\" rowspan=\"2\" valign=\"top\">
<!--  CODE -->";

$db = Logindb();

$sql="SELECT * FROM idx_info ORDER BY ID DESC LIMIT 4";
$res=mysql_query($sql, $db) or die(mysql_error());
while ( $row=mysql_fetch_object($res) )
    {    
      print($beforecode);
      print($row->CODE); 
      print($aftercode);
    }


  ?>
  </table>
  <!-----------------------------------/MAIN--------------------------------------->
</div>
</body>
</html>

und mein CSS-Layout so:

Code: 
* {
  margin: 0;
  padding: 0;
}


html,body {
 height: 100%;
 Overflow-X: hidden; 
}


body { 
  background-color: #17202F;
  Color : #FFF;
}

#header {
  position: absolute;
  background-image: url(images/Header/Header1.jpg);
  margin-left: 150px;
  height: 150px;
  width: 845px;
}

#headergif {
  position: absolute;
  top: 18px;
  left: 22px;
  width: 110px;
  height: 110px;
  border: 0px;
}

#header_line {
  margin-left: 995px;
  width: 100% - 845px;
  background-image: url(images/Header/Headerrechts.jpg);
  height: 150px;
}

#navigation {
  background-image: url(images/Navigation/frame_links.jpg);
  position: absolute;
  height: 483px;
  width: 150px;
  left: 0px;
  top: 0px;
}

#navigation_line {
    position: absolute;
    width: 150px;
    height: 316px;
    background-image: url(images/Navigation/navigationunten.jpg);
    left: 0px;
    top: 483px;
}

#maindiv {
  position: absolute;
  left: 150px;
  top: 150px;
  width: 846px;
  height: 807px;
  padding-left: 10px;
}

.menubuttons{
  position: absolute;
  width: 140px;
  height: 35px;
  border: 0px;
  left: 5px;

}
#menubutton_home {top: 175px;}
#menubutton_downloads {top: 215px;}
#menubutton_witziges {top: 255px;}
#menubutton_schule {top: 295px;}
#menubutton_admin {top: 335px;}
#menubutton_linkliste {top: 375px;}
#menubutton_impressum {top: 415px;}


#ms_search_edit {
  position: absolute;
  left: 597px;
  top: 87px;
  width: 115px;
  height: 20px;
  background-color: #17202F;
  color: #FFF;
}
#ms_search_button {
  position: absolute;
  left: 718px;
  top: 87px;
  width: 50px;
  height: 22px;
  background-color: #17202F;
  border-color: #000000;
  color: #FFFFFF;
}
#ms_search_label {
  position: absolute;
  left: 598px;
  top: 61px;
  width: 155px;
  height: 20px;
  border: 0px;
}
#randompage {
    position: absolute;
    left: 769px;
    top: 84px;
    width: 28px;
    height: 28px;
    border: 0px;
}
#counter  {
  position : absolute; 
  width: 100px;
  height: 60px;
  left: 31px;
  top: 100px;
}
#idx_info_tab  {
  width: 712px;
  left: 54px;
  height: 579px;
  top: 25px;  
}
#idx_info_td_first  {
  width: 712px;
  height: 50px;
}

.idx_info_td  {
  width: 712px;
  background-color: #334C6A;
}
.idx_info_td_puffer  {
  width: 712px;
  height: 20px;
}
.idx_info_header_image {
  left: 0px;
  top: 0px;
  background-image: url(images/idx_infotable_O.jpg);
  height: 9px;
}
.idx_info_footer_image {
  left: 0px;
  bottom: 100%;
  background-image: url(images/idx_infotable_U.jpg);
  height: 9px;
}
.idx_info_left_image {
  left: 0px;
  top: 0px;
  background-image: url(images/idx_infotable_L.jpg);
  width: 10px;
}
.idx_info_right_image {
  left: 0px;
  top: 0px;
  background-image: url(images/idx_infotable_R.jpg);
  width: 10px;
}
.idx_info_td_table {
  border: 0px;
  color: #000;
  padding: 0px;
  margin: 0px;
}
.idx_info_LO {
  background-image: url(images/idx_infotable_LO.jpg);
}
.idx_info_RO {
  background-image: url(images/idx_infotable_RO.jpg);
}
.idx_info_LU {
  background-image: url(images/idx_infotable_LU.jpg);
}
.idx_info_RU {
  background-image: url(images/idx_infotable_RU.jpg);
}

Ich wäre euch sehr dankbar wenn ihr mir vielleicht einen Tipp geben könntet :idea:

MfG Index
 
Zuletzt bearbeitet von einem Moderator:
Es fehlt ein qualifizierter Doctype,

sowas gibt es m.W. nicht:
Code: 
width: 100% - 845px;
(CSS kann noch nicht rechnen und schon gar nicht mit unterschiedlichen Einheiten),

Auf alle absoluten Positionierungen solltest du besser verzichten und dafür die Positionierung mit float und margin vornehmen.
 
prm schrieb:
sowas gibt es m.W. nicht:
Code: 
width: 100% - 845px;
(CSS kann noch nicht rechnen und schon gar nicht mit unterschiedlichen Einheiten),
Zum Vergrößern anklicken....

Aber es funktioniert (auser im IE) auserdem wie soll ich das sonst lösen ich will ja dass es bei 845px anfängt bis zum rechten Ende der Seite
 
Ich vermute, dass es wegen dem margin-left-Wert funktioniert.
Link zur kompletten Seite wäre hilfreich.
 
Schreib mal diesen Doctype in die allererste Quelltextzeile vor "<html>!:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

Danach lass die Seite mal validieren und bereinige etwaige Fehler.
 
Du könntest außerdem Dein Wissen über HTML etwas erweitern und Deinen Inhalt gemäß moderner, aktueller Arbeitsweisen auszeichnen, unter Beachtung der Trennung von Inhalt und Layout. Da ist noch einiges im Argen...
 
Danke prm das hab ich jetzt mal gemacht und auch mein HTML validiert... geholfen hat es leider nichts jedoch habe ich jetzt eine andere Möglichkeit gefunden ich frage über PHP ab mit welchem Browser man surft und passe die CSS Datei an :idea:.

MfG Index
 
Das ist nicht wirklich eine Lösung. Zumal nicht jeder Browser das ist, was er vorgibt zu sein, und dann hast Du den Salat wieder. Wieso hast Du die Seite gelöscht? So kann man Dir nicht zu Ende helfen. So ist das doch keine befriedigende Lösung.
 
Neuer Thread ?

Ich hätte noch eine Frage soll/muss/darf man hier für eine neue Frage einen neuen Thread aufmachen :?:

MfG Index
 
Zuletzt bearbeitet:
Index schrieb:
Ich hätte noch eine Frage soll/muss/darf man hier für eine neue Frage einen neuen Thread aufmachen :?:

MfG Mikescher
Zum Vergrößern anklicken....

Hallo Mike,

hier gibt es jede Menge Vorschriften - die kenne ich aber auch nicht...

Ich halte es für sinnvoll, für Fragen, die nichts mit dem bisherigen Thema zu tun
haben, einen neuen Thread aufzumachen und diesem einen neuen aussagekräftigen
Betreff zu geben, so dass jeder weiß, um was es geht.

Genauso halte ich es für sinnvoll, im alten Thread zu bleiben (oder auch einen uralten
auszugraben), wenn es um das gleiche Thema geht...

Grüße
Bernhard
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben