Forum Moderators: not2easy
<div style="height: 40px; display: block; width: 180px;">
<img src="/images/yourbag.gif" width="180" height="40" alt="Your Bag" style="z-index: 255;" />
</div>
<div id="minicart">
<?php include "/home/httpd/vhosts/mytestsite.net/httpdocs/vsadmin/inc/incminicart2.php"; ?>
</div>
The CSS for the minicart is:
#minicart {
border-top: 1px solid #000000;
position: relative;
top: -9px;
z-index: 1;
width: 170px;
padding: 5px;
padding-top: 10px;
border-bottom: 1px solid #000000;
font-size: 12px;
}
The outcome is more or less as I wanted the minicart div floats a few pixels into the image which is a transparent image. This puts the border partially up the image so despite the fact the image has extra whitespace to accommodate the lower case letters the line appears to come almost right up to the letters with the lower case letters going below the line.
The problem is there's a picture of a shopping bag in the image which also slightly overruns the border which again is what I wanted but the border sits on top of the shopping bag and the letters in the image. The letters I'm fine with because their black so you can't really tell but the shopping bag is a red color so what I'd prefer is having the image actually float over the div below it. The line would still be visible because the image is transparent but I want the non transparent part of the image to sit over the line. I thought this could be achieved by setting the z-index of the image and giving the div below it a lower z-index but this does not seem to work.
Hoping someone here might be able to offer some help. If you need any more details feel free to ask and I will do my best to answer. Thank you
Stewart
You can probably do away with the div around the image as well. As it is now, the div feels superfluous.
