probleme beim darstellen mit IE6 von MudGuard, 07.06.2007 09:15

probleme beim darstellen mit IE6

conrad 04.06.2007 18:44

hi,

ich habe folgendes css und folgende html.

#######
style.css:

body {
  margin:0;
  border:0;
  padding:0;
  height:100%;
  max-height:100%;
  background:#E3EFFF;
  font-family: verdana;
  font-size: 12px;
  color: #848484;
  font-family:arial, verdana, sans-serif;
  /*font-size:76%;*/
  overflow: hidden;
  scrollbar-base-color: white;
  scrollbar-3d-light-color:white;
  scrollbar-arrow-color:000000;
  scrollbar-darkshadow-color:white;
  scrollbar-face-color:#BEDAFE;
  scrollbar-highlight-color:#BEDAFE;
  scrollbar-shadow-color:#BEDAFE;
  scrollbar-track-color:#DEDEDF;

}

/*DESIGN 2*/
.design2 { /* im BODY tag eingebunden */
  background-image:url(../images/bg_gree_blue.jpg); background-repeat:no-repeat; background-position:center center;
  background-attachment:fixed;
  CURSOR: url('aero_arrow.cur')
}

#header {
  position:absolute;
  top:0;
  left:0;
  width:99.9%;
  height:66px;
  overflow:hidden;
  background:#BFDBFF;
  color:#fff;
  border-right: 5px solid #6593CF;
  }

#zwischenheader {
  position:absolute;
  top:66px;
  left:0;
  width:99.9%;
  height:15px;
  overflow:hidden;
  background:#BFDBFF;
  border-right: 3px solid #6593CF;
  background-image: url(../images/header_notselect.gif);
  color:#DFDFDF;
  }

#left {
  font-family: verdana;
  font-size: 12px;
  color: #4AA0E0;
  position:fixed;
  top:80px;
  left:0;
  width: 200px;
  bottom:0px; //von untem (zum footer = height:50px;)
  right:0;
  overflow:auto;
  background:#BEDAFE;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid #6593CF;
  position: expression("absolute");
  /*top: expression(document.body.scrollTop - this.offsetHeight + this.offsetHeight);  */
  }

#left[id] {
position: fixed;
}

#contents {
  font-family: verdana;
  font-size: 12px;
  color: #4AA0E0;
  position:fixed;
  top:80px;
  left:200px;
  bottom:0px; //von untem (zum footer = height:50px;)
  right:0;
  overflow:auto;
  background:#E3EFFF;
  border: 1px solid #6593CF;
  /*border-left: 2px solid #6593CF;*/
  margin-left: 3px;
  margin-top: 3px;
  margin-bottom: 0;
  position: expression("absolute");
}

#contents[id] {
position: fixed;
}

/* for internet explorer */

* html body {
padding:80px 0 0px 0;
}

* html #contents {
  height:100%;
  width:100%;
  }

/* header start */
a.zwischenheader:link, a.zwischenheader:visited, a.zwischenheader:hover, a.zwischenheader:active {
font: 10px Verdana;
color: #6593CF;
list-style-type: none;
CURSOR: url('../images/aero_link.cur');
background: url(../images/header_notselect.gif);
text-decoration: none;
width: 100%;
height: 15px;
display:block;
}

a.zwischenheader {
CURSOR: url('../images/aero_link.cur');
text-decoration: none;
width: 100%;
height: 15px;
display:block;

}

a.zwischenheader:hover {
CURSOR: url('../images/aero_link.cur');
background: url(../images/header_hover.gif);
text-decoration: none;
width: 100%;
height: 15px;
display:block;

}

a.zwischenheader:active {
CURSOR: url('../images/aero_link.cur');
background: url(../images/header_notselect.gif);
text-decoration: none;
width: 100%;
height: 15px;
display:block;

}
/* header ende */

/* MENU START */

a.menu:link, a.menu:visited, a.menu:hover, a.menu:active {
font: bold 12px Verdana;
color: #4AA0E0;
list-style-type: none;
CURSOR: url('../images/aero_link.cur');
background: url(../images/menu_notselect.gif);
text-decoration: none;
width: 200px;
height: 30px;
border-bottom: 1px solid #6593CF;
display:block;
}

a.menu {
CURSOR: url('../images/aero_link.cur');
text-decoration: none;
width: 200px;
height: 25px;
display:block;
padding: 0px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
}

a.menu:hover {
CURSOR: url('../images/aero_link.cur');
background: url(../images/menu_hover.gif);
text-decoration: none;
width: 200px;
height: 30px;
display:block;
padding: 0px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
}

a.menu:active {
CURSOR: url('../images/aero_link.cur');
background: url(../images/menu_active.gif);
text-decoration: none;
width: 200px;
height: 30px;
display:block;
padding: 0px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
/*border-bottom: 1px solid #6593CF;*/
}

td.menu {
background-image: url(../images/menu_notselect.gif);
background-repeat:no-repeat;
width: 200px;
height: 30px;
display:block;
/*border-bottom: 1px solid #6593CF;*/
}
.last {
border-bottom: 1px solid #6593CF;
bottom: 785px;
}

/* MENU ENDE */

/* test Formulare start */
input.ourbutton {
font: 10px Verdana;
color: #000000;
background: white url(../images/shade.gif) top left repeat-x;
}

input.ourinputtext {
border: solid 1px #7FBCE8;
color: #0000e0;
}

textarea.ourinputtextarea {
background-color: #E7EDF3;
color: #0000e0;
font: 12px Verdana;
}

select.ourselect {
background-color: #E7EDF3;
border: 6px solid #7FBCE8;
color: #0000e0;
font: 12px Verdana;
}
/* test Formulare ende */

</style>

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

</head>
<body scroll="no" class="html"><div id="header">
<table width="100%" height="100%" border="0">
  <tr>
   <td><img src="images/logo_header.gif" border="0" alt=""></td>
   <td align="center"><img src="images/soschreibtmanheute.gif" border="0" alt=""></td>
   <td align="right" style="padding-right: 5px;"><img src="logo.png" border="0" alt=""></td>
  </tr>
</table>

</div><div id="zwischenheader">
<center><a class="zwischenheader" href="#">test</a></center>
</div><div id="left">

<tr>
   <td class="menu" width="200" align="center">
    <a class="menu" href="mainframe.php">Home</a>
   </td>
  </tr>

<tr>
   <td class="menu" width="200" align="center">
    <a class="menu" style=" color: #FF0084;" href="#" onClick="parent.window.location.href('ausloggen.php?select=ausloggen')">Abmelden</a>
   </td>
  </tr>

</table>

<img src="images/menu_top.gif" class="last" border="0" alt=""><br>
</div><div id="contents">
<div id="maincontent">ajax content</div>
</div></body>
</html>

#############

im opera, firefox und IE7 wird alles richtig dargestellt, sprich, der "maincontent" div geht nur bis zum seitenrand und nicht drüber und auch nur bis zum unteren ende der seite.

im IE6 geht der "maincontent" div nicht bis ganz nach unten und über den rechten rand raus.

auch der scrollbalken vo "left"-div wird nicht angezeigt.

hab schon alles probiert und weiß nicht weiter.

kann mir jemand helfen?

danke

Beitrag melden

– Informationen zu den Bewertungsregeln

probleme beim darstellen mit IE6
Patrick Andrieu Homepage des Autors 05.06.2007 13:17

css
– Informationen zu den Bewertungsregeln
Hallo conrad!

kann mir jemand helfen?

Bei dem CSS ist es etwas schwer... Ich fange mal von unten an.

im IE6 geht der "maincontent" div nicht bis ganz nach unten

Und im Opera/FF auch nicht. Verpass dem einen beispielsweise roten Border, dann siehst Du's. Solange der Inhalt des DIVs nur aus der Zeile "ajax content" besteht, wird er ohne Höhenangabe auch nicht länger. Deinem DIV #maincontent wird in Deiner style.css keinerlei Formatierung zugewiesen.

und über den rechten rand raus.

Er ist ohne Formatierung beim IE so breit, wie Du ihm Platz gelassen hast. Und das hast Du ja reichlich, den seinem umgebenden DIV hast Du für den IE eine 100%-Breite verpasst:

* html #contents {
  height:100%;
  width:100%;
  }

Bleiben wir beim CSS. Bei den Formatierungen für #left sehe ich:

overflow:auto;
  [...]
  overflow-x: hidden;
  overflow-y: auto;

Ja was denn? overflow:auto oder nur vertical automatisch? Da die letzten Angaben die ersten überschreiben, gelten die zwei letzten (BTW hast Du bei body übrigens auch 2x font-family angegeben.)

Wenn Du schon weiter unten den Star HTML Hack benutzt, brauchst Du _hier_ auch kein position: expression("absolute"); für den IE, Du kannst die Angabe im Hack-Block angeben:

* html #left{
  position:absolute;
  }

* html #contents {
  position:absolute;
  height:100%;
  width:100%;
  }

Zum HTML:

Ob Du XHTML 1.1 brauchst sei dahingestellt.

<body scroll="no" class="html">
      ^^^^^^^^^^  ^^^^^^^^^^^^

Was soll scroll=no. Du hast in Deiner CSS-Formatierung für body overflow:hidden. Allerdings ist eine Klasse html in Deiner style.css nicht zu finden.

Viele Grüße aus Frankfurt/Main,
Patrick

--

_ - jenseits vom delirium - _
<hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash>
Nichts ist unmöglich? Doch!
Beitrag melden

–
Informationen zu den Bewertungsregeln
probleme beim darstellen mit IE6
MudGuard Homepage des Autors 07.06.2007 09:15

css
– Informationen zu den Bewertungsregeln
Hi,

style.css:
<style type="text/css">

Du hast tatsächlich HTML-Elemente im CSS-File?

bottom:0px; //von untem (zum footer = height:50px;)

Derartige Kommentare gibt es in CSS nicht, nur /* ... */

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Du willst XHTML 1.1 benutzen,

<body scroll="no" class="html"><div id="header">
<table width="100%" height="100%" border="0">

<td align="center"><img src="images/soschreibtmanheute.gif" border="0" alt=""></td>

verwendest aber haufenweise Dinge, die es in XHTML 1.1 nicht gibt.

Entferne erstmal die Fehler im Code. Dann kann man weitersehen.

cu,
Andreas

--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

conrad: probleme beim darstellen mit IE6