Lovely IE7 errors again

Hi Chaps,

Got a few issues in IE7 which I am hoping can be resolved. Unfortunately the website is on my local server so I haven’t got a link so I’ve attached some screenshots and relevant CSS which hopefully will help!

Many thanks :slight_smile:

This for the tabs:

.tabs { margin: 25px 0 40px 0; }
.tabs .buttons { }
.tabs .buttons ul { }
.tabs .buttons ul li { text-align: center; height: 16px; cursor: pointer; background: #f2f2f2; border: 1px solid #e5e5e5; padding: 3px 10px 3px 10px; float: left; font-size: 12px; color: #646464; font-weight: bold; }
.tabs .buttons ul { cursor: default; height: 23px; border-top: none; border-left: none; border-right: none; padding: 0; background: #fff; }
.tabs .buttons ul { background: #fff; border-bottom: none; }
.tabs .contents { }
.tabs .contents ul { }
.tabs .contents ul li { display: none; }
.tabs .contents ul { display: block; border: 1px solid #e5e5e5; border-top: none; }
.tabs .contents ul li .box-reviews { color: #666; font-size: 12px; }
.tabs .contents ul li .box-reviews td.title { font-size: 14px; font-weight: bold; color: #666; padding: 2px 0 0 10px; }
.tabs .contents ul li .box-reviews li,
.tabs .contents ul li .form-list li { display: block; }
.tabs .contents ul li .box-reviews li { border-top: 1px solid #e7e7e7; margin-top: 15px; padding-top: 15px; }
.tabs .contents ul li .box-reviews li.first { border-top: none; margin-top: 0; padding-top: 0; }

This HTML and CSS for quantity box etc.

<div class="product-options" id="product-options-wrapper">
			<div class="select-wrapper-configurable">
				<input type="hidden" name="super-attribute-label-532" id="super-attribute-label-532" value="Size"/>
				<select name="super_attribute[532]" id="attribute532" class="required-entry super-attribute-select">
				<!-- <option>Choose an Option...</option> -->

				<!-- <span class="required">&nbsp;*</span> -->
			<div class="select-wrapper-configurable">
				<input type="hidden" name="super-attribute-label-529" id="super-attribute-label-529" value="Cup"/>
				<select name="super_attribute[529]" id="attribute529" class="required-entry super-attribute-select">
				<!-- <option>Choose an Option...</option> -->

				<!-- <span class="required">&nbsp;*</span> -->
            <dd class="last">
			<div class="select-wrapper-configurable">
				<input type="hidden" name="super-attribute-label-80" id="super-attribute-label-80" value="Colour"/>

				<select name="super_attribute[80]" id="attribute80" class="required-entry super-attribute-select">
				<!-- <option>Choose an Option...</option> -->
				<!-- <span class="required">&nbsp;*</span> -->

<div class="product-options-bottom">

    <div class="price-box">
                                                            <span class="regular-price" id="product-price-42_clone">

                    Price <span class="price">£24.50</span>                </span>

    <div class="clear"></div>
    <div class="add-to-cart product-options" style="margin-top:0px; padding-top:0px;">
        <dt><!-- <label style="float:none;">
        </label> --></dt>

        	<!-- <input type="text" name="qty" id="qty" maxlength="12" value="1" title="Qty" class="input-text qty" /></dd> -->
        	<select name="qty" id="qty">










                    <div class="clear"></div>
/* Product Options */
.product-options { float: left; margin:0px 0 0; padding:10px 15px 0px 0px; /* background-color:#f6f6f6; border:1px solid #e4e4e4; */ }
.product-options dt { /*padding:10px 0 0;*/ font-weight:normal; }
.product-options dt label { font-weight:bold; color:#2f2f2f; }
.product-options dt span.required { color:#eb340a; }
.product-options dt .qty-holder { float:right; margin-right:15px; }
.product-options dt .qty-holder label { vertical-align:middle; }
.product-options dt .qty-disabled { background:none; border:0; padding:3px; color:#2f2f2f; }
.product-options dd { /* padding:5px 10px 15px; */ margin:0 0 5px; /* border-bottom:1px solid #e4e4e4; */ }
.product-options dl.last dd.last { border-bottom:0; padding-bottom:5px; margin-bottom:0; }
.product-options dd input.input-text { width:98%; }
.product-options dd input.datetime-picker { width:150px; }
.product-options dd textarea { width:98%; height:8em; }
.product-options dd select { /* width:99%; */ width: 100px; }
.product-options dd .multiselect option { border-bottom:1px dotted #d9e5ee; padding:2px 4px; }
.product-options ul.options-list { margin-right:5px; }
.product-options ul.options-list li { line-height:1.5; padding:2px 0; }
.product-options ul.options-list { float:left; margin-top:3px; }
.product-options ul.options-list input.checkbox { float:left; margin-top:3px; }
.product-options ul.options-list .label { display:block; margin-left:18px; }
.product-options ul.options-list label { font-weight:normal; }
.product-options ul.validation-failed { padding:0 7px; }
.product-options p.note { margin:0; font-size:11px; }
.product-options p.required { margin-bottom:0; padding:15px 0 0; }

/*.product-options-bottom { background-color:#fffada; padding:15px 20px; border:1px solid #e4e4e4; border-top:0; }*/
.product-options-bottom {}
.product-options-bottom .tier-prices { margin:0; padding:0 0 10px; border:0; background:0; }
.product-options-bottom .tier-prices li { background:0; padding:2px 0; color:#E41E26; }
.product-options-bottom .tier-prices .price,
.product-options-bottom .tier-prices .benefit { color:#E41E26; }
.product-options-bottom .price-box { float:left; margin:0; padding:0; display:none; }
.product-options-bottom .price-label { float:left; padding-right:5px; }
.product-options-bottom .price-tax { float:left; }
.product-options-bottom .add-to-cart { float:left; }
.product-shop .product-options-bottom { margin:0 0 10px; }
.product-shop .product-options-bottom .price-box { float:none; margin:0 0 5px; }
.product-shop .product-options-bottom .price-label { float:none; padding-right:0; }
.product-shop .product-options-bottom .price-tax { float:none; }
.product-shop .product-options-bottom .add-to-cart-box { clear:both; float:left; padding-top:12px; }


It’s a little hard to debug this remotely as the code above doesn’t produce the display that you show in your picture :slight_smile: If you could build a working example of the problem it would help us to spot the problem.

Issue one could be haslayout so I would ensure that .tabs has a layout and clears its floated children.

.tabs {
    margin: 25px 0 40px 0;

However there may be also issues of margin collapse (or non collapse ) depending on browser and I’d need some working code to debug further.:slight_smile:

If you are using uls without bullets then remember to set both margin and padding to zero.