troubleshooting Question

CSS Challenge - How to Positioning a checkbox over a horizontally centered image?

Avatar of lesterw2
lesterw2 asked on
Web DevelopmentHTMLWeb Browsers
3 Comments1 Solution4628 ViewsLast Modified:
I have a CSS challenge for all you experts out there.  We hacve collectively wasted a day trying to resolve this problem.  In a nutshell, we are outputting a series of thumbnail images (of varying sizes). The thumbnails must be top aligned and centered in each DIV in which they occur. Furthermore, a checkbox is to be placed over each image, relative to its upper left corner.

I successfully got it to work using Internet Explorer 7, but I cannot get it to work using Firefox 2.0. I can't get the checkboxes to be properly positioned in Firefox 2.0 nor can I get the label text to be aligned (see attached image). I was never able to find a solution that worked in Firefox even by itself.

A self-contained html page with embedded CSS is attached. The challenge is to get it to work using CSS and without using a table. Also, no assumptions can be made about the dimensions (X or Y) of the thumbnail images (i.e., no absolute positioning of the IMG tag or the containing DIV). You may adjust the nesting order of the containing DIV elements as necessary.

By the way, if you add the following CSS, the checkboxes go back to the right place but the label text is still not aligned.

    .BrowseResultDisplay img
      { vertical-align: top;
      }


<html>
<head>
   <title>Checkbox Overlay</title>
   <style type="text/css">
 
.DivPad { clear: both; height: 1px; margin: 0 auto; padding: 0; }
 
.BrowseResultDisplay DIV.BrowseDisplayRecords
   { float: left;  display: inline; position: relative; overflow: visible; 
     width: 106px; max-width: 106px; height: 100px; margin: 0px; padding: 5px 0px 20px 5px; text-align: center; 
     background-color: #FFFFCC; }
 
.BrowseResultDisplay  div.box 
   {  height: 80px; width: 106px; 
      margin: 0; padding: 0; text-align: center;background: red; }
 
.BrowseResultDisplay  div.imgbox 
   { position: relative; top: 0; left: 0; display:inline; margin: 0 auto; padding: 0; text-align: center; height: 110px; background-color: green; overflow: visible; }
 
.BrowseResultDisplay  div.imgbox input
   { position: absolute; top: 0; left: 0; margin: 5px; padding: 0;  text-align: left;vertical-align: bottom; z-index: 500; }
  
.DVSearchCenter
   { clear: both; }
 
</style>
</head>
<body>
   <div style="background: yellow;">
      <div class="BrowseResultDisplay">
         <!-- TEST -->
         <div class="BrowseDisplayRecords">
            <div class="box">
               <div class="imgbox">
                  <a href="#" title="janvi">
                     <img src="http://web1.Testspot.us/surfprofilesimageserver1/Users/Small/2972_221627.jpg"
                        alt="janvi" title="janvi" />
                  </a>
                  <input type="checkbox" name="chkUserIds" />
               </div>
               <div class="DvSearchCenter">
                  <a href="#" title="janvi">janvi</a></div>
            </div>
         </div>
         <!-- TEST -->
         <div class="BrowseDisplayRecords">
            <div class="box">
               <div class="imgbox">
                  <a href="#" title="janvi">
                     <img src="http://web1.testspot.us/surfprofilesimageserver2/Users/Medium/2974_15111.jpg"
                        alt="boobah" title="janvi" />
                  </a>
                  <input type="checkbox" name="chkUserIds" />
                </div>
               <div class="DvSearchCenter">
                  <a href="#" title="janvi">boobah</a>
               </div>
            </div>
         </div>
      </div>
   </div>
</body>
</html>
z.jpg
ASKER CERTIFIED SOLUTION
lesterw2

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 3 Comments.
Start Free Trial
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