Probleme mit Abstand IE7 / IE6

bubble1973 · 12.06.2009

Hallo,

ich bin hier fast am Verzeifeln! Habe nach langen schweisstreibenden Arbeiten ein Design für ein Shopsystem für Internet Explorer (IE) 7 und Firefox 3 angepasst.

Im IE6 wird das Design an einer Stelle weiter nach unten geschoben (siehe folgende Grafik), ich komme einfach nicht drauf woran das liegen könnte ...

Hier habe ich mal die n.m.E. wichtigen Bereiche (DIVs) gekennzeichnet:

Man kann sich die Seite ansehen unter
www.wollekauf.de/zencart

Dieses Abstandproblem ist mein Hauptproblem.

Meine Verzeiflung hat sich jedoch noch vergrößert :'(, nachdem ich folgendes festellen musste: Komischerweise wird die Seite im IE 5.5 gar nicht angezeigt und es kommt bei meinem Programm IETester zu einem Absturz. Die Seite lädt, nachdem der Kopfbereich geladen wurde, an einer bestimmten Stelle ständig nach. Auch der kommt beim IE 5.5 zu keinem Ergebnis. Hat hier jemand eine Vorstellung woran das liegen könnte?

Hier ist der Inhalt meiner CSS-Datei

Code:

/**
 * Main CSS Stylesheet
 *
 * @package templateSystem
 * @copyright Copyright 2003-2007 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: stylesheet.css 5952 2007-03-03 06:18:46Z drbyte $
 */

body {
    margin: 0;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 62.5%;
    color: #000000;
    background-color: #326F3D;
    }

a img {border: none; }

a:link, #navEZPagesTOC ul li a {
    color: #000000;
    text-decoration: none;
    }
 
a:visited {
    color: #000000;
    text-decoration: none;
    }

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
    text-decoration: underline;
    }

a:active {
    color: #000000;
    }

h1 {
    font-size: 1.5em;
    color: #c8ffaf;
    }

h2 {
    font-size: 1.4em;
    }

h3 {
    font-size: 1.3em;
    }

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
    font-size: 1.1em;
    }

.biggerText {
    font-size: 1.2em;
    }

h1, h2, h3, h4, h5, h6 {
    margin: 0.3em 0;
    }

/*  Might uncomment either or both of these if having problems with IE peekaboo bug:
h1, h2, h3, h4, h5, h6, p {
    position: relative;
    }
*html .centerColumn {
    height: 1%;
    }
*/

CODE {
    font-family: arial, verdana, helvetica, sans-serif;
    font-size: 1em;
    }

FORM, SELECT, INPUT {
    display: inline;
    font-size: 1em;
    margin: 0.1em;
    }
    
TEXTAREA {
    margin: auto;
    display: block;
    width: 95%;
    }
    
input:focus, select:focus, textarea:focus {
    background: #E4FEF5;
    }
    
.formbutton {
    font-family:verdana, arial, helvetica, sans-serif;
    font-weight:bold;
    border:solid 2px #E78923;
    background:#0D4B21;
    color:#C8FFAF;
    padding: 1px 2px;
}


FIELDSET {
    padding: 0.5em;
    margin: 0.5em 0em;
    border: 1px solid #C8FFAF;
    }

LEGEND {
    font-weight: bold;
    padding: 0.3em;
    color: black;
    }

LABEL, h4.optionName {
    line-height: 1.5em;
    padding: 0.2em;
    }

LABEL.checkboxLabel, LABEL.radioButtonLabel {
    margin: 0.5em 0.3em;
    }

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
    float: left;
    }

LABEL.inputLabel {
    width: 9em;
    float: left;
    }

LABEL.inputLabelPayment {
    width: 14em;
    float: left;
    padding-left: 2.5em;
    }

LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel {
    width: 11em;
    float: left;
    }

#checkoutPayment LABEL.radioButtonLabel {
    font-weight: bold;
    }

P, ADDRESS {
    padding: 0.5em;
    }

ADDRESS {
    font-style: normal;
    }

.clearBoth {
    clear: both;
    }

HR {
    height: 1px;
    margin-top: 0.5em;
    border: none;
    border-bottom: 1px solid #c8ffaf;
    }

/*warnings, errors, messages*/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
    line-height: 1.8em;
    padding: 0.2em;
    }

.messageStackWarning, .messageStackError {
    background-color: #ff0000;
    color: #C8FFAF;
    }

.messageStackSuccess {
    background-color: #99FF99;
    color: #000000;
    }

.messageStackCaution {
    background-color: #FFFF66;
    color: #000000;
    }

/*wrappers - page or section containers*/
#mainWrapper {
    background-color: #326F3D;
    text-align: left;
    width: 950px;
    vertical-align: top;
    border: none;
    }

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
    margin: 0;
    padding: 0;
    }

/* fix for IE to close line between headerWrapper and contentMainWrapper */
#headerWrapper {
    height: 225px;
    }
    
#whiteBannerWrapper, #whiteBanner {
    background-color: #ffffff;
    margin: 0;
    height: 75px;
    }

#navMainWrapper, #navCatTabsWrapper {
    margin: 0em;
    background-color: #326F3D;
    padding: 0.5em 0.2em;
    font-weight: bold;
    color: #c8ffaf;
    height: 100px;
    }

#navSuppWrapper {
    margin: 0em;
    background-color: #326F3D;
    /*background-image: url(../images/tile_back.gif);*/
    padding: 0.5em 0.2em;
    font-weight: bold;
    color: #c8ffaf;
    width: 950px;
    }
    
#whiteBannerBackground{
    position:absolute; 
    left:0px; 
    top:150px; 
    width:100%;
    z-index: -1;
    background-color: #ffffff;
    height:75px;
    }

#tagline {
    color:#000000;
    font-size: 2em;
    text-align : center;
    vertical-align: middle;
    }

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
    margin: auto;
    } 

#navColumnOneWrapper, #navColumnTwoWrapper {
    margin-left: 0.5em;
    margin-right: 0.5em;
    }    

#sendSpendWrapper {
    border: 1px solid #cacaca;
    float: right;
    margin: 0em 0em 1em 1em;
    }

.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
    margin: 0;
    width: 47%;
    }

.wrapperAttribsOptions {
    margin: 0.3em 0em;
    }

/*navigation*/

.navSplitPagesResult {}
.navSplitPagesLinks {}

.navNextPrevWrapper {
    margin: 0 0 1.5em 0;
}

.navNextPrevCounter {
    margin: 0em;
    font-size: 0.9em;
    }
.navNextPrevList {
    display: inline;
    white-space: nowrap;
    margin: 0;
    padding: 0.5 em;
    list-style-type: none;
    }

#navCatTabsWrapper {
    background-color: #C8FFAF;
    color: #9a9a9a;
    background-image:none;
}

#navMain ul, #navSupp ul, #navCatTabs ul {
    margin: 0;
    padding: 0.5em 0em;
    list-style-type: none;
    text-align: center;
    line-height: 1.5em;
    }

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
    display: inline;
    border-left: solid 2px ;
    color: #C8FFAF;    
    }

#navMain ul li a {
    padding-left: 0.4em;
    right: 20px;
    text-decoration: none;
    margin: 0;
    color: #C8FFAF;
    }
    
#navMain ul li.firstbar {
    border-left: none;
    }
    
#navMainSearch {
    padding-right: 20px;
    padding-top:25px;
    clear:right;
    float: right;
    }    
    
#navCatTabs ul li a {
    text-decoration: none;
    padding: 0em 0.5em;
    margin: 0;
    color: #C8FFAF;
    white-space: nowrap;
    }
    
#navSupp, #navSupp ul li a {
    text-decoration: none;
    padding: 0em 0.5em;
    margin: 0;
    color: #7DB776;
    }


#navCatTabs ul li a {
    color: #9a9a9a;
    }

#navEZPagesTOCWrapper {
    font-weight: bold;
    float: right;
    height: 1%;
    }

#navEZPagesTOC ul {
    margin: 0;
    padding: 0.5em 0em;
    list-style-type: none;
    line-height: 1.5em;
    }

#navEZPagesTOC ul li {
    white-space: nowrap;
    }

#navEZPagesTOC ul li a {
    padding: 0em 0.5em;
    margin: 0;
    }

#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
    margin: 0.5em;
    }

#navBreadCrumb, #navBreadCrumb a, #navBreadCrumb a:visited , #navBreadCrumb a:active{
    padding: 0.5em 0.5em;
    background-color: #326f3d;
    color: #7DB776;
    font-size: 0.95em;
    font-weight: bold;
    }

#navEZPagesTop {
    /*background-image: url(../images/tile_back.gif);*/
    background-color: #58935b;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.0em;
    font-weight: bold;
    margin: 0;
    padding: 6px;
    height: 20px;

    }
    
#navEZPagesTopBackground {
    position:absolute; 
    left:0px; 
    top:110px; 
    width:100%;
    z-index: -1;
    background-color: #58935b;
    height: 32px;
    margin: 0;
    }
    
#greenSpacer {
    background-color: #c8ffaf;
    height: 8px;
    margin: 0;
    padding: 0;
    }
    
#greenSpacerBackground {
    position:absolute; 
    left:0px; 
    top:142px; 
    width:100%;
    z-index: -1;
    background-color: #c8ffaf;
    height: 8px;
    }

#navColumnOne, #navColumnTwo {
    background-color: transparent;
    }

/*The main content classes*/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
    vertical-align: top;
    }

.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
    padding: 0.8em;
    }

    
/*.content,*/ #productDescription, .shippingEstimatorWrapper {
    /*font-size: 1.2em;*/
    padding: 0.5em;
    }    
    
.alert {
    color: #C8FFAF;
    margin-left: 0.5em;
    }
.advisory {}
.important {
    font-weight: bold;
    }
.notice {}
.rating{}
.gvBal {
    float: right;
    }

.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
    font-size: 0.9em;
    }

/*Shopping Cart Display*/
#cartAdd {
    float: right;
    text-align: center;
    margin: 1em;
    border: 1px solid #000000;
    padding: 1em;
    }

.tableHeading, #cartSubTotal {
    background-color: #58935A;
     }

#cartSubTotal {
    border-top: 1px solid #C8FFAF;
    font-weight: bold;
    text-align: right;
    line-height: 2.2em;
    padding-right: 2.5em;
    }

.tableRow, .tableHeading, #cartSubTotal {
    height: 2.2em;
    }

.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay {
    padding: 0.5em 0em;
    }

.cartUnitDisplay, .cartTotalDisplay {
    text-align: right;
    padding-right: 0.2em;
    }

#scUpdateQuantity {
    width: 2em;
    }

.cartQuantity {
    width: 4.7em;
    }

.cartNewItem {
    color: #33CC33;
    position: relative;  /*do not remove-fixes stupid IEbug*/
    }

.cartOldItem {
    color: #660099;
    position: relative;  /*do not remove-fixes stupid IEbug*/
    }

.cartBoxTotal {
    text-align: right;
    font-weight: bold;
    }

.cartRemoveItemDisplay {
    width: 3.5em;
    }

.cartAttribsList {
    margin-left: 1em;
    }

#mediaManager {
    width: 50%; 
    margin: 0.2em;
    padding: 0.5em;
    background-color: #E4FEf5;
    border: 1px solid #003D00;
    }
.mediaTitle {
    float: left;
    }
.mediaTypeLink {
    float: right;
    }

.normalprice, .productSpecialPriceSale {
    text-decoration: line-through;
    }

.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
    color: #C8FFAF;
    }

.orderHistList {
    margin: 1em;
    padding: 0.2em 0em;
    list-style-type: none;
    } 

#cartBoxListWrapper ul, #ezPageBoxList ul {
    list-style-type: none;
    }

#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {
    margin: 0;
    padding: 0.2em 0em;
    } 

#cartBoxEmpty, #cartBoxVoucherBalance {
    font-weight: bold;
    }

.totalBox {
    width: 5.5em;
    text-align: right;
    padding: 0.2em;
    }

.lineTitle, .amount {
    text-align: right;
    padding: 0.2em;
    }

.amount {
    width: 5.5em;
    }

/*Image Display*/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
    margin: 0em 1em 1em 0em ;
    }

.categoryIcon {}

#cartImage {
    margin: 0.5em 1em;
    }

/*Attributes*/
.attribImg {
    width: 20%;
    margin: 0.3em 0em;
}

.attributesComments {}

/*list box contents*/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
    margin: 1em 0em;
    }

.centerBoxWrapper {
    height: 1%;
    margin: 1.1em 0;
    }

h2.Heading {
    font-size: 1.3em;
    color: #C8FFAF;
    }

/*sideboxes*/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a,
h3.rightBoxHeading, h3.rightBoxHeading a {
    font-size: 0.9em;
    color: #c8ffaf;
    }

#categoriesHeading, #manufacturersHeading, #currenciesHeading, #bestsellersHeading, #musicgenresHeading, #recordcompaniesHeading, #searchHeading, #search-headerHeading {
    font-size: 0.9em;
    color: #c8ffaf;
}

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
    margin: 0em;
    background-color: #85935a;
    padding: 0.5em 0.2em;
    }

.leftBoxContainer  {
    margin-top: 0em;
    margin-bottom: 1.5em;
    border: none;
    }

.rightBoxContainer {
    margin-top: 0em;
    margin-bottom: 1.5em;
    border: none;
    }    
    
.sideBoxContent {
    background-color: #85935a;
    padding: 0.4em;
    }

.rightBoxHeading a:visited, .leftBoxHeading a:visited, .centerBoxHeading a:visited {
    color: #c8ffaf;
    }
    
h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover {
    text-decoration: underline;
    } 


.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
    text-align: center;
    }

#bestsellers .wrapper {
    margin: 0em 0em 0em 1.5em;
    }

#bestsellers ol {
    padding: 0;
    margin-left: 1.1em;
    }

#bestsellers li {
    padding: 0;
    margin: 0.3em 0em 0.3em 0em;
    }

#bannerboxHeading, #bannerboxContent{
    background-color: #E78923;
}

#upProductsHeading {
    text-align: left;
    }

#upDateHeading {
    text-align: right;
    }

/* categories box parent and child categories */
A.category-top, A.category-top:visited {
    color: #000000;
    text-decoration: none;
    }

A.category-top:hover {
    text-decoration: underline;
    }    

A.category-links, A.category-links:visited {
    text-decoration: none;
    }

A.category-links:hover {
    text-decoration: underline;
    }    

A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited {
    color: #000000;
    text-decoration: none;
    }
    
A.category-subs:hover, A.category-products:hover {
    text-decoration: underline;
    }
    
SPAN.category-subs-parent {
    font-weight: bold;
    }
SPAN.category-subs-selected {
    font-weight: bold;
    }
/* end categories box links */

/*misc*/
.taxAddon {
    font-size: 0.9em;
    font-weight: normal;
    margin: 0;
    }

.back {
    float: left;
    }

.forward, #shoppingCartDefault #PPECbutton {
    float: right;
    }

.bold {
    font-weight: bold;
    }

.rowOdd {
    background-color: #A3DB93;
    height: 1.5em;
    vertical-align: top;
    }

.rowEven {
    background-color: #7DB776;
    height: 1.5em;
    vertical-align: top;
    }

.hiddenField {
    display: none;
}
.visibleField {
    display: inline;
}

CAPTION {
    /*display: none;*/
    }

#myAccountGen li, #myAccountNotify li {
    margin: 0;
    } 

.accountTotalDisplay, .accountTaxDisplay {
    width: 20%;
    text-align: right;
    /*vertical-align: top*/
    }

.accountQuantityDisplay {
    width: 10%;
    vertical-align: top
    }

TR.tableHeading {
    background-color: #58935A;
    height: 2em;
    }

.productListing-rowheading {
    background-color: #58935A;
    /*background-image: url(../images/tile_back.gif);*/
    height: 2em;
    color: #000000;
    }

#siteMapList {
    width: 90%;
    float: right;
    }

.ratingRow {
    margin: 1em 0em 1.5em 0em;
    }

LABEL#textAreaReviews {
    font-weight: normal;
    margin: 1em 0em;
    }

#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {
    background-color: #C8FFAF;
    }
.information {padding: 10px 3px; line-height: 150%;}

#shoppingcartBody, #shippingEstimatorContent {
    clear: both;
    }

.seDisplayedAddressLabel {
    background-color:#C8FFAF;
    text-align: center;
    }
.seDisplayedAddressInfo {
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    }
#seShipTo {
    padding: 0.2em;
    }

Bitte um Hilfe! Sollten noch weitere Infos benötigt werden, stelle ich diese gerne zur Verfügung!

Vielen Dank im voraus.

Steffen

cebito · 12.06.2009

AW: Probleme mit Abstand IE7 / IE6

Gib mal dem body noch ein padding:0; evtl füg auch noch ein

Code:

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

Dann teste noch mal. Und um den IE 5.5 würd ich mir keine Gedanken mehr machen, den benutzt (glaub ich) niemand mehr. IE6 kommt auch nur noch in verschwindend geringer Anzahl vor, da macht es aber trotzdem Sinn, für den noch mitzustylen.

bubble1973 · 12.06.2009

AW: Probleme mit Abstand IE7 / IE6

Hi cebito,

vielen Dank für die schnelle Antwort! Das mit dem IE 5.5 beruhigt mich schon mal sehr... ;-)

Bedauerlicherweise haben jedoch Deine Hinweise zu keiner Veränderung im IE6 geführt

... der Abstand bleibt hartnäckig bestehen.

Hast Du mir noch andere Hinweise. Kann es ggf. mit dem Logo zusammenhängen ... dass der IE6 hier ein anderen Abstand wählt?

Beste Grüße,
Steffen

progfrog · 12.06.2009

AW: Probleme mit Abstand IE7 / IE6

Das mit dem Abstand könnte am padding deines #navMainWrapper liegen. Da gibts mit IE 6 ja immer Probleme mit dem Box Modell Bug. Ich hasse den wie die Pest -.- Total nervig immer so ne riesige Extrawurst für den IE 6 zu schreiben.

Bezüglich dem vorkommen von IE 5 brauchste dir wirklich keine Sorgen machen. Der hat nur noch ca. 3% Marktanteil. IE 6 hingegen ist leider leider leider leider leider mit knapp 41% sogar noch Marktführer :motz:

:'(
Quelle der Zahlen ist . Ich denke mal man kann deren Statistik für repräsentativ erklären da sie angeben pro tag ca. 1mio Hits auszuwerten!

Wäre ja schön wenn ich dir helfen konnte. Kann genau mit dir mitfühlen. Der Hinternet Explorer bringt mich beim Layouten auch immer wieder zur Weißglut!

Gruß progfrog

bubble1973 · 12.06.2009

AW: Probleme mit Abstand IE7 / IE6

Hallo,

ich habe jetzt mal das Logo einfach ein paar Pixel kleiner gemacht und siehe da ... es funktioniert. Wieso bin ich da nicht gleich drauf gekommen.

Hatte nun noch ein anderes Problem im IE6, dass er eine Linie mit height: 8px; einfach nicht in der richtigen Größe darstellen wollte. Auch wenn ich 1px angegeben habe war es immer ca. 15 px hoch. Das hat wohl mit einem bekannten Problem zu tun, dass der IE6 die Schriftgröße als Minium nimmt. Nachdem ich also overflow:hidden; eingebaut habe hat dies auch funktioniert.

Jetzt muss ich nur noch eine Sache hinbekommen und bin dann froh, wenn es im IE7/6 und FF3/2 gut aussieht!

Trotzdem vielen Dank nochmals für den schnellen Hinweis! Super Forum!

progfrog schrieb:
Das mit dem Abstand könnte am padding deines #navMainWrapper liegen. Da gibts mit IE 6 ja immer Probleme mit dem Box Modell Bug. Ich hasse den wie die Pest -.- Total nervig immer so ne riesige Extrawurst für den IE 6 zu schreiben.

Habe jetzt das Logo testweise nochmals auf die Ursprungsgröße verändert und die padding-Angabe vom #navMainWrapper komplett entfernt. Siehe da, es liegt tatsächlich daran. Jetzt muss ich nur noch die richtige Angabe finden. Am besten nicht unbedingt in em sondern px - was dann hoffentlich eindeutiger ist!?

Vielen Dank - auch für Dein Mitgefühl

!

Gruß,
Steffen