SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Text in and after span drops down lower than rest of text in <p>

    I have two paragraphs that are supposed to be on two different lines. All that is in each paragraph should be on one line, but in the second paragraph I have a span that contains text to be a different font.
    The text in the span and after the span though is lower as if it is being pushed down by a margin-top. It is also pushed to the right some.

    Any idea on how I can move the text in the span and after the span to the same line as the other text in that paragraph ?

    Here is a link to the page.


    I would appreciate any help in fixing this.

    Thanks in Advance,
    Team 1504.

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    it's a typographical choice issue, the font you have chosen has a bad baseline ( ah, free fonts... :P ) if you are certain that font will always be used you could "correct this by using relative position and some 'em', or preferably 'ex' ,value equal to the offset. you could also try wrapping the other part of the text in a span , giving both display:block, align:top; tho am not sure if that will help if the font face itself , has actual baseline issues. It's worth a try before resorting to RP tho.

    BTW, I notice you gave your p.titles {display:inline; } which makes no sense if you actually wanted them to display one on to of the other.

  3. #3
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you for replying!

    Ah, okay. Well, i'm certain I'm going to use this typeface / font.

    Why not relative positioning and px for the units. Why, em? and I've never heard of ex before.

    the display:inline was a desperate attempt to fix the issue. I have removed that now in my copy.

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    px sizing of text is just bad practice in general, but in this specific case you are trying to correct an error of poorly created font. A font which appears to have leading built in. so you want to make your adjustments relative to the font size, thus EMs or EXs. Really either will do, but EX units are based on a font's x-height so I just tend to pic that when working on a y-axis.

  5. #5
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    you are making me really want to switch to a different typeface / font. But, anyway, thank you for explaining. I'll change the units of the positioning to rems, which I used for the font-size.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •