Images the wrong size in firefox, firebug reports strange li size

HTML & CSS
1

when I view this page in firefox the images in the carousel are cropped and the whole carousel is messed up.
http://darrell.wisemonkeys.com.au/

firebug shows the li containing the image is, overflow: hidden; float: left; width: 88px; height: 59px;

when I view it in chrome it looks right and shows
the li is, overflow-x: hidden; overflow-y: hidden; float: left; width: 208px; height: 165px;

I am baffled, any ideas?
thanks in advance mark

2

The first thing I would do is fix the validation errors as any one of them could trip Firefox up.

Especially the section concerned as you have an invalid structure than Firefox may be ignoring.


<li> 
 <a href="http://darrell.wisemonkeys.com.au/shop-online/limited-edition/angel-and-fish-charm-necklace-as-seen-in-girlfriend-magazine/"><img alt="Angel and Fish Charm Necklace (AS SEEN IN GIRLFRIEND MAGAZINE)" title="Angel and Fish Charm Necklace (AS SEEN IN GIRLFRIEND MAGAZINE)" src="" width="" height="" />
								<p><span class="carousel-title">Angel and Fish Charm Necklace (AS SEEN IN GIRLFRIEND MAGAZINE)</span><br />
										<span class="carousel-price"> $15.00</span></p>
 </a> 
</li>

You have wrapped anchors around block elements which is invalid (ouside of html5) and has been known to cause browsers to render things incorectly. The anchor should be set to display:block and the inner p elements should be changed to a inline element such as a span although you can still style them to behave like block elements etc.

However, I don’t think any of the above is the issue here and it looks more like some sort of javascript error as the size of those elements is being controlled via the script. The problem is though that until yu have a valid document you can’t rule out silly typos ans missing tags as the cause and end up looking in the wrong place for the fix.

My debugging always starts with step 1:

  1. Validate the page and rule that out as a cause

  2. Isolate the problem

  3. Fix it :slight_smile:

3

Before you attempt the above try this simple fix.


.home-carousel img {display:block}

The above still holds true whether that fixes it or not :slight_smile: