Small image cut off top and bottom next to header

  • Resolved David Borrink

    (@davidborrink)


    15 years ago

    I have a graphic to place next to my sidebar headers. If the header is more than one line tall, the full graphic appears to the left, centered vertically next to the header. The graphic is about 20px tall.

    But if the header is only one line, the top and bottom of the image is cut off. I notice if I enlarge the font-size, the full graphic can be seen, but I don’t want my fonts that large. Is there a way to make a full graphic appear next to a smaller font size? Am I overlooking some CSS that could be used?

    I’ve looked for a solution here and on the web but I’m not finding anything that would give me a clue as to how to make the full graphic appear when next to a one line header. I’d prefer not to shrink my graphic to the height allowed by my current font size.

Viewing 8 replies - 1 through 8 (of 8 total)
  • @mercime

    (@mercime)

    15 years ago

    site url? or link to screenshot? there could be a large number of reasons a variety of solutions.

    Clayton James

    (@claytonjames)

    15 years ago

    I think this might be him…

    http://dev.artsandletters.biz/arts

    [EDIT] maybe not.. 🙂

    Thread Starter David Borrink

    (@davidborrink)

    15 years ago

    Yes, that is the link.

    http://dev.artsandletters.biz/arts

    I had to update the theme to that public location. Now you can see it.

    You can see that the pushpin gets cut off on the one-line headers, but is full on the top header.

    I’m also trying to figure out how to get the left side of the graphics to float out of the sidebar. I’m wondering if negative margins or negative padding would work. You can see the edge of the sidebar in my pushpin graphic which is now right at the left edge of the sidebar.

    I’ll need to get the header text over to the right of the pushpin. I know I can add some padding there to push it right out of the graphic.

    @mercime

    (@mercime)

    15 years ago

    @davidborrink: there’s no postpin visible in FF. I checked in IE and now I see it. Plus, comparing the layout in the two browsers, there’s around 100px between sidebar and main content in FF plus no colored backgrounds. While in IE, the space between sidebar and main content is around 20px and you have brown background in sidebar and tan background in main content.

    To take care of sidebar h2 image
    #sidebar h2 { line-height: 25px; height: 25px; padding-left: 25px; background: transparent url(images/pushpin.jpg) center left; }

    Thread Starter David Borrink

    (@davidborrink)

    15 years ago

    @mercime:

    Thanks for the headsup about FF. I’m on a Mac and it’s visible. I’ll check on my wife’s PC FF to verify.

    The 100 px between sidebar and content is accidental due to sidebar experiements. I’ll fix that.

    Thanks for the tip about using line-height AND height in the same line. I hadn’t considered that.

    Thread Starter David Borrink

    (@davidborrink)

    15 years ago

    I checked FF on PC and it’s fine. So I’m not sure why you’re seeing what you’re seeing.

    @mercime

    (@mercime)

    15 years ago

    Well it’s showing the pushpins and the background colors of your sidebars and post entries now in both browsers. I just reported what I saw yesterday.

    Thread Starter David Borrink

    (@davidborrink)

    15 years ago

    Thanks. I’m not sure what happened.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Small image cut off top and bottom next to header’ is closed to new replies.