Shopping cart cut off on right side when viewed in Internet Explorer version 7

Market Press works great and looks great with minimal fuss in Firefox and Chrome. Using Internet Explorer Version 7 the shopping cart gets cut off on the right side. I am using the Atahualpa 3.5.3 theme and the classic shopping cart theme. I tried fixing the problem by making the widget area wider in the Atahualpa settings and changing the right padding but that did not help. The website is http://atlasadhesivetape.com
What changes do I need to make?

  • Mason
    • DEV MAN’s Sidekick

    Hiya leichtman,

    That's more of a theme issue than a fault in MarketPress. I took a look at the theme and it's calling the CSS in a rather un-traditional way. This is what allows it to provide loads of options, unfortunately it makes doing custom styling.

    Check the theme's customization options and see if you can make the right-sidebar larger - maybe 300px and see if that helps?

    It's a bit tricky with this theme unfortunately, but give that a try and if that doesn't work, we'll have to get a bit more creative. Thanks!

  • leichtman
    • New Recruit

    I made the sidebar 300px but that did not help in ie7. In Chrome and Firefox it looks great but in IE7 the description makes the cell too wide. there seems to be 4 columns in the shopping cart.
    Column #1 The thumbnail of the item
    Column#2 The Description
    Column #3 The qty
    Column #4 The price.

    In Firefox and chrome the shopping cart fits into the widget because Column #2 is narrow enough. Each line in the description only has three words. In IE7 Column #2 becomes too wide because it displays five words on each line.

    It seems firefox knows to constrain the shopping cart to the size of widget and IE7 doesn't.
    I am trying to find a fix.
    While looking at the code I see:

    <td class="mp_cart_col_product_table"><a href="http://atlasadhesivetape.com/store/products/3-inch-black-gaffers-tape/">3 inch Gaffers Tape - 4 Rolls of one color: Black</a>
    						<td class="mp_cart_col_quant">1
    						</td>

    Seems that there is a missing /td before the new TD class begins.
    How do I fix that?

  • Tammie
    • WordPress Wizard

    To be frank any theme that uses tables as layout which this one seems to be I'd strongly suggest you don't use. This was something used years ago in web design and certainly nothing a modern web designer would do. It's unreliable across browsers and simply causes way too many issues along with being non-semantic.

    That aside:

    div.widget {
        border: 4px solid #EEEEEE;
        display: block;
        font-size: 12px;
        margin: 0 0 10px;
        padding: 10px;
        width: auto;
    }

    Perhaps is the issue - setting width would be my suggestion.

    Whilst it sounds rather dramatic, I would still suggest against that theme though far more even free out there that would be better solutions working in more cases.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.