Back Home

Open Designs

Community. Driven.

    • CommentAuthorrobbie
    • CommentTimeJun 10th 2008
     
    Hey everyone,

    W3 won't give me a break when trying to validate this design. Validation error is here.

    I know what the problem is, but I don't know how to fix it. If I remove the <a class="rss" href="<?php bloginfo('rss2_url'); ?>">&nbsp;</a> from my sidebar, it validates. The rss class is to display the rss button. (rss2_url) is just the url to my feeds.

    I know I have to add >li< to validate it : <li><a class="rss" href="<?php bloginfo('rss2_url'); ?>">&nbsp;</a></li>
    But the button turns into a navigation link afterward. (on hover)

    Help anyone?
    •  
      CommentAuthorOutsider
    • CommentTimeJun 10th 2008
     
    You can't put anything in a <ul> unless it is wrapped in a <li></li>. I'm not quite sure what you mean by it turns into a navigation link on hover? Can't you over ride it in CSS?
    • CommentAuthorrobbie
    • CommentTimeJun 10th 2008
     
    If you go over on a link (in the navigation), the background color changes. And when I put li tags around the rss icon, and go over the icon with my mouse, it changes the icons background and the icon dissapears. (wow.. one to many icons lol).

    I'm still trying, but can't find the solution.
    •  
      CommentAuthorainslie
    • CommentTimeJun 10th 2008
     
    Can you specify the image for the hover with the rss class so that it is present in both states?
    • CommentAuthorrobbie
    • CommentTimeJun 10th 2008 edited by robbie on the 10th June 2008 at 17:20:00 EDT
     
    Well, I tried this (without success):

    .rss {padding:0 0 0 18px; background: url(http://krneky.com/feed.jpg) center left no-repeat;}

    .rss a:hover {padding:0 0 0 18px; background: url(http://krneky.com/feed.jpg) center left no-repeat;}


    Does this have any logic at all?

    *edit*
    Also tried this

    .rss li a:hover {padding:0 0 0 18px; background: url(http://krneky.com/feed.jpg) center left no-repeat;}

    .rss .links li a:hover {padding:0 0 0 18px; background: url(http://krneky.com/feed.jpg) center left no-repeat;}
    •  
      CommentAuthorainslie
    • CommentTimeJun 10th 2008
     
    I was thinking more of:

    a.rss:hover {put your stuff here}

    To target the hovered link class of rss

    Not sure if it will work and can't play as I'm reinstalling my laptop and not got very far yet.
    • CommentAuthorrobbie
    • CommentTimeJun 10th 2008
     
    That halfway works a.rss:hover {padding:0 0 0 18px; background: url(http://krneky.com/feed.jpg) center left no-repeat;}

    Same problem both in IE and Firefox, when I hover it, the image blinks like 96 times in a minute. (didn't count)..
    •  
      CommentAuthorainslie
    • CommentTimeJun 10th 2008
     
    I don't get the blinking in IE7.

    I think the hover for the other links is is effecting it as I get the blue highlight. Can you recode and use a class on the menu links? If it is wordpress what about "page_item".

    Do you see what I am getting at?
    • CommentAuthorrobbie
    • CommentTimeJun 10th 2008
     
    I'll play with this tomorrow, my bed is calling for some sleep.

    I see where your getting at, and I appreciate your help :) thank you very much.
    •  
      CommentAuthorainslie
    • CommentTimeJun 10th 2008
     
    No problem. I'm sure it will work. I haven't got my stuff installed yet so can't do much testing myself yet.
  1.  
    Try applying the class rss to the li instead of the a tag.
    • CommentAuthorrobbie
    • CommentTimeJun 11th 2008
     
    Tried it, displays image and everything, but it's not clickable...

    <li class="rss"><a class="rss" href="<?php bloginfo('rss2_url'); ?>">&nbsp;</a></li>

    <li class="rss"><a href="<?php bloginfo('rss2_url'); ?>">&nbsp;</a></li>

    I tried both..
  2.  
    I think this should work for you.
    li a:hover.rss {padding:0 0 0 28px; background: url(http://krneky.com/feed.jpg) center left no-repeat;}

    Or you could try using an image with a link, instead of the image as a background.