Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #44020
    siouxfan45
    Participant

    The edit link [on the top of my pages](http://themeforward.com/demo2/2013/03/08/image-gallery/http://themeforward.com/demo2/2013/03/08/image-gallery/”) is using the CSS below. However, the CSS is causing the link to fit the width of the div – why may this be?

    My CSS:

    .post-edit-link { border:1px solid #DDD; padding:.5em 1em; background:#FAFAFA; clear:both; display:block }

    #131303
    CrocoDillon
    Participant

    That’s what blocks do. You can change it though by setting the width.

    I can’t see the edit thing by the way.

    #131304
    Senff
    Participant

    I don’t see any EDIT link on that page (likely because I’m not logged in to your system) so can’t really see what the problem is.

    #131307
    ElijahFowler
    Participant

    CrocoDillon is correct, block elements take up 100% of the width of their parent container. What you are looking for is display: inline-block. That gives you the same style abilities as display: block, such as adding a height and it margin (inline elements will add these, but they don’t display) but it only takes up as much width as the content inside dictates, one thing it does not do however, is clear itself as display: block does.

    Try this:

    .post-edit-link {
    background: #FAFAFA;
    border: 1px solid #DDD;
    display: inline-block; /* Works in everything but IE7 on down */
    padding: 0.5em 1em;
    *display: inline; /* IE7 Hack, remove if you don’t care about supporting IE7 */
    *zoom: 1; /* IE7 Hack, remove if you don’t care about supporting IE7 */
    }

    Now if you don’t want to support IE7, or wish to use conditional CSS files/classes just remove the last two properties in code snippet. If you were wanting your link to clear away from the other content just add clear: both into the snippet and that should do it.

    Hope that helps,

    -Elijah

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.