Minicart "breaks" when 0 items in CSS page

[ricksterv4n1x8]

I have a all-CSS based page laid out (no tables) and I have the minicart set up to work. When you first see the page, the layout is all messed up because there are no items in the shopping cart. By adding an item to the cart, the layout works properly. However, it breaks again when you empty the cart.

It seems to me that the JS might be, for some reason, adding an extra DIV when the items are 0 and this is screwing things up. Any suggestions as to how to fix this?

See for yourself: The test page is at www<dot>algosolutions<dot>com<slash>store<slash>index4<dot>html

[robm]

If you look at your mini-cart code, you have:

Code: Select all

<script language="javascript">
...
document.write("<div style=\"color: #000000;");
document.write("background-color: transparent;");
document.write("text-align: left;");
document.write("font-family: Verdana, Arial, Helvetica, sans-serif;");
document.write("font-size: 8pt;");
document.write("\">\n");

So, you have 1 open div. But, if the cookie is blank, you use:

Code: Select all

if (start == -1)  //No cart cookie
{
  document.write("</div>\n");
}
else   //cart cookie is present
{
...
...
  } // end while loop

  //close minicart HTML
  document.write("</div>\n");
</script>

Which will output 2 closing divs as the last closing div is outside the else {} section. Move the "close minimart HTML" document.write line inside the else {} section (so the last closing div is not added for the no cookie case) and it should work fine.

It also looks like you're missing the closing curly bracket for the else section, as there seems to be a mismatch in brackets.

[stilfx]

I applaud you for trying to incorporate web standards into your template.

However, those standards aren't meant to put form over function. Tables to serve a purpose — to format data into columns and rows, just like the mini-cart data.

The reason for table-less layouts is only to lasso tables back into their intended purpose and use semantic markup to form the layout and design of the page.

Enough rant.. on to your issue.
I suggest you go back to tables for the mini-cart data. I see how you intend your page to work in IE and FF on a PC. But be warned, your mini-cart doesnt even show up (item or no items) in Safari or FireFox on a Mac.

Also, something else is amiss with your layout. If you notice, you have horz scroll bars showing (im at 1280x1024) which leads me to believe you have a stray DIV or something?

Here's a little tip for working with divs in a table-less layout. Set each div (one by one) to have a border, like border:1px solid red; just temporarily. That way you get a visual until you find the offending div, and get the layout under control.

[ricksterv4n1x8]

Great advice, thanks! I altered the code as you suggested and it works great. This probably saved me a few frustrating days of hacking. . .

I still have some work to do on my CSS as this page was thrown up rather quickly.

A concern, though, now is the compatibility with Macs. Is it really true that the minicart does not work on Safari or FireFox for Macs if I use all-CSS? Is there a specific reason why? Any suggestions?

[stilfx]

Wow, you have some crazie positioning going on there.

1) Horz scroll bars:
..at quick glance, that top menu you're using looks to be "pushing" the site out of whack and forcing the browser to add horz scroll bars.

Code: Select all

<div id="menuholder"><menumachine name="algo_complete" id="m3ump0p1">
            <csobj t="Component" csref="http://www.algosolutions.com/menumachine/algo_complete/menuspecs.menudata"><noscript>
                  <p><a class="mm_no_js_link" href="http://www.algosolutions.com/menumachine/algo_complete/navigation.html">Site Navigation</a></p>
               </noscript> </csobj>
            <script type="text/javascript"><!--
var mmfolder=/*URL*/"http://www.algosolutions.com/menumachine/",zidx=1000;
//--></script>
            <script type="text/javascript" src="http://www.algosolutions.com/menumachine/menumachine2.js"></script>
            <script type="text/javascript" src="http://www.algosolutions.com/menumachine/algo_complete/menuspecs.js"></script>
         </menumachine>
      </div>


I've never seen code like that before, but you may want to constrain that menu's container div — menuholder — to a specific width, I measure the menu to be about 845px. That might solve that issue.

- - -


2) The mini-cart not showing:
I'd prob attribute this to the "positioning" your using for "contentwrapper". As far as I can tell there is no real need for the relative positioning, try removing it. You'll still be able to use your top and left margins. I have a feeling column3 isn't letting the cart in column2 push down once you add an item to the cart.

Just a theory, but I bet thats at least part of the issue.

[ricksterv4n1x8]

Thanks Stilfx. I have mades some modifications to clean things up. The scroll bars have gone away after following your suggestions. I have also removed the relative positioning on my contentwrapper div.

Can you now see the cart on your Mac?

Thanks