formatting small links and tag cloud links

  • Author
    Posts
  • #690096

    pstrapp
    Member

    I’d like to make the “small” text links the same size as the surrounding text, e.g. the two links in the footnote in http://embraceyoursexuality.wordpress.com/2011/08/15/whats-normal/

    Also, I’d like to make the tag cloud items not-bold.

    And a bonus would be to normalize the line spacing on the superscript (“Canada*”) in the abovementioned post.

    #690273

    In Safari and Firefox, the links in that footnote at the bottom of the post are the same size as the surrounding text. The whole block of text is set to “small” which is defined as 11px in the CSS.

    This will do the tag cloud.

    #wp_tag_cloud a {
    font-weight: normal;
    }
    #690278

    pstrapp
    Member

    Thanks, the tag cloud looks much better now. :-)

    The footnote links are a curiosity… on my system using Safari and Chrome, the links are definitely emphasized. And also, on Safari and Chrome, the line spacing is regular-size, whereas IE7 adjusts the line-spacing to the smaller text height.

    #690279

    You can change line heigh if you wish, but I’m not seeing a difference in font size. The link and regular text are all at 11px. If you want to change the line height, I would suggest to do it as inline CSS from the HTML tab in the post editor as it would be somewhat difficult to isolate that particular text in the CSS.

    As far as IE, this is just one of the plethora of reasons web designers dream of the day IE will be just a “footnote” in a web history book.

    One other possibility would be to set a “class” in the CSS and format footnotes just as you would want them. Then for a footnote, you would wrap it in p tags and declare a class (if it was only one paragraph) or in divs with a class declaration if more than one paragraph.

    Let me know what you want to do.

    #690420

    pstrapp
    Member

    I’m good with using HTML to handle the special case since footnotes will be infrequent. I tried <span style="font-size:11px;line-height:13px;"> and while the font size is as-ordered, in Safari and Chrome, the line height is unaffected. (I respect your distaste for IE, and it’s the only browser I’ve tried that responds to changing the line-height spec.)

    Sadly, I only know enough about HTML and CSS to be dangerous, so I’m at a loss as to what to try next.

    #690423

    pstrapp
    Member

    I fixed the minor problem of the small-print links being emphasized:
    p a {
    font-size: 100%!important;
    }

    normalized them, but this didn’t change the line height problem.

    I also just realized that the page background colour is different in IE (white) and Safari or Chrome (light pink). Clearly I need to always test mods on all three and have an eagle-eye.

    #690426

    timethief
    Member

    @pstrapp
    thesacredpath will catch up with this CSS editing thread tomorrow. :)

    #690427

    pstrapp
    Member

    :-) I just solved the colour difference with#wrapper {
    background-color: white;
    }

    #690441

    Since I don’t have IE, I can’t really do anything on the line height issue. Different browsers render CSS differently and IE basically defies logic.

    #690445

    pstrapp
    Member

    No worries on the IE question; I can cope with it. The only mystery remaining for me is why <span style="font-size:11px;line-height:13px;">doesn’t reduce the line height in Safari or Chrome. Am I missing something?

    #690448

    Just as a test, try changing it to something like

    line-height: 40px;

    and see what happens.

    #690450

    pstrapp
    Member

    Yes, I’ve tried various line-height values, including 400px. The much-reviled IE7 obediently displays the line height I specify, and Safari and Chrome display it with a constant line height which seems to be the same height as the full-size text.

    It’s a real mystery to me.

    #690452

    Line height can’t, or really shouldn’t be applied to a word or phrase within a paragraph or block of text. Generally it should only be applied to an entire paragraph. Have you tried applying the line height to the entire paragraph?

    <p style="line-height: 13px;">

    #690454

    pstrapp
    Member

    Tried it just now. (Previously, the paragraph was the only thing in the span, i.e. it was not a mix of formats.) Changing it to “p style” instead of “span style” has made no difference.

    Curiouser and curiouser…

    #690456

    Yeah, it’s bizarre.

The topic ‘formatting small links and tag cloud links’ is closed to new replies.