Hi all,
In IE I am having a problem with some products dropping down a line not quite sure why does anyone have a solution.
Check it out here it on line 3, 3 items are droppting down a line it doesn;t seem to happen in Firefox.
http://www.laravintage.com/category/all?page=4
Thanks
I have just had a look in IE8 and it looks like the last product box on the homepage and other pages is dropping down slighty anyone got any a solution for this?
Thanks
thanks i’ve sorted it
The last product on the home page is dropping in all browsers because you have added a class of .sold to it which you have applied 34px top padding. If you remove the top padding the element will be level.
.sold {
color:#07BDD6;
float:right;
font-size:16px;
[B]padding:0 5px 0 0;[/B]
}
you’ve got a LOT of invalid markup that could be causing cross browser issues… 35 errors to be precise. Incomplete tags, unclosed tags, unnecessary wrappers - the list is pretty big.
The biggest ones that stand out are the invalid nesting of block level tags inside inline-level tags. DIV, P and H3 (block level) cannot go inside A. (inline-level) – EVER. H3 doesn’t seem all that semantic either (semantics is NOT just slapping meaningful tags around content) and tiny two word text snippets do NOT qualify as paragraphs either.
The double-anchors around single content and double-closings on anchors in the menu also look like a failure point. That code needs some heavy-duty cleansing right there. (Cleanse it with fire! :D)… that and lose the title attributes that don’t say anything the text inside the anchor doesn’t already say (what the heck is with people doing that anywho?)
Though as to your float drop issue, that could be the inline anchors messing up, it could be IE’s ‘perfect width’ float drop which is why I usually only margin the left side of my floats. (The drop will usually handle the opposite side for you!)
The technique by which your rounded boxes are built also seems problematic, and I’d think hard to maintain with one whole corner of the boxes attached to the actual product image.
Of course this:
<li>JavaScript must be enabled to use this store!</li>
Would be reason enough for many customers to never use the store and just go somewhere else. Javascript should enhance functionality, not supplant it!
The code also suffers badly from a case of “Not every tag deserves a className” with a hefty portion of the markup being unnecessary/redundant.
Really the markup should probably be cut down to something like this before worrying about cross-browser issues:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<meta
name="description"
content="Lara Vintage brings you authentic vintage clothing from the 60s, 70s and 80s at reasonable prices."
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<link
type="application/rss+xml"
rel="alternate"
href="/products.rss"
title="Product RSS Feed"
/>
<title>
Lara Vintage — All
</title>
<script
type="text/javascript"
src="http://cache1.bigcartel.com/themes/sexy/javascripts/prototype.js?20090929"
></script>
<script
type="text/javascript"
src="http://cache0.bigcartel.com/themes/sexy/javascripts/store.js?20090929"
></script>
</head><body>
<div id="pageWrapper">
<h1>
Lara <span>Vintage<span>.com<span></span></span><br />
</h1>
<p class="vintageText">
Vintage Clothing from
<span>
60's, 70's and 80's
<span>
WORLDWIDE SHIPPING
</span>
</span>
</p>
<ul id="topMenu">
<li><a href="/vintageclothingnews">News<span></span></a></li>
<li><a href="/faq">Help<span></span></a></li>
<li><<a href="/contact">Contact Us<span></span></a></li>
</ul>
<div id="cart">
<ul class="cartButtons">
<li><a href="/cart">View Bag</a></li>
<li class="checkout"><a href="/checkout">Checkout</a></li>
</ul>
My shopping bag<br />
0 items<br />
total: <span>£</span>0.00
<!-- #cart --></div>
<div id="content">
<ul id="mainMenu">
<li><a href="/">Home</a></li>
<li><a href="/category/all">View All</a></li>
<li><a href="/category/new-arrivals">New Arrivals</a></li>
<li><a href="/category/dresses">Dresses</a></li>
<li><a href="/category/skirts">Skirts</a></li>
<li><a href="/category/accessories">Accessories</a></li>
<li><a href="/category/culottes">Culottes</a></li>
<li><a href="/category/jackets">Jackets</a></li>
</ul>
<div id="innerContent">
<h2>All</h2>
<div id="products">
<div id="product-1">
<a href="/product/vtg-garden-floral-culottes">
<img
src="http://cache1.bigcartel.com/product_images/25945031/175.jpg"
alt="Vtg Garden Floral Culottes"
/><br />
<b>Vtg Garden Floral Culottes</b><br />
<span class="price"><span>£</span>13.99</span><br />
View item
</a><hr />
</div>
<div id="product-2">
<a href="/product/vintage-1980s-classic-culotte">
<img
src="http://cache1.bigcartel.com/product_images/25945115/175.jpg"
alt="Vintage 1980's Classic Culotte"
/><br />
<b>Vintage 1980's Classic Culotte</b><br />
<span class="price"><span>£</span>17.99</span><br />
View item
</a><hr />
</div>
<div id="product-3">
<a href="/product/fabulous-vtg-culottes">
<img
src="http://cache1.bigcartel.com/product_images/25945267/175.jpg"
alt="Fabulous Vtg Culottes"
/><br />
<b>Fabulous Vtg Culottes</b><br />
<span class="price"><span>£</span>14.99</span><br />
View item
</a><hr />
</div>
<div id="product-4">
<a href="/product/black-grey-patterned-80s-culottes">
<img
src="http://cache0.bigcartel.com/product_images/25945343/175.jpg"
alt="Black & Grey Patterned 80's Culottes"
/><br />
<b>Black & Grey Patterned 80's Culottes</b><br />
<span class="price"><span>£</span>15.99</span><br />
View item
</a><hr />
</div>
<div id="product-5">
<a href="/product/vtg-bold-striped-culottes">
<img
src="http://cache0.bigcartel.com/product_images/25945367/175.jpg"
alt="Vtg Bold Striped Culottes"
/><br />
<b>Vtg Bold Striped Culottes</b><br />
<span class="price"><span>£</span>13.99</span><br />
View item
</a><hr />
</div>
<div id="product-6">
<a href="/product/beautiful-80s-print-culottes">
<img
src="http://cache1.bigcartel.com/product_images/25945387/175.jpg"
alt="Beautiful 80's Print Culottes"
/><br />
<b>Beautiful 80's Print Culottes</b><br />
<span class="price"><span>£</span>14.99</span><br />
View item
</a><hr />
</div>
<div id="product-7">
<a href="/product/classy-vintage-culotte">
<img
src="http://cache1.bigcartel.com/product_images/25945455/175.jpg"
alt="Classy Vintage Culotte"
/><br />
<b>Classy Vintage Culotte</b><br />
<span class="price"><span>£</span>13.99</span><br />
View item
</a><hr />
</div>
<div id="product-8">
<a href="/product/vtg-70s-floral-day-dress">
<img
src="http://cache0.bigcartel.com/product_images/25945495/175.jpg"
alt="Vtg 70's Floral Day Dress"
/><br />
<b>Vtg 70's Floral Day Dress</b><br />
<span class="price">
<strong>SALE<span></span></strong>
<span>£</span>7.99
</span><br />
View item
</a><hr />
</div>
<div id="product-9">
<a href="/product/classic-vintage-floral-dress">
<img
src="http://cache1.bigcartel.com/product_images/25945539/175.jpg"
alt="Classic Vintage Floral Dress"
/><br />
<b>Classic Vintage Floral Dress</b><br />
<span class="price">
<span>£</span>14.99
</span><br />
View item
</a>
</div>
<div id="product-10">
<a href="/product/original-vtg-aztec-print-skirt-jacket">
<img
src="http://cache1.bigcartel.com/product_images/25945567/175.jpg"
alt="Original Vtg Aztec Print Skirt & Jacket RRP £195"
/><br />
<b>Original Vtg Aztec Print Skirt & Jacket RRP £195</b><br />
<span class="price">
<span>£</span>38.99
</span><br />
View item
</a>
</div>
<div id="product-11">
<a href="/product/vtg-boho-skirt">
<img
src="http://cache1.bigcartel.com/product_images/25945635/175.jpg"
alt="Vtg Peach Boho Skirt"
/><br />
<b>Vtg Peach Boho Skirt</b><br />
<span class="price">
<strong>SALE<span></span></strong>
<span>£</span>7.99
</span><br />
View item
</a>
</div>
<div id="product-12">
<a href="/product/exquisite-vintage-1980s-wedding-dress">
<img
src="http://cache1.bigcartel.com/product_images/25945667/175.jpg"
alt="Exquisite hand made Vintage 80's Wedding/Dress"
/><br />
<b>Exquisite hand made Vintage 80's Wedding/Dress</b><br />
<span class="price">
<span>£</span>45.00
</span></p>
View item
</a>
</div>
<!-- #products --></div>
<ul id="pagination">
<li><a href="/category/all?page=3">« Previous</a></li>
<li><a href="/category/all">1</a></li>
<li><a href="/category/all?page=2">2</a></li>
<li><a href="/category/all?page=3">3</a></li>
<li>4</li>
<li><a href="/category/all?page=5">5</a></li>
<li><a href="/category/all?page=5">Next »</a></li>
</ul>
<!-- #content --></div>
<div id="footer">
<img class="payment-logos"
src="http://www.fileden.com/files/2010/7/31/2929507//payment-logos.jpg"
alt="We accept Mastercard, Visa, Amex, Direct Debit and Paypal... and I have no clue what the purple swirly one is."
/>
<ul>
<li><a href="http://www.laravintage.com">Home</a></li>
<li><a href="/category/new-arrivals">New Arrivals</a></li>
<li><a href="/category/dresses">Dresses</a></li>
<li><a href="/category/skirts">Skirts</a></li>
<li><a href="/category/accessories">Acessories</a></li>
<li><a href="/category/culottes">Culottes</a></li>
<li><a href="/category/jackets">Jackets</a></li>
<li><a href="/contact">Contact us</a></li>
<li><a href="/faq">FAQs</a></li>
<li class="last"><a href="/vintageclothingnews">News</a></li>
</ul>
© 2010 Ross Crutchley All Rights Reserved
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body></html>
Of course that would take a whole new CSS to function.
Can’t say I’ve heard of “big cartel” before, but it looks like as much of a pile of junk so far as HTML/CSS is concerned as Magento. These guys may (or may not) know PHP, but when it comes to HTML it looks like they still have their head wedged firmly up 1998’s backside.
In other words, business as usual when it comes to carts.
Looks fine in IE to me. 
(You wouldn’t, by any chance, be talking about an older version of IE? Always specify that if so.)
The gap in the menu in IE7 is because of this invalid code here:
<ul>
<li><a href="/">Home</a></li>
<li>
[B] <a href="/products">[/B]
<li><a href="/category/all" title="View All">All</a>[B]</a>[/B]</li>
You seem to have an extra anchor in no-man’s land that is surrounding half the other link!
Remove it and it should fix the issue.
<ul>
<li><a href="/">Home</a></li>
[B] <li><a href="/category/all" title="View All">All</a></li>[/B]
IE6 is broken in a number of places so we would need to know if you were supporting it before offering a fix. As you are transparent pngs then I guess you are not supporting IE6 anyway.
It may be. I have a Mac so couldn’t check it in IE but someone told me yesterday that this was happening I will check with them see what version of IE they have.
They also said there was a larger space between home and all in the main nav than the other any idea on that?