Grow your CSS skills. Land your dream job.

what am I missing here?

  • # July 18, 2012 at 9:53 pm

    @cybershot I doubt the line-height looks consistent.

    # July 18, 2012 at 9:55 pm

    @cybershot Totally agree with @ChristopherBurton; decreasing the line-height below that of the font-size is very rarely a good idea as it messes with the vertical rhythm of everything below it.

    # July 18, 2012 at 10:07 pm

    @joshuanhibbert Did you edit the 2nd paragraph? http://css-tricks.com/forums/discussion/comment/73205#Comment_73205

    If not, I think I misread what you had said.

    # July 18, 2012 at 10:20 pm

    @ChristopherBurton I save a comment before proof reading, and then making slight changes. So you might have caught it in the minute before I have proof read it? I know it’s a strange way to comment, it’s just something I’ve always done.

    @cybershot I have done up a jsFiddle to demonstrate what I am talking about: http://jsfiddle.net/joshnh/szY9W/

    As you can see, the margin-top fix (on the left) doesn’t mess with the baseline like the line-height fix does. Also, each line of type sits in the middle of its line, according to the specifications, despite being totally different to how it is done in print design.

    # July 18, 2012 at 10:21 pm

    the strange thing was that when I removed the line-height altogether, the h1 text jumped half way outside the containing div. So it sat about 15 pixels higher than it should have. If anything, I expected it to sit right at the very top of the containing div.

    # July 18, 2012 at 10:25 pm

    @cybershot It would be helpful if you could give us a live example of what you’re talking about (in full context). There may be another overriding style that we aren’t aware of.

    # July 18, 2012 at 10:33 pm

    As an aside, here is that same jsFiddle from above, but with no alterations: http://jsfiddle.net/joshnh/FrYnJ/

    Although the top of the heading doesn’t line up with the top of the image, it still looks perfectly fine, and the vertical rhythm is completely natural.

    # July 18, 2012 at 10:39 pm

    yea, the only problem is that I am making this template for sale on themeforest and they have a policy about things not lining up correctly. That 1px gap could be enough to destroy the layout as far as the reviewers over there are concerned. Also, that gap and not knowing what causes it bugs the crap out of me and I just wanted to fix it. I managed to line it up with smaller line height. Not a perfect solution but it worked. I would have prefered to find out what was causing it and fit it that way.

    # July 18, 2012 at 10:44 pm

    I have tried, above, to explain why it is happening, and why it isn’t actually a bug. But perhaps I have misunderstood what you were actually referring to?

Viewing 9 posts - 16 through 24 (of 24 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".