View Single Post
Old 01-01-2013, 03:44 PM   #2
dgatwood
Curmudgeon
dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.
 
dgatwood's Avatar
 
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
Try setting the height and width of the icon div to 200px. Beyond that, my guess would be whitespace in the image itself.

I recommend taking a look at the HTML page in a good web browser with a decent web inspector that shows all the different boxes in the box model (e.g. a WebKit-based browser, or Firefox with Firebug). Alternatively, add "border: 1px solid red;" to see where the image's bounding box actually is.

Oh, and another thing. I just noticed that you're floating the image to the right. If your paragraph style uses a ragged right margin, the right margin will appear larger because if an entire word doesn't fit, it gets kicked to the next line. Specifying a style that allows hyphenation can fix this. For example:

Code:
p {
        hyphens: manual;
        -webkit-hyphens: manual;
        -moz-hyphens: manual;
        -epub-hyphens: manual;
        adobe-hyphenate: auto;
}

Last edited by dgatwood; 01-01-2013 at 03:48 PM.
dgatwood is offline   Reply With Quote