5 Replies Latest reply on Feb 3, 2010 11:32 AM by martcol

    This might be about Collapsable Margins on floated elements?

    martcol Level 4

      On this page: imagesandwords.org.uk/Don/index05.php

       

      I have added a strip of thumbs. I don't like them there but there you go.

       

      My question though is about the space between the top of the strip of thumbs and the rest of the content.

       

      I added margin-top to #tthumbwrapper <div> but found that I had to put in around 500px to satisfy FF but IE then applied that huge margin.

       

      Is there another way around it or will I need to look at styling for different browsers?

       

      Sorry if the code's a bit clunky.  It's in development and I had to put it up in a bit of a rush.

       

      Thanks

       

      Martin

       

      [Edit]  sorry but I just had a check on the validator and I've got a couble "" at the end of the "share" graphic.  Maybe I should change that before anyone looks at it incase that mucks things up a bit.

        • 1. Re: This might be about Collapsable Margins on floated elements?
          hans-g. Adobe Community Professional & MVP

          Hi,

           

          In this case, I would prefer the taboo representation within a table, like this:

           

          <table width="99%" border="0" align="center" cellspacing="0" id="Gallery">
            <tr>
              <td align="center" valign="top"><div align="center"><span class="frontthumb"><a href="#" title="Type of Gallery"><img src="/Don/TrialFrontThumb/FrontThumbPorP.JPG" alt="" title="" width="100" height="100" /></a></span></div></td>
              <td align="center" valign="top"><div align="center"><span class="frontthumb"><a href="#" title="Type of Gallery"><img src="/Don/TrialFrontThumb/FrontThumbPortD.jpg" alt="" title="" width="100" height="100" /></a></span></div></td>
              <td align="center" valign="top"><div align="center"><span class="frontthumb"><a href="#" title="Type of Gallery"><img src="/Don/TrialFrontThumb/FrontThumbLand02.jpg" alt="" title="" width="100" height="100" /></a></span></div></td>
              <td align="center" valign="top"><div align="center"><span class="frontthumb"><a href="#" title="Type of Gallery"><img src="/Don/TrialFrontThumb/FrontThumbLSD.jpg" alt="" title="" width="100" height="100" /></a></span></div></td>
              <td align="center" valign="top"><div align="center"><span class="frontthumb"><a href="#" title="Type of Gallery"><img src="/Don/TrialFrontThumb/FrontThumbDes.jpg" alt="" title="" width="100" height="100" /></a></span></div></td>
              <td align="center" valign="top"><div align="center"><span class="frontthumb"><a href="#" title="Type of Gallery"><img src="/Don/TrialFrontThumb/FrontThumbMurals.jpg" alt="" title="" width="100" height="100" /></a></span></div></td>
              <td align="center" valign="top"><div align="center"><span class="frontthumb"><a href="#" title="Type of Gallery"><img src="/Don/TrialFrontThumb/FrontThumbBat.jpg" alt="" title="" width="100" height="100" /></a></span></div></td>
              <td align="center" valign="top"><div align="center"><span class="frontthumb"><a href="#" title="Type of Gallery"><img src="/Don/TrialFrontThumb/FrontThumbPrint.jpg" alt="" title="" width="100" height="100" /></a></span></div></td>
            </tr>
          </table>

           

          The "#" character must be supplemented with the paths to the individual large images.

           

          Hans-G.

          1 person found this helpful
          • 2. Re: This might be about Collapsable Margins on floated elements?
            osgood_ Level 8

            You havent 'cleared' the floats. Either add it to the css 'thumbwrapper' selector or inline as below: Then no top padding/margin should be required to position it.

             

            <div id="thumbwrapper" style="clear: both;">

            • 3. Re: This might be about Collapsable Margins on floated elements?
              martcol Level 4

              Hans

               

              Thank you for taking the trouble to work that out for me but after seeing your code, it makes me shy away from the idea even more!

               

              Osgood, I think that's definately the solution I need.  I was wondering which element to clear but thought that I might be getting away with it by making the width of the containing <div> the same as the wrapper div.

               

              It's no trouble to fix that and I'll clean up that code typo too.

               

              Thanks again both of you for your interest.

               

              Regards

               

              Martin

              • 4. Re: This might be about Collapsable Margins on floated elements?
                hans-g. Adobe Community Professional & MVP

                Hi,

                 

                pardon, but this makes me smile. Naturally, it looks more worse than it is, because I wrote a code for all the images. The code repeats again and again, the content is always the same, except the names of the photos, naturally!

                 

                Look here, where I have used something like that: http://www.goldschmiede-blumberg.de/GlueckesSchmied02.php

                 

                Would be proud, if I could convince you now.

                 

                Hans-G.

                 

                P.S.

                Thanks for the star!

                • 5. Re: This might be about Collapsable Margins on floated elements?
                  martcol Level 4

                  hans-g. wrote:


                  pardon, but this makes me smile.


                  That is a bonus!

                   

                  Would be proud, if I could convince you now.

                   

                   

                  Hmmmmmmm.  Not much chance!

                   

                  Thanks for the star!

                  You offered some help Hans and it all contributes to my web education.  You are welcome.

                   

                  Martin