Page Layout Breaks when refreshed in IE7

Discussion in 'CSS' started by mediamole, May 17, 2008.

  1. #1
    I'm developing an e-commerce website. During testing I've discovered that when the page is refreshed a few times in IE7 by select the same links over and over again (say 6 - 10 times), the layout breaks and the main content div shifts to the far right of the page.

    [​IMG]

    The bug can be viewed here: testDOTcoDOTuk
    Main CSS used:

    
    /* WRAPPER STYLES  */#wrapper { width:1110px; margin:0 auto; background:url('floral-large-bk.gif') no-repeat top left; }#content-wrapper { width:800px; margin:0 auto;                    text-align:left; 				   border-right:solid #3F0D3E 1px;				   border-left:solid #3F0D3E 1px; 				   }/* BRANDING STYLES  */#branding p { margin:0; padding:0; width:459px; float:left; }#cartlinks  {             height:37px;			width:300px;			background-color:#EC008C; 			background-image:url('superjamm-fashion-slogan.jpg');			background-position:top right;			background-repeat:no-repeat;			float:right;			padding:120px 41px 0 0;			}#branding ul { 			list-style:none;			margin:0; padding:0;			text-align:right;			}			#branding li { display:inline; font-size:1.1em;                text-transform:uppercase;    font-weight:bold;   background:url('square-link-icon.jpg') no-repeat right center;   padding:0 10px 0 4px; }#branding li#noicon { padding-right:0; background-image:none; }#branding li a { text-decoration:none; color:#fff; }#branding li a:hover { text-decoration:underline; }/* NAV STYLES  */#navigation { width:800px;              background:url('nav-bk.jpg') repeat-x bottom left;    height:34px;     position:relative; }#navigation a { color:#fff;                 text-decoration:none; text-transform:uppercase;font-weight:bold;}#navigation a:hover { text-decoration:underline; }#globalnav { margin:0; padding:0 0 0 30px;              list-style:none;width:430px;font-size:1.1em;float:left;  }  #globalnav li { display:inline; padding:0 14px 0 6px;                 background:url('nav-star-icon.jpg') no-repeat right center; line-height:2.8em; }#globalnav li.nobords { padding-left:0; }#search-frm { width:330px;  }#search-frm form { padding:0; margin:0; line-height:normal; position:absolute; top:0px; left:520px; }#search-frm input { vertical-align:middle; }#search-frm input#search-txt { width:140px; }#search-frm input#search-txt { font-size:1.2em; margin-right:3px; color:#DE078C; font-weight:bold;  }/* SHOP NAV STYLES  */#shopnav { width:770px; padding-left:30px; background:url('pink-div-bar.jpg') no-repeat bottom left; padding-bottom:5px; }#supp_nav { width:175px; float:left; }#section-banner-jeans { width:580px; float:right; padding-top:233px; background:url('jeans-banner.jpg') no-repeat top left; }#section-banner-trousers { width:580px; float:right; padding-top:233px; background:url('trousers-banner.jpg') no-repeat top left; }#section-banner-suits { width:580px; float:right; padding-top:233px; background:url('suits-banner.jpg') no-repeat top left; }#section-banner-dresses { width:580px; float:right; padding-top:233px; background:url('dresses-skirts-banner.jpg') no-repeat top left; }#section-banner-tops { width:580px; float:right; padding-top:233px; background:url('ladies-tops-banner.jpg') no-repeat top left; }#section-banner-jackets { width:580px; float:right; padding-top:233px; background:url('jackets-coats-banner.jpg') no-repeat top left; }#section-banner-hoodies { width:580px; float:right; padding-top:233px; background:url('hooded-tops-banner.jpg') no-repeat top left; }#section-banner-jogging { width:580px; float:right; padding-top:233px; background:url('jogging-suits-banner.jpg') no-repeat top left; } #section-banner-shorts { width:580px; float:right; padding-top:233px; background:url('shorts-banner.jpg') no-repeat top left; } #section-banner-bags { width:580px; float:right; padding-top:233px; background:url('bags-banner.jpg') no-repeat top left; }#section-banner-belts { width:580px; float:right; padding-top:233px; background:url('belts-banner.jpg') no-repeat top left; }#section-banner-jeans h1, #section-banner-trousers h1, #section-banner-suits h1, #section-banner-dresses h1, #section-banner-tops h1, #section-banner-jackets h1, #section-banner-hoodies h1, #section-banner-jogging h1, #section-banner-shorts h1, #section-banner-bags h1, #section-banner-belts h1 { margin:0 0 0 5px; padding:0 0 15px 0;                      font-size:1.1em; font-weight:normal;border-bottom:dotted #D5D5D5 1px;width:545px; }/* NEW PRODUCTS HOME PAGE */#new-prods-wrap { width:575px; float:right;}                #new-prods-wrap h2#whats-new-hr { margin:0; padding:0;                     background:url('whats-new-header.jpg') no-repeat top left;                     height:39px;                     text-indent:-99999em;                     }                     #new-prods-links { width:565px; padding:2px 0 0 5px; height:24.6em;             background:#AA1F8D url('categories-bk.jpg') repeat-x bottom left; }                     #new-prods-links h2 { margin:0; padding:0; color:#fff; text-transform:uppercase; font-size:1.4em; background:url('new-prod-star.jpg') no-repeat right center;  }.new-promo-pod { width:128px; padding:0 6px 0 5px; border-right:dashed #fff 1px; height:235px; float:left; }.new-prod-promo-img { margin:5px 0; padding:0; width:128px; height:187px; background:url('new-prod-frame.jpg') no-repeat top left; position:relative; }.new-prod-promo-img img { position:absolute; left:7px; top:7px; }.rangelnk { background:url('link-arrow.gif') no-repeat left center; padding:0 0 0 15px; margin:5px 0; font-size:1.1em; font-weight:bold; }.rangelnk a { color:#fff; text-decoration:none; }.rangelnk a:hover { color:#F79321; }.no-pads { padding-right:0; border-right:none; }/* SHOP NAV STYLES - CATEGORIES LINKS  */#supp_nav h3 { background-image:url('categories-header.jpg');               background-repeat:no-repeat;   background-position:top left;   width:175px; height:43px;   margin:0; padding:0;   }   #supp_nav h3 span { display:none; }#cat-links { width:175px; height:24.4em;             background:#AA1F8D url('categories-bk.jpg') repeat-x bottom left; }#cat-links ul { width:150px; margin:0 auto; border-top:dashed #fff 1px; list-style:none; padding:0; font-size:1.1em; font-weight:bold; }#cat-links li { background:url('link-arrow.gif') no-repeat left center;                 padding-left:23px; line-height:1.8em;border-bottom:dashed #fff 1px; }#cat-links li a { color:#fff; text-decoration:none; }#cat-links li a:hover { color:#F79321; }/* HOME PAGE STYLES  */div#welcome-banner { width:800px; height:122px; padding-top:221px;   background:url('superjamm-welcome-banner.jpg') no-repeat bottom left;   }   div#welcome-banner h1 { margin:0; padding:0 0 0 37px; color:#EC008C; font-size:1.1em; }div#welcome-banner p { width:288px; margin:5px 0 0 0; padding:0 0 0 37px; color:#fff; font-size:1.1em; }/* MAINCONTENT STYLES  */#homepgcontent { width:770px; padding:0 0 5px 30px;    background:url('pink-div-bar.jpg') no-repeat bottom left;   }#maincontent { width:770px; padding:0 0 0 30px;    background:url('pink-div-bar.jpg') no-repeat bottom left;   }   /* FOOTER STYLES  */#footer { width:770px; padding-left:30px;          height:10.7em;  background:url('pink-div-bar.jpg') no-repeat bottom left; padding-bottom:5px;  }  #footer-promo-pod { width:175px; height:107px;                    background:url('promo-footer-bk.jpg') repeat-x bottom left;float:left;}#footer-nav { width:570px; padding-left:25px; float:right; }#footer-nav div { width:190px; float:left; }#footer-nav div h3 { margin:18px 0 0 0; padding:0; }#footer-nav div ul { list-style:none; padding:0; margin:0; }#footer-nav div a { color:#fff; font-size:1.1em; text-decoration:none; line-height:1.6em; }#footer-nav div a:hover { text-decoration:underline; }h3#cust-hr, h3#shop-us-hr, h3#about-hr { height:21px; width:190px; }h3#cust-hr { background:url('customer-service-hr.gif') no-repeat top left; }h3#shop-us-hr { background:url('shopping-with-us-hr.gif') no-repeat top left; }h3#about-hr { background:url('about-superjam-hr.gif') no-repeat top left; }h3#cust-hr span, h3#shop-us-hr span, h3#about-hr span { display:none; }/* SITE CREDITS  */#sitecreds { width:770px; padding-left:30px; font-size:1.1em; }#sitecreds p { margin:12px 0; padding:0; line-height:1.4em; font-weight:bold; }#sitecreds p span { color:#EC008C; padding:0 50px 0 20px; }#sitecreds p a { color:#fff; text-decoration:none; }#sitecreds p a:hover { text-decoration:underline; }/* PRODUCT and SECTION SUMMARY */#product-summary-wrap, #section-summary-wrap { width:740px; padding-right:30px; padding-bottom:30px; }.prod-summary { width:140px;                 padding-right:45px;                float:left;                height:260px;                background:url('prod-dotted-border.gif') repeat-x bottom left;                margin-top:10px;                padding-bottom:5px;                }                                .section-summary { width:140px;                 padding-right:45px;                float:left;                height:250px;                background:url('prod-dotted-border.gif') repeat-x bottom left;                margin-top:10px;                padding-bottom:5px;                }                .prod-summary form, .section-summary form { margin:0; padding:0; float:left; }                                               .prod-sum-img, .sec-sum-img { width:140px; height:192px;                background:url('prod-summary-bk.jpg') no-repeat top left;                position:relative;                margin:0; padding:0;                }                .prod-sum-img img, .sec-sum-img img { position:absolute; left:4px; top:4px; }.prod-sum-details { height:60px; position:relative; }.prod-sum-details h2 { color:#fff; padding:5px 0 0 0; margin:0; font-size:1.1em; font-weight:normal; }.sec-sum-details h2 { color:#EC008C; padding:5px 0 0 0; margin:0; font-size:1.4em; text-transform:uppercase; }.sec-sum-details h2 a { color:#EC008C; text-decoration:none; }.prod-price { color:#EC008C; font-size:2.0em; font-weight:bold; position:absolute; bottom:0; left:0; margin:0; padding:0;  }h2.section-hr { color:#EC008C; font-size:2.4em; margin:10px 0 0 0; padding:0; }/* PRODUCT DETAIL */#prod-detail { width:630px; margin-top:10px; padding-bottom:20px; font-size:1.1em; }#prod-detail-image { width:297px; float:left; }#prod-detail-txt { width:305px; float:right; }#prod-detail-image p { width:287px; margin:0; padding:0;                       background:url('large-prod-bk.jpg') no-repeat top left;                       position:relative; height:421px;                       }                       #prod-detail-image p img { position:absolute; top:5px; left:5px; }h2#prod-detail-name { margin:0; padding:0; color:#fff; font-weight:bold; font-size:1.1em; }                       #prod-detail-price { font-size:2.2em; font-weight:bold; color:#EC008C; margin:0 0 15px 0; padding:0; } #prod-detail-info-txt { background:url('product-div-line.gif') no-repeat bottom left;                        padding-bottom:10px;                        }#prod-detail-info-txt p { margin:8px 0 0 0; }#prod-detail-info-txt p a { color:#EC008C; text-decoration:none; }#prod-detail-info-txt p a:hover { text-decoration:underline; }#prod-detail-choice { background:url('product-div-line.gif') no-repeat bottom left;                        padding-bottom:10px;                        text-align:left;                        width:305px;                        }                        #prod-detail-choice p { margin:0; padding:0; float:left; text-align:left; font-size:2.2em; font-weight:bold; width:105px; }#prod-detail-choice p span { color:#EC008C; }#prod-detail-select { width:150px; float:right; text-align:left; }label { color:#EC008C; }#prod-detail-buy { background:url('product-div-line.gif') no-repeat bottom left;                        padding-bottom:10px;                        text-align:left;                        width:305px;                        }                        #prod-detail-buy p { margin-bottom:0; }p#qty-prompt { margin-bottom:8px; }p#qty-prompt label { color:#fff; }p#qty-prompt input { border:solid 1px #EC008C; font-size:1.2em; }#service-cost { width:125px; float:left; margin-bottom:0; }#service-cost a { color:#EC008C; text-decoration:none; }#service-cost a:hover { text-decoration:underline; }#prod-buy-now { width:180px; float:right; text-align:right; margin-bottom:0; }#back-to-shop { text-align:right; margin:20px 0; }#back-to-shop a { color:#fff; text-decoration:none; }#back-to-shop a:hover { text-decoration:underline; }/* GENERAL CONTENT PAGE STYLES */#general-content { width:730px; padding:20px 40px 30px 30px;    background:url('pink-div-bar.jpg') no-repeat bottom left;   font-size:1.1em;   }#general-content h1, #general-content h2, #general-content h3 { color:#EA018C; margin:0 0 10px 0; padding:0; }#general-content h1 { font-size:2.2em; }#general-content h2#sub-hr { font-size:1.8em; }#general-content h3 { font-size:1.4em; }#general-content p, address { margin:10px 0; padding:0; }#general-content a { color:#EA018C; text-decoration:none; } #general-content a:hover { text-decoration:underline; }#general-content ol, #general-content ul { margin:0 0 0 20px; padding:0; }address { font-style:normal; }#general-content input { font-size:12px; }#general-content table#main-size-chart { width:300px; }#general-content table.tops-chart { width:600px; }#general-content table#main-size-chart th, #general-content table.tops-chart th { background-color:#EA018C; color:#fff; font-weight:bold; width:100px; text-align:center; margin-bottom:10px; }#general-content table#main-size-chart td, #general-content table.tops-chart td { background-color:#ccc; color:#000; font-weight:bold; width:100px; text-align:center; margin-bottom:10px; }#general-content td.headl { text-align:left; }#general-content p#back-to-shop { width:600px; }#cart-btn-tab { margin-top:10px; }#cart-btn-tab td { background-color:#000!important; }#general-content #sup-terms table td { background-color:#000!important; color:#fff; }/* DIV CLEARING STYLES  */.fixclear:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }* html .fixclear { height:1%;}.fixclear { display:block; }
    
    Code (markup):

     
    mediamole, May 17, 2008 IP
  2. mediamole

    mediamole Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Sorry correct address is tesmoleDOTcoDOTuk
     
    mediamole, May 17, 2008 IP
  3. mediamole

    mediamole Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    correct address is testmole[dot]co[dot]uk
     
    mediamole, May 17, 2008 IP
  4. qube99

    qube99 Peon

    Messages:
    75
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You're code is unreadable.

    You built this with Actinic? I didn't know they were still alive. One look at the Actinic website shows why no one is using it. They don't know how to write HTML/CSS, even for their own website. Your problem is Actinic.

    Why not switch to something really good for ecommerce, such as Miva?

    Miva Merchant
     
    qube99, May 18, 2008 IP