SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Non-Member
    Join Date
    Dec 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy images the wrong size in firefox, firebug reports strange li size

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,472
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
    <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

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,472
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Before you attempt the above try this simple fix.

    Code:
    .home-carousel img {display:block}
    The above still holds true whether that fixes it or not


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •