Why the cboxElement is larger in height than the image/button which is calling it?

Question

I have a 3x3 matrix of 9 images built with Susy. I only wondered why the vertical gutter isn't behaving like i suggested. Then i realized that the containing cboxElement https://dl.dropbox.com/u/8578/cbox.png

is larger than the contained image: https://dl.dropbox.com/u/8578/img.png

But honestly i don't have much of an idea why the cboxElement is stretched larger than the image extends?! The configuration for the cbox looks like that:

    $(".ajax1, .ajax2, .ajax3, .ajax4, .ajax5, .ajax6, .ajax7, .ajax8, .ajax9").colorbox({
        rel:"nofollow",
        transition:"none", 
        opacity:"0",  
        fixed:"true", 
        width:"65%", 
        height:"97%",
        onComplete: function() {$('.flexslider').flexslider({
            animation: "slide",
            animationLoop: true,
            controlNav: false,
            directionNav: true,
            slideshow: false
        });}        
     });

The html of one li within the unordered list looks that way:

 <li><a class="ajax1" href="projekt1.html"><img title="Projekte1" src="img/projekteblur.jpg" alt="Projekte1" /><img title="Projekte1" src="img/projekte.jpg" alt="Projekte1" /><span class="spiceup">Zum Projekt</span></a></li>

The applied CSS looks that way:

 /* The following CSS is consistent between example themes and should not be altered. */
#colorbox, #cboxOverlay, #cboxWrapper{
    position:absolute;
    top:0;
    left:0;
    z-index:300;
    overflow:hidden;
    }
 #cboxOverlay{
    position:fixed;
    width:100%;
    height:100%;}
  #cboxMiddleLeft, #cboxBottomLeft{
    clear:left;}
  #cboxContent{
    position:relative;}
  #cboxLoadedContent{
    overflow:auto;}
  #cboxLoadingOverlay, #cboxLoadingGraphic{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;}
  #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{
    cursor:pointer;}
  #colorbox, #cboxContent, #cboxLoadedContent{
    box-sizing:content-box;}

/*  User Style:   */

#colorbox{
    @include border-radius(5px, 5px);
    @include box-shadow(black 2px 2px 10px);
    background:rgba(55, 60, 74, 0.95);
    }
 #cboxContent{
    margin:30px;
    overflow:visible;
    }
  #cboxError{
        padding:50px;
        border:1px solid #ccc;}
  #cboxLoadedContent{
        padding:0 5px 0 10px;
        }
    #cboxLoadingGraphic{
        background:url('../img/loading.gif') no-repeat center center;}
    #cboxLoadingOverlay{
        background:rgba(55, 60, 74, 0.95);}

   #cboxClose{
    text-indent:-9999px;
    width:44px;
    height:24px;
    position:absolute; 
    top:-26px;
    right:-20px; 
    background:url('../img/close.png') no-repeat 0 0;}

Anyone has an idea? Thanks

score 0 · Accepted Answer · edited May 23 '17 at 11:55

0

You can remove colorbox from this equation, as it has no impact here. This is just CSS trivia, and happens with all image elements by default due to them being inline elements. If you were to change the image element to display:block or give it a float, that space would disappear.

As for the reason that space is there, this post explains it well: Remove white space below image

edited May 23 '17 at 11:55

Community

1
1

answered Oct 29 '12 at 05:38

Jack

9,448
3
29
33

Ah thanks! The odd part is i never used display: inline in the specific parts within the scss, display:block only. Buuut in the preprocessesed css it shows display: inline. I will have to figure out why it is placed there. Thanks a lot for the hint! – rkoller Oct 29 '12 at 20:14

Why the cboxElement is larger in height than the image/button which is calling it?

1 Answers1