Remove Dotted Line Under Date?

  • Author
    Posts
  • #316546

    jsebooth
    Member

    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.

    #316864

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

    #316873

    aw1923
    Member

    add this
    abbr.published {border: none;}

    #316881

    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.

    #316914

    jsebooth
    Member

    @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.

    #316917

    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.

    #316929

    devblog
    Member

    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.

    #316930

    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.

    #316932

    Oh, and thanks for the link to the conversion table. I’ve bookmarked it and put it in my “Web Resources” folder.

    #316948

    @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

    #316949

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

    #316950

    devblog
    Member

    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

    #316953

    devblog
    Member

    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.

    #316954

    “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.)

    #316956

    devblog
    Member

    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.

    #316957

    devblog
    Member

    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.

    #316958

    Thanks once more (won’t be the last time, I suppose)!

The topic ‘Remove Dotted Line Under Date?’ is closed to new replies.