SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Not yet perfect mattalexx's Avatar
    Join Date
    Oct 2005
    Location
    Taos, NM, US
    Posts
    441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Weird image overlay problem

    I am overlaying some JPEGs with a little banner GIF using CSS. But if a JPEG wraps to the next line, the GIF doesn't wrap with it. You'll see the problem if you resize the browser until the images wrap.

    Example:
    http://misc.thenowhouse.com/200803170135_css_problem/

    Files:
    http://misc.thenowhouse.com/20080317...blem/files.zip

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Example</title>
    </head>
    <body>
    <div id="item_list">
       <a href="http://example.com/items/view/Craft_Horizons_May-Jun_1956" title="Craft Horizons May-Jun 1956" class="new">
       <img src="Books_files/c60b46fa1f00627d7c99468d9ba126c7.jpg" alt="Craft Horizons May-Jun 1956" class="item_image" height="125" width="96">
             <img src="Books_files/new_banner.gif" alt="New!" class="new_banner" height="37" width="37">
             </a>
          <a href="http://example.com/items/view/Craft_Horizons_July-Aug_1956" title="Craft Horizons July-Aug 1956" class="new">
       <img src="Books_files/7fbf0c220443ecd34b7f5b481d401446.jpg" alt="Craft Horizons July-Aug 1956" class="item_image" height="125" width="96">
             <img src="Books_files/new_banner.gif" alt="New!" class="new_banner" height="37" width="37">
             </a>
          <a href="http://example.com/items/view/Craft_Horizons_Mar-Apr_1956" title="Craft Horizons Mar-Apr 1956" class="new">
       <img src="Books_files/e4e0402cd01126997e7340cc0bd85374.jpg" alt="Craft Horizons Mar-Apr 1956" class="item_image" height="125" width="96">
             <img src="Books_files/new_banner.gif" alt="New!" class="new_banner" height="37" width="37">
             </a>
          <a href="http://example.com/items/view/Koran_Page_2" title="Koran Page 2" class="new">
       <img src="Books_files/4ec81b57d065758ef6c77729e202832c.jpg" alt="Koran Page 2" class="item_image" height="125" width="74">
             <img src="Books_files/new_banner.gif" alt="New!" class="new_banner" height="37" width="37">
             </a>
          <a href="http://example.com/items/view/Koran_Page_5" title="Koran Page 5" class="new">
       <img src="Books_files/4a2fc5a67a8744f358b77345fdef6604.jpg" alt="Koran Page 5" class="item_image" height="125" width="75">
             <img src="Books_files/new_banner.gif" alt="New!" class="new_banner" height="37" width="37">
             </a>
          <a href="http://example.com/items/view/Koran_Page_7" title="Koran Page 7" class="new">
       <img src="Books_files/f9038ee255e17b8d39ec02f020b7b840.jpg" alt="Koran Page 7" class="item_image" height="125" width="83">
             <img src="Books_files/new_banner.gif" alt="New!" class="new_banner" height="37" width="37">
             </a>
          <a href="http://example.com/items/view/Zodiac_Signs_Book" title="Zodiac Signs Book" class="new">
       <img src="Books_files/f024f23f8037fc540d29daea5689f063.jpg" alt="Zodiac Signs Book" class="item_image" height="125" width="124">
             <img src="Books_files/new_banner.gif" alt="New!" class="new_banner" height="37" width="37">
             </a>
          <a href="http://example.com/items/view/Campbell_Museum_Collection_Silver_Porcelain_Book" title="Campbell Museum Collection Silver Porcelain Book" class="new">
       <img src="Books_files/d61bb6d2efceaba08ca3f93d2971754e.jpg" alt="Campbell Museum Collection Silver Porcelain Book" class="item_image" height="125" width="87">
             <img src="Books_files/new_banner.gif" alt="New!" class="new_banner" height="37" width="37">
             </a>
          <a href="http://example.com/items/view/Toni_Stadler_Artist_Monograph" title="Toni  Stadler Artist Monograph" class="new">
       <img src="Books_files/7fd6305fe42a093bb7e2ae62c48f0afe.jpg" alt="Toni  Stadler Artist Monograph" class="item_image" height="125" width="80">
             <img src="Books_files/new_banner.gif" alt="New!" class="new_banner" height="37" width="37">
             </a>
       </div>
    </body>
    </html>
    Code CSS:
    img {
       border: none;
       }
    #item_list img.item_image {
       margin: 0 20px 20px 0;
       background-color: #fff;
       }
    .new {
       position: relative;
    }
    .new img.new_banner {
       position: absolute;
       right: 25px;
       bottom: 24px;
    }

    I've been banging my head against the wall for a long time and this is very simple CSS! Can anyone figure out what's going on?
    Matt Alexander
    Alexander Site Design

  2. #2
    Not yet perfect mattalexx's Avatar
    Join Date
    Oct 2005
    Location
    Taos, NM, US
    Posts
    441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it.. I gave a float:left to the A tags and tweaked the offset a bit.
    Matt Alexander
    Alexander Site Design


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
  •