Center Column "collapses" in firefox on different computer

The boss keeps letting me know that the product description page collapses when she views a product. We both use the same version of firefox...and mine doesn't collapse...it looks right.

What could be the problem here?

URL please, so we can see the and advise on the problem.

Thank you for having a look! :)
http://store.digitalscrapbookplace.com/index.php?main_page=product_info&products_id=2461

Not exactly sure what "collapses" means, but I don't see any thing odd when viewing the various product info pages.

I am sorry... should have been more clear. :) The middle column shrinks up and moves to the left and the sidebars and everything move over, too... in other words... the three columns are no longer full browser width... it is like it takes on the width of the text??

Very strange! Like Clyde, I saw nothing wrong when I clicked your link. So I clicked on to one of your categories. Still nothing, so for some reason I used the Back button in my browser. Collapsed page!

I haven't a clue why it would do that. Just wanted you to know your boss isn't crazy.

Rob

You might want to correct these validation errors/warnings and see if that has any effect on the problem.

line 6 column 130 - Warning: unescaped & which should be written as &
line 22 column 1 - Warning: <style> isn't allowed in <div> elements
line 171 column 20 - Warning: <img> element not empty or not closed
line 173 column 83 - Warning: <img> element not empty or not closed
line 173 column 161 - Warning: <br> element not empty or not closed
line 179 column 83 - Warning: <img> element not empty or not closed
line 181 column 20 - Warning: <img> element not empty or not closed
line 186 column 16 - Warning: <img> element not empty or not closed
line 188 column 202 - Warning: <br> element not empty or not closed
line 188 column 378 - Warning: <br> element not empty or not closed
line 189 column 4 - Warning: <marquee> is not approved by W3C
line 191 column 16 - Warning: <img> element not empty or not closed
line 318 column 20 - Warning: <img> element not empty or not closed
line 320 column 65 - Warning: <br> element not empty or not closed
line 325 column 27 - Warning: <img> element not empty or not closed
line 326 column 20 - Warning: <img> element not empty or not closed
line 365 column 115 - Warning: unescaped & which should be written as &
line 399 column 34 - Warning: unescaped & which should be written as &
line 400 column 32 - Warning: unescaped & which should be written as &
line 401 column 35 - Warning: unescaped & which should be written as &
line 402 column 35 - Warning: unescaped & which should be written as &
line 403 column 36 - Warning: unescaped & or unknown entity "&.."
line 404 column 33 - Warning: unescaped & which should be written as &
line 405 column 33 - Warning: unescaped & which should be written as &
line 406 column 33 - Warning: unescaped & which should be written as &
line 407 column 33 - Warning: unescaped & which should be written as &
line 408 column 33 - Warning: unescaped & which should be written as &
line 409 column 33 - Warning: unescaped & which should be written as &
line 413 column 35 - Warning: unescaped & which should be written as &
line 414 column 35 - Warning: unescaped & which should be written as &
line 483 column 1 - Warning: <br> element not empty or not closed
line 488 column 327 - Warning: '<' + '/' + letter not allowed here
line 488 column 331 - Warning: '<' + '/' + letter not allowed here
line 508 column 1 - Warning: <br> element not empty or not closed
line 508 column 5 - Warning: <br> element not empty or not closed
line 511 column 1 - Warning: <br> element not empty or not closed
line 511 column 5 - Warning: <br> element not empty or not closed
line 512 column 12 - Warning: <br> element not empty or not closed
line 513 column 25 - Warning: <br> element not empty or not closed
line 514 column 24 - Warning: <br> element not empty or not closed
line 514 column 28 - Warning: <br> element not empty or not closed
line 514 column 32 - Warning: <br> element not empty or not closed
line 330 column 5 - Warning: <script> isn't allowed in <table> elements
line 330 column 5 - Warning: <script> isn't allowed in <table> elements
line 738 column 3 - Warning: missing <td>
line 142 column 1 - Warning: <style> inserting "type" attribute
line 24 column 1 - Warning: <script> inserting "type" attribute
line 171 column 20 - Warning: <img> lacks "alt" attribute
line 173 column 83 - Warning: <img> lacks "alt" attribute
line 179 column 83 - Warning: <img> lacks "alt" attribute
line 181 column 20 - Warning: <img> lacks "alt" attribute
line 186 column 16 - Warning: <img> lacks "alt" attribute
line 191 column 16 - Warning: <img> lacks "alt" attribute
line 197 column 5 - Warning: <td> proprietary attribute "background"
line 318 column 20 - Warning: <img> lacks "alt" attribute
line 325 column 27 - Warning: <img> lacks "alt" attribute
line 326 column 20 - Warning: <img> lacks "alt" attribute

One other thing I noticed. If you're going to use an embeded style within your page instead of in a stylesheet, remember that it should be placed between your

<head>
Style code should go here.
</head>

tags and not within the body of the page.

<style>
body {  background-color: #FEFBEF; color: #000000; margin-top: 10px; margin-right: 0px; margin-left: 0px}
/* ***** DSP styles 2007 ***** */
td.logoarea { background-color: #99CC99; padding: 5px; }
.menutext {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #FFFFFF; text-decoration: none; }
a.menutext:active { color: #FFFFFF; text-decoration: none}
a.menutext:link { color: #FFFFFF; text-decoration: none}
a.menutext:visited { color: #FFFFFF; text-decoration: none}
a.menutext:hover { color: #FFFFFF; text-decoration: none}
.menuarea { background-color: #336633; }
.anylinkcss { position:absolute; visibility: hidden; border:1px solid black; border-bottom-width: 0; font:normal 12px Verdana; line-height: 18px; z-index: 100; background-color: #FEFBEF; width: 205px; }
.anylinkcss a { width: 100%; display: block; text-indent: 3px; border-bottom: 1px solid black; padding: 1px 0; text-decoration: none; font-weight: bold; text-indent: 5px; }
.anylinkcss a:hover { background-color: #99CC99; }
td.contentarea {padding: 5px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; }
.curvetopL { background-image: url(/images/design/2007/topcurveL.gif); background-repeat: no-repeat } 
.curvetopC { background-image: url(/images/design/2007/topcurveC.gif); background-repeat: repeat-x ; background-color: #99CC99;} 
.curvetopR { background-image: url(/images/design/2007/topcurveR.gif); background-repeat: no-repeat } 
.menucolumn {  background-color: #E9E6DC}
#pagecontent { position: absolute; left: 0px; top: 225px; visibility: visible; z-index: 1 }
.footerline {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF}
a.footerlink:active { color: #FFFFFF; text-decoration: underline}
a.footerlink:link { color: #FFFFFF; text-decoration: underline}
a.footerlink:visited { color: #FFFFFF; text-decoration: underline}
a.footerlink:hover { color: #FFFFFF; text-decoration: underline }</style>

We are using barebones template. I am not sure how to track down or fix these errors. Is it complex or easy? :)

clydejones:

You might want to correct these validation errors/warnings and see if that has any effect on the problem.

line 6 column 130 - Warning: unescaped & which should be written as &
line 22 column 1 - Warning: <style> isn't allowed in <div> elements
line 171 column 20 - Warning: <img> element not empty or not closed
line 173 column 83 - Warning: <img> element not empty or not closed
line 173 column 161 - Warning: <br> element not empty or not closed
line 179 column 83 - Warning: <img> element not empty or not closed
line 181 column 20 - Warning: <img> element not empty or not closed
line 186 column 16 - Warning: <img> element not empty or not closed
line 188 column 202 - Warning: <br> element not empty or not closed
line 188 column 378 - Warning: <br> element not empty or not closed
line 189 column 4 - Warning: <marquee> is not approved by W3C
line 191 column 16 - Warning: <img> element not empty or not closed
line 318 column 20 - Warning: <img> element not empty or not closed
line 320 column 65 - Warning: <br> element not empty or not closed
line 325 column 27 - Warning: <img> element not empty or not closed
line 326 column 20 - Warning: <img> element not empty or not closed
line 365 column 115 - Warning: unescaped & which should be written as &
line 399 column 34 - Warning: unescaped & which should be written as &
line 400 column 32 - Warning: unescaped & which should be written as &
line 401 column 35 - Warning: unescaped & which should be written as &
line 402 column 35 - Warning: unescaped & which should be written as &
line 403 column 36 - Warning: unescaped & or unknown entity "&.."
line 404 column 33 - Warning: unescaped & which should be written as &
line 405 column 33 - Warning: unescaped & which should be written as &
line 406 column 33 - Warning: unescaped & which should be written as &
line 407 column 33 - Warning: unescaped & which should be written as &
line 408 column 33 - Warning: unescaped & which should be written as &
line 409 column 33 - Warning: unescaped & which should be written as &
line 413 column 35 - Warning: unescaped & which should be written as &
line 414 column 35 - Warning: unescaped & which should be written as &
line 483 column 1 - Warning: <br> element not empty or not closed
line 488 column 327 - Warning: '<' + '/' + letter not allowed here
line 488 column 331 - Warning: '<' + '/' + letter not allowed here
line 508 column 1 - Warning: <br> element not empty or not closed
line 508 column 5 - Warning: <br> element not empty or not closed
line 511 column 1 - Warning: <br> element not empty or not closed
line 511 column 5 - Warning: <br> element not empty or not closed
line 512 column 12 - Warning: <br> element not empty or not closed
line 513 column 25 - Warning: <br> element not empty or not closed
line 514 column 24 - Warning: <br> element not empty or not closed
line 514 column 28 - Warning: <br> element not empty or not closed
line 514 column 32 - Warning: <br> element not empty or not closed
line 330 column 5 - Warning: <script> isn't allowed in <table> elements
line 330 column 5 - Warning: <script> isn't allowed in <table> elements
line 738 column 3 - Warning: missing <td>
line 142 column 1 - Warning: <style> inserting "type" attribute
line 24 column 1 - Warning: <script> inserting "type" attribute
line 171 column 20 - Warning: <img> lacks "alt" attribute
line 173 column 83 - Warning: <img> lacks "alt" attribute
line 179 column 83 - Warning: <img> lacks "alt" attribute
line 181 column 20 - Warning: <img> lacks "alt" attribute
line 186 column 16 - Warning: <img> lacks "alt" attribute
line 191 column 16 - Warning: <img> lacks "alt" attribute
line 197 column 5 - Warning: <td> proprietary attribute "background"
line 318 column 20 - Warning: <img> lacks "alt" attribute
line 325 column 27 - Warning: <img> lacks "alt" attribute
line 326 column 20 - Warning: <img> lacks "alt" attribute

A lot of relatively minor errors are coming from the product descriptions, I'm not sure if it's due to the WYSIWYG or the person writing the descriptions.

As for the other errors, someone had to put them there manually, so that person should be able to find them in the template files.

If you manage to get a page to validate successfully as XHTML (or at least closely) and the bug still occurs, then I'll take another look. I haven't been able to reproduce the error on Firefox 2.0.0.4 for Windows.

Not sure why it collapses like that but try adding a width:100% to the center column td.

Thank you, Kim.

The designer used css and I tried changing the following to add the width of 100% and it still shrinks pretty bad - we have the same collapse problem on the page 3 of 3 in the ordering process, too.

.centerColumn {
padding: 3px;
width: 100%;
}

I added "width: 100%;" to the above style.

Any other thoughts?

Kim:

Not sure why it collapses like that but try adding a width:100% to the center column td.

Is there another value or column I can try to change?

ksoup:

Thank you, Kim.

The designer used css and I tried changing the following to add the width of 100% and it still shrinks pretty bad - we have the same collapse problem on the page 3 of 3 in the ordering process, too.

.centerColumn {
padding: 3px;
width: 100%;
}

I added "width: 100%;" to the above style.

Any other thoughts?

As mentioned several months ago, you'll need to fix the errors before you can have any reasonable expectation of the site working properly.

I just checked the page link you gave back near the beginning of the thread and it still comes out with 133 errors and does not validate. Check it yourself at the Validators link at <www.w3.org>

If the page still acts up after you've fixed up the code you can count on more help here, but until then ...

Rob

Hi Rob,

The only thing we have in our coding in the product description is <br> and some minor html basic code to make the text look right. The rest of the page is template driven.

I am thinking we need to just find another template because as much as we like this one, it just doesn't seem to want to cooperate.

rstevenson:

As mentioned several months ago, you'll need to fix the errors before you can have any reasonable expectation of the site working properly.

I just checked the page link you gave back near the beginning of the thread and it still comes out with 133 errors and does not validate. Check it yourself at the Validators link at <www.w3.org>

If the page still acts up after you've fixed up the code you can count on more help here, but until then ...

Rob

.centershop {width:100%}

Add the above to your css file.

And actually, you can't blame the errors on the template.... If you view the template at (sorry, site offline), it doesn't have the shrinking problem, AND it validates just fine:

**Test site without the shrinking problem

Validation Link for the test site

Validation Link for your home page
**
Also, I notice that your website uses .centershop instead of .centerColumn, which, if I remember correctly tells me you are using a old version of zen cart, which is probably the crux of many issues you are having. Switch to another template, and you'll have the same problems, if not more.

Just adding that fixed the problem. I wonder if we downloaded the wrong template. All said... thanks...

I am going through each and every error on the validation, and fixing the minor things.... but the template works just fine before even looking at the validator again

thank you for your time.

jettrue:

.centershop {width:100%}

Add the above to your css file.

And actually, you can't blame the errors on the template.... If you view the template at (sorry, site offline), it doesn't have the shrinking problem, AND it validates just fine:

**Test site without the shrinking problem

Validation Link for the test site

Validation Link for your home page
**
Also, I notice that your website uses .centershop instead of .centerColumn, which, if I remember correctly tells me you are using a old version of zen cart, which is probably the crux of many issues you are having. Switch to another template, and you'll have the same problems, if not more.

Down to just 3 errors now...

They have to do with script and styles being in the body rather than the head.

ksoup:

I wonder if we downloaded the wrong template.

What version of zen cart are you using? If I remember correctly, centershop was back in the days of 1.2.x versions of zen cart. So the errors you are getting may have nothing to do with the template. Also, you can check to make sure you downloaded the latest version of the template.

The errors actually have to do with placing the javascript and the css in the head and not the body. :)

jettrue:

What version of zen cart are you using? If I remember correctly, centershop was back in the days of 1.2.x versions of zen cart. So the errors you are getting may have nothing to do with the template. Also, you can check to make sure you downloaded the latest version of the template.