Need help? Check out our Support site, then


Remove Dotted Line Under Date?

  1. My blog with the problem:
    http://scutreport.wordpress.com

    I have tried looking at the abbr.published and entry-date, but nothing that I try seems to remove the dotted line under the date. I can't figure out where the line is coming from.

  2. What dotted line under the date? All I see is the date with a blue background partially hidden under the white post container.

  3. add this
    abbr.published {border: none;}

  4. Just a couple thoughts. Making my browser window smaller in width pushes the dates out and they cannot be seen. Also, the dates are partially hidden under the white post container as I said. My suggestion is that you set things up so that the dates don't disappear under the left browser window border when the browser window is made narrow. This happens in Firefox 3 and Safari 3.

  5. @aw1923 - Thanks! I could have sworn I tried that earlier and it didn't work, but it works now.

    @thesacredpath - Yea. I noticed that too. I really want to have the date off to the side like that, but I don't know how to do it with the sandbox-10 theme other than using relative positioning, and that doesn't seem to trigger a horizontal scroll bar.

  6. I think the only person who could tell you how to do that would be devblog. Hopefully he sees this thread and pops in with some help on it.

  7. jsebooth,

    To fix the date problem, replace the code of your current definitions with this one:

    #wrapper {
    width:1085px;
    font-family:Calibri,Helvetica,Arial,sans-serif;
    margin:0 auto;
    padding:0;
    }
    
    #header {
    background: transparent url('http://scutreport.files.wordpress.com/2009/01/header_title_v4a.png') center top no-repeat;
    height:260px;
    margin:0 0 0 85px;
    padding:0;
    }
    
    #container {
    float:left;
    width:785px;
    overflow: hidden;
    margin:0;
    padding:0;
    }
    
    #content {
    background:#fff url('http://scutreport.files.wordpress.com/2009/01/textarea_top_v1a.jpg') 0 0 repeat-x;
    width: 680px;
    margin:0;
    padding:10px 10px;
    margin: 0 0 0 85px;
    }
    
    #footer {
    clear:both;
    margin: 0 0 0 85px
    }
    
    .entry-date {
    overflow: hidden;
    color:#fff;
    background:#0079ab;
    width:74px;
    font-size:1.7em;
    font-weight:bold;
    text-align:right;
    text-decoration:none;
    position:relative;
    right:92px;
    bottom:40px;
    white-space:nowrap;
    margin:0;
    padding:5px 0 5px 8px;
    }

    I few pointers:

    a) Don't use pixel units (px) for font sizes. Use 'em' or '%' instead (notice I changed the font-size property in the entry-date definition to ems. It produces the same result. This conversion table may be of help.

    b) You don't need to write your selectors like this: "div#wrapper". Just "#wrapper" will suffice.

    Hope this helps.

    --

    TSP,

    I've noticed in previous posts that you encourage people to not use pixel units. I'd like to take this opportunity to thank you for encouraging good practices.

  8. devblog,

    Thanks. I did a lot of reading on the current HTML standards as well as quite a bit on CSS, and it mentioned in several places to specify fonts in em units rather than pt or px, and then I saw you mention it one time so I've tried to mention it to people when I notice it.

  9. Oh, and thanks for the link to the conversion table. I've bookmarked it and put it in my "Web Resources" folder.

  10. @devblog: I tried that conversion table in the post editor, and I found that the pt-px equivalences are as shown, and so are the em-% equivalences, of course, but pt or px give me different (larger) results than em or %. Your expertise please!

    @tsp: perhaps you'll find this also useful:

    http://convert-to.com/pixels-px-to-em-conversion.html

  11. @pan, thanks for the link, I've added it to my resources as well.

  12. panaghiotisadam,

    That happens depending how the fonts are defined (if at all) in the parent element, say for instance in the body tag. So, if you have something like this:

    body {font-size: 100% (or 1em);}

    The browser will automatically make the fonts bigger, and the children element's fonts will be sized in relation to the parent making them look different.

    If you take that property from the body definition, then the size of your fonts should look as intended.

    HTH

  13. Allow me to correct myself.

    If the font size is set to 1em in the definition of the body selector, then it shouldn't affect at all the size since "1em" is the base size. It'd make a difference if it has a value other than 1em or 100%.

    Also, scratch this:

    If you take that property from the body definition, then the size of your fonts should look as intended.

    For a test, take one of my skins (try blooish, for instance) you'll see that in the body selector I'm defining the font-size to .8em, change that to 13px and you'll see that the font-size throughout the blog will be pretty much the same with some slight differences.

    BTW, thanks for sharing that site.

  14. "HTH": Of course it does and thank you! Now what I'm not sure about is if your em-rather-than-px recommendation applies to the WP html editor as much as it does to the CSS style sheet. (Sorry to bother you, but since I sometimes give coding suggestions here, they'd better be improved when they can.)

  15. No, you don't bother at all. Whenever you have a question, just ask away. I'm always glad to share what I know.

    Now what I'm not sure about is if your em-rather-than-px recommendation applies to the WP html editor as much as it does to the CSS style sheet.

    That's a good point you make. It should apply the same as in the CSS style sheet... but we have to take into consideration the parent-child relationship I explained above.

    Say for instance, that in the CSS the "p" tag has a font-size set to ".75em" or "12px", that would affect the style you give to a div tag in the HTML editor. So, if you write this:

    Lorem ipsum dolor <span style="font-size: 1.5em">sit amet</span>.

    The HTML the servers serves will look like this:

    <p>
    Lorem ipsum dolor <span style="font-size: 1.5em">sit amet</span>.
    </p>

    And if in the CSS the "p" tag has a font-size set to ".75em", the "1.5em" in the span tag will be smaller than those whose parent element has a font-size set to "1em".

    Now, if in the span tag instead of setting the font-size to "1.5em" you set it to "16px", then since pixels are absolute values, it will look bigger than the rest of the text.

    Hope this clarifies it further.

  16. that would affect the style you give to a div tag in the HTML editor

    change div for span... darn... that's what happens when I don't drink coffee on Sundays.

  17. Thanks once more (won't be the last time, I suppose)!

Topic Closed

This topic has been closed to new replies.

About this Topic