It appears the extra space is a result of the inline style display:block; on 
the <a> tags.

Playing around in Chrome DevTools, I changed the display to inline-block and 
added a width: 100%; to keep the same clickable width. Seems to do the trick.

Hope this helps.

Dez
_____________


On 20 Aug 2013, at 03:59, Erik Domingo <[email protected]> wrote:

> Greetings all,
> 
> I need help discovering why certain divs seem to have extra height being
> added to them on this page:
> http://knowarecms.net/SRPEDD/index.php?id=17&maincat=17. If you look at the
> markup within the td element representing August 14, 2013 on this calendar,
> you'll see markup like this:
> 
> <td id="" class="hasevents" width="12%">
>    <!-- day of month label -->
>    <div class="datestamp">14</div>
>    <!-- event listing container -->
>    <div id="" class="event">
>        <div id="" class="">
>            <span class='' id='ev'> 8:30am</span>
>            <span class='title'>
>                <a id="mxc140"  title="Finance Committee" class="tt
> mxModal" href="http://knowarecms.net/SRPEDD/calendar?details=10"; rel=""
> target="" style="color:inherit;display:block;position:relative;padding:3px
> 0 ;">Finance Committee</a>
>            </span>
>            <div class='modalContent' id='tips'>
> 
>            </div>
>        </div>
>        <div id="" class="">
>            <span class='' id='ev'> 4:00pm</span>
>            <span class='title'>
>                <a id="mxc141"  title="J.T.P.G. Meeting & Annual Cookout"
> class="tt mxModal" href="http://knowarecms.net/SRPEDD/calendar?details=13";
> rel="" target=""
> style="color:inherit;display:block;position:relative;padding:3px 0
> ;">J.T.P.G. Meeting & Annual Cookout</a>
>            </span>
>            <div class='modalContent' id='tips'>
> 
>            </div>
>        </div>
>    </div>
> </td>
> 
> For some reason that I can't fathom, the child divs of the div with class
> "event" have extra height at the bottom, equal to one blank line. I used
> the dev tools in Firefox (Firebug) and Chrome to search for the cause, but
> couldn't find anything. I even tried to remove the div with class
> "modelContent" (which has display:none set on it) from the DOM, to no
> effect.
> 
> This isn't a big deal to anyone but the layout designer, who wants the divs
> to be closer. I could use a negative margin to move divs (other than the
> first) up, but I'd rather understand the behavior I'm seeing here.
> 
> Thanks in advance for any help,
> Erik
> 
> PS I haven't posted to the list in years, so if I slipped up with any
> etiquette, my apologies...
> 
> -- 
> Erik Domingo
> ______________________________________________________________________
> css-discuss [[email protected]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to