troubleshooting Question

How to get background-color of DIV to overlap img in another DIV

Avatar of slamit
slamit asked on
CSSHTML
3 Comments1 Solution840 ViewsLast Modified:
Hi all.

I'm using CSS positioning to build a "table" of products for display on a site. It's all going pretty well, but I've come across a glitch I can't correct.

As per the code, I display thumbnail images inside an fpimage DIV with a height of 116px. On rare occassion, some images placed within that DIV may be larger than 116px.

What I'd like is for the fpdescription DIV to "overlap" the image, almost cutting it off. Pseudo editing it to 116px in height (editing the thumbnails themselves isn't an option).

Simple enough to do in IE which renders the fpdescription background-color over the top of fpimage's img file, achieving exactly but I want. But, it doesn't render that way in Firefox (which of course means the IE method is incorrect!!).

I've tried z-index and background images, but can't quite seem to get it right.

Any advice?

Thanks in advance!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.row {
	width:651px;
	height:230px;
	margin: 0px auto;
}
 
.col {
	width:130px;
	height:230px;
	float:left;
}
 
.fpimage {
	width:130px;
	height:116px;
	text-align:center;
	padding-top:12px;
}
 
.fpdescription {
	width:125px;
	text-align:center;
	color:#464646;
	padding:6px 2px 0 2px;
	background-color: #FFFFFF;
}
 
.fpprice {
	text-align:center;
	color:#464646;
	padding:0 0 4px 0;
	font-weight:bold;
	background-color: #FFFFFF;
}
 
.fpRRP {
	text-decoration:line-through;
	color:#666666;
}
 
.fpadd {
	padding-top: 5px;
	width:105px;
	text-align:center;
	margin: 0px auto;
}
 
.fpdescription {
height:35px;
voice-family:"\"}\"";
voice-family:inherit;
height:35px;
}
 
* html .fpdescription{
height:35px;
}
</style>
</head>
<body>
      <div class="row">
        <div class="col">
          <div class="fpimage"><a href="/product.php?prodID=CS00002"><img src="/product.images/CS00002_t.jpg" width="80" height="145" alt="Blah blah" style="border:0" /></a></div>
          <div class="fpdescription"><a href="/product.php?prodID=CS00002" class="fpdesclink">Blah blah</a></div>
          <div class="fpprice"><span class="fpyourprice">$50.00</span></div>
          <div class="fpadd">
            <form action="cart.php" method="post" name="addCart" style="margin:0px;">
              <input type="hidden" name="action" value="add">
              <input type="hidden" name="prodID" value="CS00002">
              <input name="submit" type="image" src="/images/button_add.png" width="100" height="25" alt="Add Blah blah to cart">
            </form>
          </div>
        </div>
        <div class="col">
          <div class="fpimage"><a href="/product.php?prodID=7083"><img src="/product.images/7083_t.jpg" width="80" height="149" alt="Blah blah 2" style="border:0" /></a></div>
          <div class="fpdescription"><a href="/product.php?prodID=7083" class="fpdesclink">Blah blah 2</a></div>
          <div class="fpprice"><span class="fpyourprice">$30.00</span></div>
          <div class="fpadd">
            <form action="cart.php" method="post" name="addCart" style="margin:0px;">
              <input type="hidden" name="action" value="add">
              <input type="hidden" name="prodID" value="7083">
              <input name="submit" type="image" src="/images/button_add.png" width="100" height="25" alt="Add Blah blah 2 to cart">
            </form>
          </div>
        </div>
       </div>
</body>
</html>
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 3 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 3 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros