asked on

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

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>

Open in new window

z.jpg

TName

First, the red .box div is too short because you specify it's height to be 80px.

BrowseResultDisplay div.box
{ height: 80px; width: 106px;
...

IE will still let the content expand the div, but FF will do as told and limit the height to 80px.

The checkbox is, as it should, at top:0px inside it's parent. The problem is that the parent (.imgbox) is not as high as thought: you have set it's display property to "inline", and as an inline element, it will not let you set a height. So compliant browsers will ignore "height: 110px;"...

I'm not sure what you mean with "the label text is still not aligned". The label text itself looks (and is positioned) the same in your screenshots in IE and FF.

mpn_1983

I have some points i'd like to clarify (this may help others help you if I can't):

1. As you say we can make no assumption to the x or y values does this mean all the heights and widths you've used in the example are there just to illustrate how you'd like things to look in IE.

2. Is javascript totally out of the question (i've had a similar problem to this before where i originanally decided to use javascript to get the height of the tallest box on a given row and apply it to the others on that row - this did admittedly fall foul to text resizing)

3. What is the range of browsers you are looking to support

4. Are you against the use of conditional comments for IE

point 4 is because you could use the CSS table properties to achieve your goal in FF and many other browsers which have good/full support for the CSS 2.1 spec - of course IE falls foul of this hence the question

Regards,
Matt

ASKER CERTIFIED SOLUTION

lesterw2

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial