CSS

There are 2 posts tagged CSS (this is page 1 of 1).

Prevent Long URLs From Running Wild

When Raf commented on one of my recent posts by pasting a URL into the comment box, the Recent Comments widget didn't handle the long URL properly:

The fix was simpler than I'd imagined. By adding the following CSS style to the

  • tag that contained the recent comments,

    style="overflow:hidden!important;"

    I was able to prevent the URL from breaking out of the box:

    Of course this doesn't fix the problem in Internet Explorer 6 (go figure), but I'm sure there's a way of fixing it with some Javascript. If you happen to know how, please leave the solution in the comments.

    • Pretty Image Borders with CSS

    You may have noticed a lot of the pictures I've been posting lately have a little border around them. I started doing this after I saw Raf's site and realized how easy it is to do with a CSS class.

    One of the big annoyances I used to deal with when posting images was that I would always need to add border="0" to the <img> tag to prevent the ugly blue borders that appear when the image is surrounded with a link tag. Although it's possible, I didn't even think to disable all image borders in CSS. By why only disable them when we can make pretty borders too?

    Here is the CSS I use (place it in your style.css file if you use one):

    [sourcecode lang="css"]
    .photo img, .photo a img {
    border:1px solid #CCCCCC !important;
    padding:5px;
    margin-bottom: 10px;
    }
    [/sourcecode]

    And here is how I use it when I'm writing a post in WordPress (keep in mind that I don't use the visual editor):

    [sourcecode lang="html"]
    <div class="photo">
    <a href="http://raamdev.com">
    <img src="http://images.raamdev.com/DSC_1112_640.JPG">
    </a>
    </div>
    [/sourcecode]

    And here is an example of the output:

    The CSS border adds a touch of style to the image and without it the image border would appear sharp and out of place. Since I added .photo a img to the class definition, even images that are linked to something will appear with the nice border.

    There are already buttons for creating links and adding images in the WordPress editor, but adding the <div> tags around the image does take a bit of time. Eventually I'd like to write a quick plugin for WordPress that adds a little photo button to the editor bar to automatically add the DIV tag with the proper CSS class already specified.