Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 985
  • Last Modified:

Problems with CSS

Dear Experts, if you take a look at http://www.wishesforkisses.co.uk/products/Copy-of-Bracelet.html in ie 6 this page will look fine, in ie 7 or firefox the panel to the right of the big image overlaps the photo and for the life of me i cant work out why.  I have attached the css used and the source for the page is below.

Any help greatly appreciated.

Thank you
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Copy of Bracelet - Wishes for Kisses</title>
	
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="generator" content="Interspire Shopping Cart" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />	
	<meta http-equiv="Content-Style-Type" content="text/css" />
 
	<link href="http://www.wishesforkisses.co.uk/templates/Electronics/Styles/magenta.css" type="text/css" rel="stylesheet" />
	<link href="http://www.wishesforkisses.co.uk/templates/Electronics/Styles/styles.css" type="text/css" rel="stylesheet" />
	<link href="http://www.wishesforkisses.co.uk/templates/Electronics/Styles/iselector.css" type="text/css" rel="stylesheet" />
    <link href="http://www.wishesforkisses.co.uk/templates/Electronics/Styles/w4k.css" type="text/css" rel="stylesheet" />
 
	<!--[if IE]>
	  <link rel="stylesheet" type="text/css" href="http://www.wishesforkisses.co.uk/templates/Electronics/Styles/ie.css" />
	<![endif]-->
 
	<!-- Tell the browsers about our RSS feeds -->
	
 
	<!-- Include visitor tracking code (if any) -->
	<script type="text/javascript" src="http://www.wishesforkisses.co.uk/index.php?action=tracking_script"></script>
	
	<link href="http://www.wishesforkisses.co.uk/javascript/jquery/plugins/lightbox/lightbox.css" type="text/css" rel="stylesheet" />
 
	
 
	<script type="text/javascript" src="http://www.wishesforkisses.co.uk/javascript/jquery.js"></script>
	<script type="text/javascript" src="http://www.wishesforkisses.co.uk/javascript/menudrop.js"></script>
	<script type="text/javascript" src="http://www.wishesforkisses.co.uk/javascript/common.js"></script>
	<script type="text/javascript" src="http://www.wishesforkisses.co.uk/javascript/iselector.js"></script>
    <script src="/dw_rotator.js" type="text/javascript"></script>
	<script src="/dw_random.js" type="text/javascript"></script>    
 
	<script type="text/javascript">
	//<![CDATA[
	// Ensure that all product lists are the same height
	$(document).ready(function() {
		if(typeof(DesignMode) != 'undefined') {
			return;
		}
		var maxHeight = 0;
			$('.Content .ProductList li').each(function() {
				if($(this).height() > maxHeight) {
					maxHeight = $(this).height();
				}
		});
		$('.Content .ProductList li').css('height', maxHeight);
	});
	//]]>
	</script>
	
	<script type="text/javascript" src="/javascript/quicksearch.js"></script>
 
	
 
</head>
 
<body>
	<script type="text/javascript" src="/javascript/product.js"></script>
	<div id="Container">
					<div id="TopMenu">
			<ul style="display:">
				<li style="display:" class="First"><a href="http://www.wishesforkisses.co.uk/account.php">My Account</a></li>
				<li style="display:"><a href="http://www.wishesforkisses.co.uk/orderstatus.php">Order Status</a></li>
				<li style="display:"><a href="http://www.wishesforkisses.co.uk/wishlist.php">Wish List</a></li>
				
				<li style="display:"><a href="http://www.wishesforkisses.co.uk/cart.php">View Cart </a></li>
				<li style="display:">
					<div>
						<a href='http://www.wishesforkisses.co.uk/login.php'>Sign in</a> or <a href='http://www.wishesforkisses.co.uk/login.php?action=create_account'>create an account</a>
					</div>
				</li>
			</ul>
			<br class="Clear" />
		</div>
		<div id="Outer">
			<div id="Header">
							<style type="text/css">
			<!--
			.miniText {
				font-family: Arial, Helvetica, sans-serif;
				font-size: 10px;
				color: #333333;
				text-decoration: none;
			}
			.miniText a:link{
				font-family: Arial, Helvetica, sans-serif;
				font-size: 10px;
				color: #333333;
				text-decoration: none;
			}
			.miniText a:visited{
				font-family: Arial, Helvetica, sans-serif;
				font-size: 10px;
				color: #333333;
				text-decoration: none;
			}
			.miniText a:hover{
				font-family: Arial, Helvetica, sans-serif;
				font-size: 10px;
				color: #333333;
				text-decoration: underline;
			}
			-->
			</style>
            <form action="http://www.wishesforkisses.co.uk/search.php" method="get" onsubmit="return check_small_search_form()">
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td height="130" valign="bottom" style="padding-bottom:5px"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td colspan="2"><div align="right">
                          <input type="text" name="search_query" id="search_query" class="Textbox" value="" />
                      </div></td>
                      <td width="110"><div align="right">
                          <input type="submit" class="buttonPink" name="button" id="button" value="Search" />
                      </div></td>
                    </tr>
                    <tr>
                      <td colspan="3" class="miniText"><div align="right"><a href="http://www.wishesforkisses.co.uk/search.php?mode=advanced"><strong>Advanced Search</strong></a> | <a href="http://www.wishesforkisses.co.uk/search.php?action=Tips">Search Tips</a></div></td>
                    </tr>
                  </table></td>
                </tr>
              </table>
            </form>
			<script type="text/javascript">
				var QuickSearchAlignment = 'left';
				var QuickSearchWidth = '232px';
				lang.EmptySmallSearch = "You forgot to enter some search keywords.";
			</script>
 
			</div>
			<div id="Menu">
		<ul>
			<li class="First"><a href="http://www.wishesforkisses.co.uk/">Home</a></li>
				<li class=" ">
		<a href="http://www.wishesforkisses.co.uk/pages/About.html"><span>About</span></a>
		
	</li>	<li class=" ">
		<a href="http://www.wishesforkisses.co.uk/pages/Gallery.html"><span>Gallery</span></a>
		
	</li>	<li class=" ">
		<a href="http://www.wishesforkisses.co.uk/pages/Commision-Jewellery.html"><span>Commision Jewellery</span></a>
		
	</li>	<li class=" ">
		<a href="http://www.wishesforkisses.co.uk/pages/Events.html"><span>Events</span></a>
		
	</li>	<li class=" ">
		<a href="http://www.wishesforkisses.co.uk/pages/Shipping-%26-Returns.html"><span>Shipping &amp; Returns</span></a>
		
	</li>	<li class=" ">
		<a href="http://www.wishesforkisses.co.uk/pages/Contact.html"><span>Contact</span></a>
		
	</li>
		</ul>
	</div>
		
 
	<div id="Wrapper">
 
		<div class="Content Wide WideWithLeft" id="LayoutColumn2">
			<div class="Block Moveable PrimaryProductDetails" id="ProductDetails">
	<div class="BlockContent">
		<div class="ErrorMessage" style="clear:both;display:none">
			
		</div>
		<div class="ProductThumb">
			<script type="text/javascript" src="/javascript/jquery/plugins/lightbox/lightbox.js"></script>
<div id="LightBoxImages" style="display: none;">
	<a href="http://www.wishesforkisses.co.uk/product_images/p/ayedo__14501.jpg" title="Copy of Bracelet">&nbsp;</a>
</div>
 
<script type="text/javascript">
	var originalImages = '';
	function showProductImageLightBox() {
		if($('body').attr('currentVariation') != '' && typeof($('body').attr('currentVariation')) != "undefined") {
			$('#LightBoxImages').html('<a href="'+$('body').attr('currentVariationImage')+'">&nbsp;</a>');
		}
		else {
			$('#LightBoxImages').html(originalImages);
		}
		initProductLightBox();
		$('#LightBoxImages a:first').trigger('click');
	}
	function initProductLightBox() {
		$('#LightBoxImages a').lightBox({
			imageLoading: '/javascript/jquery/plugins/lightbox/images/lightbox-ico-loading.gif',
			imageBtnPrev: '/javascript/jquery/plugins/lightbox/images/lightbox-btn-prev.gif',
			imageBtnNext: '/javascript/jquery/plugins/lightbox/images/lightbox-btn-next.gif',
			imageBtnClose: '/javascript/jquery/plugins/lightbox/images/lightbox-btn-close.gif',
			imageBlank: '/javascript/jquery/plugins/lightbox/images/lightbox-blank.gif',
			fixedNavigation: true
		});
	}
	$(document).ready(function() { originalImages = $('#LightBoxImages').html(); });
	//]]>
</script>
			<a href="#" onclick="showProductImageLightBox(); return false;"><img class="detailProductImageBorder" width="300" src="http://www.wishesforkisses.co.uk/product_images/p/ayedo__14501.jpg" alt="" /></a>
			<p style="display:">
				<a href="#" onclick="showProductImageLightBox(); return false;" class="ViewLarger">Click to enlarge</a>
			</p>
		</div>
		<div class="ProductMain">
			<h2>Copy of Bracelet</h2>
 
			<dl class="ProductDetailsGrid">
				<dt style="display:none">RRP:</dt>
				<dd style="display:none"></dd>
				
				<dt style="">Price:</dt>
				<dd style=""><em class="ProductPrice VariationProductPrice">£39.99</em>  </dd>
 
				<dt style="display: none" class="ProductSKU">SKU:</dt>
				<dd style="display: none" class="ProductSKU"><span class="VariationProductSKU"></span></dd>
 
				<dt style="display: none">Vendor:</dt>
				<dd style="display: none"></dd>
				
				<dt style="display: none">Brand:</dt>
				<dd style="display: none"><a href=""></a></dd>
 
				<dt style="display: none">Weight:</dt>
				<dd style="display: none"><span class="VariationProductWeight"></span></dd>
 
				<dt style="display: none">Rating:</dt>
				<dd style="display: none">
					<img width="64" height="12" src="http://www.wishesforkisses.co.uk/templates/Electronics/images/IcoRating0.gif" alt="" />
					<span style="display:none">(<a href="#reviews"></a>)</span>
				</dd>
 
				<dt style="display: none">Availability:</dt>
				<dd style="display: none"></dd>
 
				<dt style="display: none">Shipping:</dt>
				<dd style="display: none"></dd>
 
				<dt style="display: none;" class="InventoryLevel">Current Stock:</dt>
				<dd style="display: none;" class="InventoryLevel"><span class="VariationProductInventory"></span></dd>
				
				<dt style="display: none">Gift Wrapping:</dt>
				<dd style="display: none"></dd>
			</dl>
			<hr />
 
 
 
<form method="post" action="http://www.wishesforkisses.co.uk/cart.php" onsubmit="return check_add_to_cart(this, true)"  enctype="multipart/form-data">
	<input type="hidden" name="action" value="add" />
	<input type="hidden" name="product_id" value="2" />
	<input type="hidden" name="variation_id" class="CartVariationId" value="" />
	<input type="hidden" name="currency_id" value="" />
	<dl class="ProductAddToCart">
		<dt>Metal:</dt><dd class="ProductOptionList"><strong></strong>
<ul class="ProductOptionList">
		<li>
		<label><input name="variation[1]" type="radio" class="RadioButton" value="1"  /> Gold</label>
	</li>	<li>
		<label><input name="variation[1]" type="radio" class="RadioButton" value="2"  /> Silver</label>
	</li>
</ul></dd>
		
		<dt class="QuantityInput" style="display: ;">Quantity:</dt>
		<dd class="AddCartButton" style="display: ">
			<span class="FloatLeft" style="display: ;"><span style="padding: 0; margin: 0;"><input size="2" maxlength="2"  name="qty[]" id="text_qty_" class="qtyInput" value="1"/></span>
</span>
			<div class="BulkDiscount">
				<input type="image" src="http://www.wishesforkisses.co.uk/templates/Electronics/images/magenta/AddCartButton.gif" alt="" />
				<div class="BulkDiscountLink" style="display: none;"><a href="#" onclick="$.iModal({data: $('#ProductDetailsBulkDiscountThickBox').html(), width: 600}); return false;">Buy in bulk and save</a></div>
			</div>
		</dd>
	</dl>
</form>
 
 
 
<script type="text/javascript">
lang.OptionMessage = "Please choose an option to add this product to your cart.";
lang.VariationSoldOutMessage = "The selected product combination is currently unavailable.";
lang.InvalidQuantity = "Please enter a valid product quantity.";
lang.EnterRequiredField = "Please enter the required field(s).";
lang.InvalidFileTypeJS = "The file type of the file you are trying to upload is not allowed for this field.";
var ShowAddToCartQtyBox = "1";
</script>
<script type="text/javascript">
 var VariationList = new Array();
 VariationList[3] = { combination: '1',  saveAmount: '',  price: '£39.99',  sku: '',  weight: '2.00 LBS',  thumb: '',  image: '',  instock: true};
 VariationList[5] = { combination: '2',  saveAmount: '',  price: '£39.99',  sku: '',  weight: '2.00 LBS',  thumb: '',  image: '',  instock: true};
</script>
		</div>
		<br class="Clear" />
		<hr />
	</div>
</div>
			<div class="Block Moveable" id="ProductDescription">
	<h3>Product Description</h3>
	<div class="ProductDescriptionContainer">
		Double Bracelet is just the most stunning modern vintage design with 8mm round diamante beads and a wonderful choice 6mm glass coloured pearls or fresh water pearls. Approx length: 6" with 2" extender chain. Please be aware that this bracelet is not suitable to be worn with fine or lace fabrics as the glitter balls catch and can mark the fabric.<br/>FEATURED&nbsp;IN YOU & YOUR WEDDING.<br/><br/>
	</div>
	<hr />
</div>
			
			
			
            <div class="Block Moveable AddToWishlist" id="SideProductAddToWishList" style="display:">
	<h2>Add to Wish List</h2>
	<div class="BlockContent">
		<form name="frmWishList" id="frmWishList" action="http://www.wishesforkisses.co.uk/wishlist.php" method="get">
			<input type="hidden" name="action" value="add" />
			<input type="hidden" name="product_id" value="2" />
			<p>Click the button below to add the Copy of Bracelet to your wish list.</p>
			<p></p>
			<p><input type="image" src="http://www.wishesforkisses.co.uk/templates/Electronics/images/magenta/WishlistButton.gif" alt="Add to Wish List" /></p>
		</form>
	</div>
</div>
 
            
			<div class="Block Moveable" id="ProductByCategory">
	<h3>Find Similar Products by Category</h3>
	<div class="FindByCategory">
		<ul>
	<li><a href="http://www.wishesforkisses.co.uk/categories/Bracelets/">Bracelets</a></li>
</ul>
 
	</div>
	<hr  class="Clear" />
</div>
			
					</div>
  <div class="Right" id="LayoutColumn3">
							<div class="Block CategoryList Moveable" id="SideCategoryList">
					<h2>Categories</h2>
					<div class="BlockContent">
						<ul>
								<li class=""><a href="http://www.wishesforkisses.co.uk/categories/Bracelets/">Bracelets</a>
	
	</li>	<li class=""><a href="http://www.wishesforkisses.co.uk/categories/Earrings/">Earrings</a>
	
	</li>	<li class=""><a href="http://www.wishesforkisses.co.uk/categories/Necklaces/">Necklaces</a>
	
	</li>	<li class=""><a href="http://www.wishesforkisses.co.uk/categories/Sets/">Sets</a>
	
	</li>
						</ul>
					</div>
				</div>
			
			
			
			<div class="Block Moveable SideRecentlyViewed" style="display: " id="SideProductRecentlyViewed">
	<h2>You Recently Viewed...</h2>
	<div class="BlockContent">
		<script type="text/javascript">
		lang.CompareSelectMessage = 'Please choose at least 2 products to compare.';
		</script>
		<form name="frmCompare" id="frmCompare" action="http://www.wishesforkisses.co.uk/compare/" method="get" onsubmit="return compareProducts('http://www.wishesforkisses.co.uk/compare/')">
			<ul class="ProductList">
				<li>
	<div class="ComparisonCheckbox">
		<input style="display:none" type="checkbox" class="CheckBox" name="compare_product_ids" value="2" onclick="product_comparison_box_changed(this.checked)" />
	</div>
	<div class="ProductImage">
		<a href='http://www.wishesforkisses.co.uk/products/Copy-of-Bracelet.html' ><img src='http://www.wishesforkisses.co.uk/product_images/p/ayedo__14501_thumb.jpg' alt='' /></a>
	</div>
	<div class="ProductDetails">
		<input type="hidden" name="ProductDetailsID" class="ProductDetailsID" value="2" />
		<strong><a href="http://www.wishesforkisses.co.uk/products/Copy-of-Bracelet.html">Copy of Bracelet</a></strong>
		<em>£39.99</em>
		<span class="Rating Rating0"><img src="http://www.wishesforkisses.co.uk/templates/Electronics/images/IcoRating0.gif" alt="" style="display: none" /></span>
		<div class="ProductActionAdd" style="display:;">
			<strong><a href="http://www.wishesforkisses.co.uk/products/Copy-of-Bracelet.html">Choose Options</a></strong>
		</div>
	</div>
</li>
			</ul>
 
			<div class="CompareButton" style="display:none">
				<input type="image" value="Compare Selected" src="http://www.wishesforkisses.co.uk/templates/Electronics/images/magenta/CompareButton.gif" />
			</div>
		</form>
	</div>
</div>
 
		</div>
	</div>
	<!--<link href="../Styles/w4k.css" rel="stylesheet" type="text/css" /> -->
 
 
		<table width="100%" border="0" cellspacing="0" cellpadding="3">
  <tr>
    <td width="73%" class="footMenu" style="padding-left:5px">Home : About : Gallery : Commision Jewellery: Shipping &amp; Returns : Contact</td>
    <td width="27%" class="footMenu" style="padding-right:5px"><div align="right">Copyright 2009 Wishes for Kisses<br />
    All prices are in <span title='Default Currency'>GBP</span>.</div></td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
</table>
 
 
</div>
</body>

Open in new window

0
watersidedesigns
Asked:
watersidedesigns
1 Solution
 
SRigneyCommented:
The image is 300 px wide, but is being displayed in a floating div with a width of 190.  IE6 will auto expand the div to contain the contents, IE7 and Firefox follow the W3C standard and leave the width of the div as it is set.

You can probably fix it by making the width of 310px

.PrimaryProductDetails .ProductThumb {
float:left;
text-align:center;
width:310px;
}

0
 
watersidedesignsAuthor Commented:
Many thanks SRigney - can't believe i missed that one!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now