Page breaks after refreshing a few times in IE7

mediamole
avatar
rank Regular

Regular


Posts: 15
Joined: 2007-04-11
Location: UK

Posted: Sat, 2008-05-17 18:00

I'm developing an e-commerce website. During testing I've discovered that when the page is refreshed a few times in IE7, the layout breaks and the main content div shifts to the far right of the page.

The bug can be view here: http://www.testmole.co.uk

CSS:

/* 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; }

Thanks for help.

Garry
http://www.mediamole.net