Lovely IE7 errors again

HTML & CSS
1

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 li.space { cursor: default; height: 23px; border-top: none; border-left: none; border-right: none; padding: 0; background: #fff; }
.tabs .buttons ul li.active { background: #fff; border-bottom: none; }
.tabs .contents { }
.tabs .contents ul { }
.tabs .contents ul li { display: none; }
.tabs .contents ul li.active { 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">
    
    <dl>
            <dd>
			<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> -->
				<option>Size</option>

				</select>
				<!-- <span class="required">&nbsp;*</span> -->
			</div>
        </dd>
            <dd>
			<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> -->

				<option>Cup</option>
				</select>
				<!-- <span class="required">&nbsp;*</span> -->
			</div>
        </dd>
            <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> -->
				<option>Colour</option>
				</select>
				<!-- <span class="required">&nbsp;*</span> -->
			</div>
        </dd>
        </dl>

<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>



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

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

								<option>4</option>
								<option>5</option>
								<option>6</option>
								<option>7</option>
								<option>8</option>
								<option>9</option>

								<option>10</option>
								<option>11</option>
								<option>12</option>
								<option>13</option>
								<option>14</option>
								<option>15</option>

								<option>16</option>
								<option>17</option>
								<option>18</option>
								<option>19</option>
								<option>20</option>
								<option>21</option>

								<option>22</option>
								<option>23</option>
								<option>24</option>
								<option>25</option>
								<option>26</option>
								<option>27</option>

								<option>28</option>
								<option>29</option>
								<option>30</option>
								<option>31</option>
								<option>32</option>
								<option>33</option>

								<option>34</option>
								<option>35</option>
								<option>36</option>
								<option>37</option>
								<option>38</option>
								<option>39</option>

								<option>40</option>
								<option>41</option>
								<option>42</option>
								<option>43</option>
								<option>44</option>
								<option>45</option>

								<option>46</option>
								<option>47</option>
								<option>48</option>
								<option>49</option>
								<option>50</option>
				        	</select>

        </dl>
            </div>
</div>

                    <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 input.radio { 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; }

2

HI,

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;
    width:100&#37;;
    overflow:hidden;
}

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.