Advertisement

04.11.2008 at 02:52PM PDT, ID: 23316584
[x]
Attachment Details

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

Asked by lesterw2 in Firefox Web Browser, Miscellaneous Web Development, Hypertext Markup Language (HTML)

Tags: CSS, Firefox 2.0

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;
      }

Start Free Trial 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:

<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>
Attachments:
 
z.jpg (180 KB) (File Type Details) 
Output in IE vs Firefox
Output in IE vs Firefox
 
 
Keywords: CSS Challenge - How to Positioning a …
Title
1 Css in firefox.
2 Trouble with floated DIVs in Firefox
3 css ie6 div not 100%
4 Css Centering div
5 Format a list like a table using CSS
6 simple disgen with div (css)
 
Loading Advertisement...
 
[+][-]04.11.2008 at 03:39PM PDT, ID: 21338760

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]04.11.2008 at 03:47PM PDT, ID: 21338794

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]04.11.2008 at 10:01PM PDT, ID: 21339899

View this solution now by starting your 7-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

 

About this solution

Zones: Firefox Web Browser, Miscellaneous Web Development, Hypertext Markup Language (HTML)
Tags: CSS, Firefox 2.0
Sign Up Now!
Solution Provided By: lesterw2
Participating Experts: 2
Solution Grade: A
 
 
 
Loading Advertisement...
20080716-EE-VQP-32 / EE_QW_2_20070628