Inhalt verrutscht (nach oben) IE 5.0 + 5.5

[selfmade]

Hallo erstmal,
habe schon einiges hier gelesen und mich nun auch angemeldet um mal selbst eine Frage zu stellen.

Momentan passe ich ein Template für einen Webshop ein wenig an meine Bedürfnisse an. Da ich noch kaum mit Css gearbeitet habe, stehe ich momentan vor einem kleinen problem.

Und zwar ist es so, das der Webshop bzw. das Template im Firefox (ab 2er),IE (ab 6.x), Opera (ab 8er) und sogar Safari, Camino und Shiira wunderbar dargestellt wird, aber im IE 5.0 und 5.5 + Netscape 4er (ist aber nicht so wichtig) total zerissen wird.

Habe schon diverse CSS-Kompatibilitäts-Tests gemacht, aber es wird nie was angezeigt, was ich irgendwie ändern könnte.

Beschreibung:
Der Shop hat im oberen bereich einen festen Kopf, darunter der Content.
Im Internet Explorer 5 schiebt sich nun der Content unter den Kopf, also der Inhalt soll quasi erst unter der Kopfgrafik beginnen, tut es aber nicht sondern fängt direkt oben an.
Im IE 5.5 im prinzip dasselbe nur das hier auchnoch die Boxen auf der rechten Seite in die Mitte über den Inhalt gedrückt werden.
Ziemlich blöd! Nun habe ich aber schon einiges ausprobiert und auch geändert aber ich habe es nicht ein bisschen verändern können. :/

habe schon oft von schwierigkeiten bei der css darstellung gehört, aber keinen passenden "hack" oder "conditional comment" dazu gefunden.
vieleicht hat ja jemand nen tipp hier

Hier der CSS Code:

Code: Alles auswählen

/* default common settings */

body {
   color: black;
   background-color: white;
   font-family: Verdana, Helvetica, sans-serif;
   font-size: 0.7em;
   margin: 0;
   padding: 0;
   line-height: 1.5em; /* change this value to 1.25em to reset default */
   margin-bottom: 1em; /* give room at bottom of page */
   cursor: default; /* remove text I cursor when mouse is over text */
   background-image: url(img/gradientlightblue.png);
   background-position: center bottom;
   background-attachment: fixed;
   background-repeat: repeat-x;
}



* html body {
   margin-right: 1px; /* IE 5.5 and 6.0 star-hack to remove horizontal scrollbar if possible */
}

a:link, a:visited {
   color: black; /* remove standard blue of hyperlinks */
   text-decoration: none; /* remove underline */
}

a:hover, a:focus { /* mouseover and keyboard tab styles */
   color: blue;
   text-decoration: underline;
}

a img {
   border: none; /* remove thick blue border of images within links */
   text-decoration: none; /* remove underline of image links */
}

hr {
   height: 1px;
   overflow: hidden;
   background-color: blue; /* give horizontal rulers a standard color */
   color: blue;
   border: 0px solid blue;
}

abbr, acronym {
   cursor: help;
   border-bottom: none; /* remove dotted underline on quickinfo helps */
}

tr.odd th, tr.odd td {
   background-color: white;
}

tr.even th, tr.even td {
   background-color: #ccccff; /* lightblue */
}


/* generic classes */

.accessibility {
   visibility: hidden; /* hidden content only for screen readers etc. */
   display: none;
}

.left {
   text-align: left;
}
.center {
   text-align: center;
}
.right {
   text-align: right;
}

.noUnderline, a.noUnderline {
   text-decoration: none !important;
}

a:hover .underlinehover {
   text-decoration: underline !important;
}

.noBorder {
   border: none;
}

.verticalMiddle {
   vertical-align: middle;
}

small, .small {
   font-size: 0.85em;
   line-height: 1.3em;
}

big, .big {
   font-size: 1.4em;
}

select { /* restore 9x style = disable xp themeability */
   border: 2px inset darkgrey;
}

th { /* table header cells */
   text-align: left;
}

.content_heading {
   font-weight: bold;
   font-size: 1.15em;
}

.errorbox {
   color: red;
   border: 1px solid red;
   border-left-width: 4px;
   padding: 2px;
   padding-left: 5px;
   margin-bottom: 1.5em;
   background-color: #FFCC99; /* very light red */
}

.requiredField {
   color: red;
}

/* wholepage */

div#wholepage {
   padding-top: 12.5em;
}


/* head */

div#head {
   width:98%;
   padding: 10px;
   text-align: right;
   height: 11em;
   background-color: #90c6de;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 1000;
}

* html div#head { /* IE6 hack */
   position: absolute;
}

div#head div#headlogo {
   float: left;
}

div#head div.box {
   float: right;
   width: 400px;
   margin-right: 0;
}

div#head div.box_top {
   background: none; /* hide the default background in the head */
}


/* navbar on top */

div#navbartop {
   position: absolute;
   width: 98%;
   bottom: 0;
   left: 0px;
   height: 2.5em;
   color: blue;
   padding: 0 10px;
   margin: 0;
   background-color: #A7D1E5; /* medium blue */
   background-image: url(img/gradientblue.png);
   background-repeat: repeat-x;
}
* html div#navbartop {
   width: 100%;
}

div#navbartop div { /* left and right links in navbar */
   padding-top: 4px; /* vertically centered */
}

div#navbartop div#navtrail { /* breadcrumb navigation */
   float: left; /* allow linkbox on the right to float right */
}

div#navbartop div#navbarlinks { /* links on the right side of the bar */
   text-align: right;
   float: right;
}

div#navbartop a:link, div#navbartop a:visited { /* links in the bar */
   color: blue;
}

div#navbargradient {
   position: fixed;
   z-index: 1001;
   top: 12.5em;
   left: 0;
   height: 20px;
   width: 100%;
   overflow: hidden;
   background-image: url(img/gradientwhitetrans.png);
   background-repeat: repeat-x;
}
* html div#navbargradient { /* IE6 hack */
   display: none; /* IE6 doesn't know transparent pngs */
}


/* box properties */

div#left div.box, div#right div.box {
   margin-bottom: 1.5em;
}

div.box_top { /* header of boxes, containing box title */
   font-weight: bold;
   font-size: 1.1em;
   margin-bottom: 0.25em;
   background-color: #FFDD1F; /* yellow */
   background-image: url(img/gradientyellow.png);
   background-repeat: repeat-x;
   padding: 2px 5px;
}

div.box_content { /* content part of boxes */
   border: 0px solid black; /* black is default color, overwritten below for each box */
   padding: 5px;
}

div.box_content_inner { /* inner formerly shadowed area */
   border: 2px dotted black; /* black is default color, overwritten below for each box */
   border-color: inherit;
   padding: 5px;
}

div.box ul { /* item/link list */
   margin: 0;
   padding: 0;
}

div.box li { /* item in list */
   margin: 0;
   padding: 0;
   margin-left: 20px;
   padding-left: -5px;
   list-style-type: none;
}

div.box li.main { /* main item in list */
   list-style-image: url(img/arrowminiblue.gif);
}

div.box li.active a {
   text-decoration: underline;
}

div.box li.mainactive { /* active main item in list */
   list-style-image: url(img/arrowminiyellow.gif);
}

div.box li.mainactive a {
   text-decoration: underline;
}

div.box li.main:hover { /* active main item in list */
   list-style-image: url(img/arrowminiyellow.gif);
}

div.box input[type=image] { /* submit images, like arrows */
   vertical-align: middle;
}

/* left side */

div#left {
   width: 17em;
   position: absolute;
   left: 10px;
   padding-top: 1px;
   padding-bottom: 5em;
   margin-top: 1.3em;
}

div#left div.box_top, div#right div.box_top {
   border: 1px solid #ffcc00;
   border-bottom-width: 0;
}

div#left div.box_content, div#right div.box_content {
   margin-top:-0.27em;
   background-color: white;
   background-image: url(img/gradientlightbluesmall.png);
   background-repeat: repeat-x;
   background-position: center bottom;
   border: 1px solid #91C6DF;
   border-top-width: 0;
}

* html div#left { /* IE 6 hack */
   position: static;
   float:left;
   margin-left: 10px;
}

/* right side */

div#right {
   width: 13.6em;
   position: absolute;
   right: 10px;
   padding-top: 1px;
   padding-bottom: 5em;
   margin-top: 1.3em;
}


/* box specific */

div#box_login input#input_loginbox_email {
   width: 95%; /* so it won't go over the right page border */
}

div#box_login input#input_loginbox_pwd {
   width: 5.6em; /* so the login button will go right of it */
}

div#box_newsletter input#input_newsletter_email {
   width: 95%; /* so it won't go over the right page border */
}





/* main content */

div#content {
   margin: 1.3em 15.5em 0em 19.5em;
   min-height: 60em;
}

/* IE 5.5 hack because IE doesn't know to deal with min-height */

* html div#content {
   height: 60em;
}

div#content div.box_top { /* boxes in main content area */
   font-size: 1.25em;
   padding-bottom: 0.35em;
}

div#content div.box_content {
   border-width: 0; /* no border for boxes in main content area */
}

div#content div.box_content div.box_top { /* box-in-box */
   font-size: 1.1em;
   border-bottom-width: 2px;
}


/* bottom boxes auto-added outside the template */

div.copyright2 {
   margin: 0em 15.5em 0em 19.5em;
   margin-top: 1em;
   border-top: 1px solid #3330BB;
   text-align: center;
   color: #3330BB;
}
div.copyright2 a:link, div.copyright2 a:visited {
   color: #3330BB;
}

div.copyright2 a:hover, div.copyright2 a:focus {
   color: blue;
   text-decoration: underline;
}

div.copyright {
   padding: 0em 15.5em 0em 19.5em;
   text-align: center;
   color: #6361D6;
}

div.copyright a:link, div.copyright a:visited {
   color: #6361D6;
}

div.copyright a:hover, div.copyright a:focus {
   color: blue;
   text-decoration: underline;
}

div.parseTime {
   margin: 0em 15.5em 0em 19.5em;
   text-align: center;
   color: gray;
}



/* page specific */

/* main_content.html = index.php */

span.greetUser {
   color: blue;
   font-weight: bold;
}

div.products_overview_item { /* a single product box in an overview, e.g. the home page */
   float: left; /* display the next box right of this one, if possible */
   margin:0 1em 2em 0; /* give room */
   width: 25.1em;
   height: 13em;
}

div.products_overview_item img.product_image { /* thumbs in these boxes */
   float: left;
}


/* product_listing */


div#modbox_product_listing table {
   border-collapse: collapse;
}

div#modbox_product_listing td {
   border: 0px solid grey;
   border-top-width: 1px;
}

a.pageResults {
   color: #0000ff;
   text-decoration: underline;
}

a.pageResults:hover {
   color: #0000ff; /* blue */
   background-color: #ffff33; /* lightyellow */
}

/* category_listing */

div.categories_item { /* a single category box in an overview, e.g. the home page */
   float: left; /* display the next box right of this one, if possible */
   margin: 0.5em 1em 2em 0; /* give room */
   width: 17em;
   min-height: 12em;
}

* html div.products_overview_item { /* IE6 hack */
   height: 12em;
}



/* shopping_cart.html = shopping_cart.php */


div#modbox_order_details table {
   border-collapse: collapse;
}

div#modbox_order_details th {
   border-bottom: 1px solid grey;
}

div#modbox_order_details td {
   border-color: grey;
   border-width: 0 1px 1px 0;
}

div#modbox_order_details td th { /* product attributes */
   border: 0px solid black !important;
}


/* advanced_search */

div#modbox_advanced_search th, div#modbox_advanced_search td {
   vertical-align: top;
}


/* reviews.php */

div#modbox_reviews div.productsImage {
   float: left;
}


/* product_reviews.php */

div#modbox_product_reviews tr.odd td {
   background-color: white;
}

div#modbox_product_reviews tr.even td {
   background-color: #ccccff; /* lightblue */
}


/* product_reviews_info.php */



/* products_new.php */


div#modbox_products_new table {
   border-collapse: collapse;
}

div#modbox_products_new td {
   border: 0px solid grey;
   border-top-width: 1px;
}


/* product_info.php */


div#modbox_product_info div.submodule {
   padding: 1em 0;
   border-bottom: 1px solid lightgrey;
}

div.cross_selling_item { /* a single product box in a cross-selling overview */
   float: left; /* display the next box right of this one, if possible */
   margin: 0.5em 1em 2em 0; /* give room */
   width: 17em;
   min-height: 12em;
}


/* specials.php */



/* sitemap.html = media/content/sitemap.php */



/* account.php */



/* account_edit.php */




/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.boxText {
   font-family: Verdana, Arial, sans-serif;
   font-size: 10px;
}

.boxTextBG {
   font-family: Verdana, Arial, sans-serif;
   font-size: 10px;
   background-color: #f1f1f1;
}
.boxTextBGII {
   font-family: Verdana, Arial, sans-serif;
   font-size: 10px;
   background-color: #FFCC99;
}
.boxTextPrice {
   font-family: Verdana, Arial, sans-serif;
   font-size: 10px;
   color: #FF0000;
}

.errorBox {
   font-family : Verdana, Arial, sans-serif;
   font-size : 10px;
   font-weight: bold;
   background-color: #ffb3b5;
}
.gvBox {
   font-family : Verdana, Arial, sans-serif;
   font-size : 14px;
   font-weight: bold;
   border-color: #FFFFFF;
   border: 1px solid;
   background-color: #ffb3b5;
}
.stockWarning {
   font-family : Verdana, Arial, sans-serif;
   font-size : 10px;
   color: #cc0033;
}

.productsNotifications {
   background-color: #f2fff7;
}

.orderEdit {
   font-family : Verdana, Arial, sans-serif;
   font-size : 10px;
   color: #70d250;
   text-decoration: underline;
}

img{
   border:0;
}

FORM {
   display: inline;         
}


TR.header {
   background-color: #ffffff;
}

TR.headerNavigation {
  background: #F6F6F6;
}

TD.headerNavigation {
   font-family: Verdana, Arial, sans-serif;
   font-size: 10px;
   color: #000000;
   font-weight : bold;
   border-bottom: 1px solid;
   border-color: #b6b7cb;
   background-color: #F6F6F6;
}

A.headerNavigation {
  color: #000000;
}

A.headerNavigation:hover {
  color: #000000;
}

TD.conditions {
  background-color: #FFCCCC;
}

A.confirmationEdit {
   color: #009933;
   font-style: italic;
}
A.confirmationEdit:hover {
   color: #009933;
   font-style: italic;
   text-decoration: underline;
}
TR.headerError {
  background-color: #ff0000;
}

TR.headerMessage {
   background-color: #00CC33;
}

.moduleHeading {
   font-family: Verdana, Arial, sans-serif;
   font-size: small;
   font-weight: bold;
   padding-bottom: 10px;
}

TD.headerError {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  background: #ff0000;
  color: #ffffff;
  font-weight : bold;
  text-align : center;
}

TR.headerInfo {
  background: #00ff00;
}

TD.headerInfo {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  background: #00ff00;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}

TR.footer {
  background: #bbc3d3;
}

TD.footer {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
    background: #F6F6F6;
  color: #000000;
  font-weight : bold;
  border-bottom: 1px solid;
  border-color: #b6b7cb;
}

.infoBox {
}

.infoBoxContents {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}

.infoBoxNotice {
  background: #FF8E90;
}

.infoBoxNoticeContents {
  background: #FFE6E6;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}

TD.infoBoxHeading {
  font-weight:bold;
  height:17px;
  color: #000000;
}

TD.infoBoxHeading_right {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: white;
  height:17px;
  color: #000000;
}

TD.infoBox, SPAN.infoBox {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  border-right: 4px solid;
  background: white;
  border-color: white;
}

TD.infoBox_right, SPAN.infoBox_right {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  background: white;

}

TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {
  background: #f8f8f9;
}

TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {
  background: #f8f8f9;
}

TABLE.productListing {
  border: 1px;
  border-style: solid;
  border-color: #b6b7cb;
  border-spacing: 1px;
}

.productListing-heading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  background: #b6b7cb;
  color: #FFFFFF;
  font-weight: bold;
}

TD.productListing-data {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}

TD.pageHeading, DIV.pageHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #000000;
}

TR.subBar {
  background: #f4f7fd;
}

TD.subBar {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  color: #000000;
}

TD.main, P.main {
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  line-height: 1.5;
}

TD.smallText, SPAN.smallText, P.smallText {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}

TD.accountCategory {
  font-family: Verdana, Arial, sans-serif;
  font-size: 13px;
  color: #aabbdd;
}

TD.fieldKey {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
}

TD.fieldValue {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
}

TD.tableHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
}

SPAN.newItemInCart {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  color: #ff0000;
}

CHECKBOX, INPUT, RADIO, SELECT {
   font-family: Verdana, Arial, sans-serif;
   font-size: 11px;
}

TEXTAREA {
  width: 100%;
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
}

SPAN.underline {
   text-decoration: underline;
}

TABLE.formArea {
  background: #f1f1f1;
  border-color: #cccccc;
  border-style: solid;
  border-width: 1px;
}

TD.formAreaTitle {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
}

SPAN.markProductOutOfStock {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  color: #c76170;
  font-weight: bold;
}

SPAN.productSpecialPrice {
  font-family: Verdana, Arial, sans-serif;
  color: #ff0000;
}
SPAN.productOldPrice {
   font-family: Verdana, Arial, sans-serif;
   color: #ff0000;
   text-decoration: line-through;
}
SPAN.errorText {
  font-family: Verdana, Arial, sans-serif;
  color: #ff0000;
}

SPAN.productDiscountPrice {
  font-family: Verdana, Arial, sans-serif;
  color: #ff0000;
  font-weight: bold;
}

.smallHeading {
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: x-small;
   font-weight: bold;
   color: Black;
}

.moduleRow {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
line-height: 1.5;
background-color: #E6E6E6;
border: 1px solid;
border-color: #E6E6E6;

}
.moduleRowOver {
   background-color: #D7E9F7;
   border: 1px solid;
   border-color: #ffffff;
   font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
    line-height: 1.5;
   
   }
.moduleRowSelected { background-color: #E9F4FC; }

.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #8c8c8c; }
.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000000; }

/* sitewide font classes */
/* Note: heading<Number> equals <font> */
.heading1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; }
.heading2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; }
.heading3 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; }
.heading4 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12pt; }
.heading5 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16pt; }

/* Sitemap Tables */
.sitemap_heading {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #FFFFFF;
   background-color: #666666;
   padding-top: 2px; padding-bottom: 2px;}
.sitemap_heading a {color:#FFFFFF;}
.sitemap_heading a:hover {color:#CCCCCC; text-decoration:none;}

.sitemap_sub {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; color: #000000; background-color: #E6E6E6; padding: 2px 2px;}
.sitemap_sub a {color:#000000;}
.sitemap_sub a:hover {color:#999999; text-decoration:none;}


/* message box */

.messageBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.messageStackError, .messageStackWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #ffb3b5; }
.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #99ff00; }

/* input requirement */

.inputRequirement { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ff0000; }

.tableShop {
background-color: #ffffff;
border-left: 1px solid;
border-right: 1px solid;
border-color: #b6b7cb;
}

.navLeft {
   border-right: 1px solid;
   border-color: #b6b7cb;
   background-image: url(img/bg_left_column.jpg);
   width: 185px;
}
.navRight {
   border-color: #666666;
   border-top-width: 4px;
   border-top-style: solid;
   border-left-width: 4px;
   border-left-style: solid;
   background-color: #E6E6E6;
   width: 185px;
}

.contentsTopics {
   font-family: Verdana, Arial, sans-serif;
   font-size: 14px;
   font-weight: bold;
}

.tableListingI {
   background-color: #eeeeee;
}

.tableListingII {
   background-color: #d0d0d0;
}

.tableBody {
padding: 5px;
}

.poweredby {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  color: #000000;
  font-weight: bold;
}
.onepxwidth {
   width: 1px;
}


und ein paar bilder:
So sollte es aussehen:


Internet Explorer 5.0:


Internet Explorer 5.5:



bin für jeden tipp dankbar!

grüße

[selfmade]

keine ne idee was ich machen könnte?
scheint mir als wenn es da irgendwas geben muss, was den ie 5 zur korrekten darstellung bewegt.

:/ *verzweifel*

[Laus]

Mit ein paar Bildern und der CSS Datei alleine kann man da leider nicht viel dazu sagen. Man braucht auch den Quelltext dazu. Am besten wäre ein Link zu einer fertigen Installation.
Der IE5 und der IE5.5 sind meist nur mit Hacks oder Conditional coments zu einer einigermaßen vernünftigen zusammenarbeit zu bewegen, auch der richtige Docktype spielt eine große Rolle.

Gruß Xaver