Tag Archives: div

Solved: Image in div has a Thin Line Underneath Programming 11 JUN 2015

I noticed an annoying issue while working on some design elements on the survey element of my configurable feedback system Kinetica (for Touchwork) the other day. Essentially an image nestled inside a <div> element was rendering with an unsightly little line of space underneath it, breaking the visual effect that I wanted.

Perplexed (because the CSS inspector wasn’t showing anything untoward), I turned to Google and pretty soon had both the reason and the solution.

As it turns out, by default images are rendered as inline elements as opposed to block elements. In other words, it is rendered and treated like a letter/character, meaning that by default the line it is on has space below for the ‘descenders’ that you find on letters like y, j, p and q. This is then the line that you see below the image, because obviously it sits square on the line.

There are three possible fixes you can employ here. If you don’t want to do anything unnatural, you can get around the problem by simply specifying an appropriate vertical-align css style on the image, e.g. style=”vertical-align:bottom;”

Another fix that will work quite nicely is by specifying the line height of the parent container to 0 pixels, e.g. #div { line-height: 0;} <- of course, this assumes that you’re not going to have text anywhere in this parent container.

Finally, a just as effective trick would be to simply declare the image to be displayed as a block element, e.g. style=”display:block”

So with all that said and done, employing any of the tricks above will turn this:

thin line under image in div

into this:

thin line under image in div solved

Related Link: W3Schools

Toggle a Div’s Visibility with jQuery CodeUnit 18 JAN 2011

To toggle an element in terms of visibility, like a DIV for example, is pretty easy with jQuery and its ultra nifty toggle() function.

First, simply declare the div you wish to hide and show, give it an ID and if you want, set the initial display by using a style attribute like display: none;

Then, create a toggle controller element which you will use for the user to click on in order to trigger the DIV display/hide action. Again, this needs a ID attribute at most:

<p style="cursor:pointer" id="togglecontrol">(Show/Hide)</p>
<div style="display:none;" id="toggle">Toggle Me!</div>

Finally, put it all together with some jQuery code:

    $(document).ready(function(){
        $('#togglecontrol').click(function(){
            $('#toggle').toggle();
        });
    });

So now clicking on the toggle control element will run the toggle() function against the DIV, basically showing and hiding it at will!

Nifty.