Previous still showing

  • metalroo

    #2004

    In an attempt to further customize my website i tackled the next and previous links today.

    I managed to make it look the way i want but the previous “button” still shows a small box although it is an empty paragraph, without a link, when reading the last post.

    You can see what i mean here: http://www.gendji.eu/?p=134 top left above the post.

    The css code i used is:

    #previous {
    margin-bottom: 0px;
    background: url(images/bg-block-button.png) left bottom repeat-x #284064;
    background: #6b83a9; /* Old browsers */
    background: -moz-linear-gradient(top, #6b83a9 0%, #284064 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6b83a9), color-stop(100%,#284064)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #6b83a9 0%,#284064 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #6b83a9 0%,#284064 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #6b83a9 0%,#284064 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b83a9', endColorstr='#284064',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #6b83a9 0%,#284064 100%); /* W3C */
    border: 1px solid #284064;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 5px #555;
    -webkit-box-shadow: 0 0 5px #555;
    box-shadow: 0 0 5px #555;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin: 2px 2px 2px 2px;
    padding: 2px 3px 3px 3px;
    position: relative;
    text-decoration: none;
    text-shadow: 0 0 0.2em #2B4262, 0 0 0.2em #2B4262;

    }

    #previous:hover {
    background: url(images/bg-block-button-hover.png) left bottom repeat-x #6B83A9 ;
    background: -moz-linear-gradient(top, #284064 0%, #6B83A9 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#284064), color-stop(100%,#6B83A9)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #284064 0%,#6B83A9 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #284064 0%,#6B83A9 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #284064 0%,#6B83A9 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#284064', endColorstr='#6B83A9',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #284064 0%,#6B83A9 100%); /* W3C */
    color: #fff;
    cursor: default;
    text-decoration: none;
    }

    So how do i get the empty “previous” paragraph to not show at all?

    Thank you in advance.

    Anonymous

    #18145

    Hi Gendji,

    I’m sorry to say… it’s your “border” and your “padding” properties working together in your #previous { which is causing this to happen.

    My only suggestion is to remove these two properties, although it’s going to alter the visual image of your links.

    Very nice job, though! That’s some pretty intense css!

    You could probably also write a function to have it not display if it is the first page in the series… but that’s a little beyond my know-how.

    Good luck.

    Anonymous

    #18146

    Indeed it is, just tested it and thanks :-).

    Yeah if i remove them it looks like a smaller version of the button without a border, height and width determined by font size.

    I also have no idea how to put that in a function, haven’t been playing around with that part very much yet. I know how to put them in the child theme but that’s about it 🙂

    Anonymous

    #18147

    Found a partial solution i think, although it’s not fully supported by all browsers:

    #previous:empty {
    display: none;
    }

    Doesn’t work in IE though.

    Anonymous

    #18148

    Awesome. Looks good to me.

    Ken…. I believe you have a comment about IE don’t you??

    Anonymous

    #18149

    @ Gendji,

    I was just thinking, you might be able to add a

    position: relative;

    to your css for #previous:empty {

    This might help with IE, though no guarantee.

    Anonymous

    #18150

    I just tested it but i think IE doesn’t recognize the :empty tag at all.

    Thanks for the suggestion though.

    Mod

    Kenneth John Odle

    #18151

    A comment about IE? No, I only work with real web browsers….

    On the other hand, I have never seen the empty attribute. That works a treat in Firefox.

Viewing 8 posts - 1 through 8 (of 8 total)

  • You must be logged in to reply to this topic.