Grow your CSS skills. Land your dream job.

Odd anchor display bug

  • # July 20, 2009 at 9:47 am

    Hey everyone,

    I’ve been coding for roughly 2 months now, so this is all still a learn in process :)

    So…

    I’m designing a game news/review website. I have an RSS section at the top, nothing too fancy, RSS button, subscribe text, and feedburner count. However, the rss button renders out fine in Firefox, but in IE it gives me a border and image error (?), while Opera gives me the border and continues to display the text.

    I’m not quite sure what this bug would be called, otherwise I would search for it, so I figured I’d turn to you kind people :)

    Anyway, could someone take a look for me and let me know? I’d greatly appreciate it.

    http://www.rezpls.com

    Also, here’s the CSS:

    Code:
    /* RSS */
    #rss {
    position: absolute;
    bottom: 5px;
    right: 30px;
    width: 210px;
    height: 70px;
    }

    .rssButton {
    background: url(images/rss.png) no-repeat; /* Set the background image to RSS img */
    text-indent: -9999px; /* Indent the RSS text */
    width: 67px; /* Set the width */
    height: 66px; /* Set the height */
    float: left; /* Float left */
    }

    .rssButton a {
    display: block; /* Sets the anchor as block */
    height: 66px; /* Height of the anchor block */
    width: 67px; /* Width of the anchor block */
    }

    .rssSubscribe {
    color: #ffffff;
    text-decoration: none;
    float: right;
    }

    .feedburner {
    float: right;
    position: relative;
    top: 15px;
    right: 25px;
    }

    # July 20, 2009 at 12:02 pm

    The problem is you are using img tags where there is no image. It should be a either an image link with the image in the markup or an ordinary text link with the text hidden and the image on the background.
    So it’s

    Code:

    or

    You might want to validate too http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.rezpls.com%2F

    # July 20, 2009 at 2:42 pm

    Oh excellent, that did it.

    I’m not sure why I had an img tag in there, brain fart.

    But, as one thing is fixed, another things inevitably gets messed up it seems.

    For some reason now, the s3slider isn’t working at all. I did upgrade to wordpress 2.8.2 from 2.8.1. I did not touch any of the slider code, and now it won’t display. Looking at firebug, it’s showing that the info and images are still being pulled, but not displayed.

    So I think it may be some sort of JQuery conflict, perhaps when I upgraded to WP 2.8.2?

    I noticed that IE gives me an error at the bottom, which says essentially "Object doesn’t support this property or method" on line 105.

    Code:
    $(document).ready(function() {

    as apart of the s3slider code:

    Code:

    I know this may be more appropriate in the JQuery section, however, I wouldn’t want to make duplicate/double posts.

    Thank you for the previous fix, but now, can anyone lend any further insight?

    (Also, I was looking through the validation, and 20 errors makes me :( , but these are being generated directly from the wordpress loop. A lot of them are saying it has an error with the ">" and such, but they are closed.)

    # July 20, 2009 at 3:07 pm

    Try this with the slider:

    Code:

    And it should be in the document head (if not a separate js file) and not in the middle of the page.

    The validator doesn’t lie. Your search form is wrapped in <li> tags but no <ul>. Throughout the slider div there are divs inside the <ul> and <h4>’s wrapped in <span> and <strong> tags.

    # July 20, 2009 at 3:19 pm

    Thank you for the help so far, it has been very informative.

    What I found out, just as I was about to make this reply, was that the "lightbox" plugin I had running, was conflicting with the slider jquery. I deactivated the lightbox plugin, and the slider works, so I’ll fiddle with that to get both of them functioning.

    I think I had much of those errors because I was trying to apply the wordpress loop to the s3slider. It was just trial and error, but now I see it does indeed have many errors haha.

    I’ll continue to tweak this in the meantime.

    This is only my second site that I’ve been working on and, of course, I gave myself the challenge of jumping into styling wordpress, which has been a real pain at times, but has been quite the experience.

    Thanks again!

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".