WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] ul hover issue

[Resolved] ul hover issue

  • Hi! I’m having a weird issue with rollover inside li tags. The first 5 images work but the next 4 don’t. Any idea where I have gone wrong? When I check with firebug, the IDs are not fetching the css for the ones that are not working. Wondering why…

    CSS :

    #servleft1 li{display: inline-block;float: left;}
    
    #serv1a {display:block; width:210px; height:60px; text-indent:-999em;
    background:url("http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/02/servleft2_01.png");}
    
    #serv1a:hover {background:url("http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/02/servleft1_01.png");}
    
    #serv2a {display:block; width:210px; height:32px; text-indent:-999em;
    background:url("http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/02/servleft2_02.png");}
    
    #serv2a:hover {background:url("http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/02/servleft1_02.png");}
    
    #serv3a {display:block; width:210px;height:31px; text-indent:-999em;
    background:url("http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/02/servleft2_03.png");}
    
    #serv3a:hover {background:url("http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/02/servleft1_03.png");}
    
    #serv4a {display:block; width:210px;height:29px; text-indent:-999em;
    background:url("http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/02/servleft2_04.png");}
    
    #serv4a:hover {background:url("http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/02/servleft1_04.png");}
    
    #serv5a {display:block; width:210px;height:30px; text-indent:-999em;
    background:url("http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/02/servleft2_05.png");}
    
    #serv5a:hover {background:url("http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/02/servleft1_05.png");
    
    #serv6a {display:block; width:210px; height:30px; text-indent:-999em;
    background:url("http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/02/servleft2_06.png");}
    
    #serv6a:hover {background:url("http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/02/servleft1_06.png");
    
    #serv7a {display:block; width:210px;height:30px; text-indent:-999em;
    background:url("http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/02/servleft2_07.png");}
    
    #serv7a:hover {background:url("http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/02/servleft1_07.png");}
    
    #serv8a {display:block; width:210px;height:30px; text-indent:-999em;
    background:url("http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/02/servleft2_08.png");}
    
    #serv8a:hover {background:url("http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/02/servleft1_08.png");
    
    #serv9a {display:block; width:210px; height:31px; text-indent:-999em;
    background:url("http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/02/servleft2_09.png");}
    
    #serv9a:hover {background:url("http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/02/servleft1_09.png");
    
    #serv10a {display:block; width:210px; height:56px; text-indent:-999em;
    background:url("http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/02/servleft2_10.png");}
    
    #serv10a:hover {background:url("http://127.0.0.1:4001/wordpress/wp-content/uploads/2013/02/servleft1_10.png");

    CODE inside Text Widget :

    <ul id="servleft1">
    	<li style="text-align: left;"><a id="serv1a"  href="http://127.0.0.1:4001/wordpress/services/">Service</a></li>
    	<li style="text-align: left;"><a id="serv2a" href="http://127.0.0.1:4001/wordpress/?page_id=18">e-CRB</a></li>
    	<li style="text-align: left;"><a id="serv3a"  href="http://127.0.0.1:4001/wordpress/services/ecrb/tools-for-icrop/">Tools for iCROP</a></li>
    	<li style="text-align: left;"><a id="serv4a"  href="http://127.0.0.1:4001/wordpress/services/ecrb/application-support/">Support</a></li>
    	<li  style="text-align: left;"><a id="serv5a" href="http://127.0.0.1:4001/wordpress/services/slim/">SLIM</a></li>
    <li style="text-align: left;"><a  id="serv6a" href="http://127.0.0.1:4001/wordpress/services/slim/tools-for-slim/">Tools for SLIM</a></li>
    	<li style="text-align: left;"><a id="serv7a" href="http://127.0.0.1:4001/wordpress/services/slim/application-support-slim/">Support</a></li>
    	<li style="text-align: left;"><a id="serv8a" href="http://127.0.0.1:4001/wordpress/services/software-development/">Software Development</a></li>
    	<li style="text-align: left;"><a id="serv9a" href="http://127.0.0.1:4001/wordpress/services/kaizen-support/">Kaizen Support</a></li>
    	<li style="text-align: left;"><a id="serv10a" href="http://127.0.0.1:4001/wordpress/services/bilingual-services/">Bilingual Services</a></li>
    </ul>

    Where am I going wrong? Please help if you can. I am just learning html/ css/ wordpress….

    Thanks.

Viewing 11 replies - 1 through 11 (of 11 total)
  • WPyogi

    @wpyogi

    Forum Moderator

    What is the site URL? Why is there any inline CSS – that’s definitely not the way to code.

    One really needs only provide a site link…the CSS is visible and can be inspected with multiple tools at that point…that said looks like a local host…

    http://127.0.0.1:4001

    So we may not be able to assist…

    Yes, I’m testing it on my local machine so I don’t have a URL to share. Please tell me more about inline css. What does that mean? (display: inline-block???) I read this way of getting a hover effect online. And it was working until now in my child theme. Please suggest anything that I can try…. If you can help, it’ll be great.

    That is normal to display the li’s inline in a ul…not the issue..

    Clarification: inline CSS means the site uses much older techniques to add CSS to the HTML elements…this is considered outdated…what I was referring to is using CSS style to display:inline-block..which is normal for a newer and up to date site to display a menu…a horizontal one…

    Your site should not use inline CSS in HTML but use a proper stylesheet that is called in the header with proper meta.

    Does inline CSS mean the style=”text-indent” that I have used inside the text widget? Even after I removed those, it didn’t help. 🙁
    Anything else that I could try? Can I create a separate stylesheet and call it inside the text widget? If yes, how?

    Sorry I meant style=”text-align: left;” inside
    <li></li>
    [Moderator note: Wrap all code in backticks]

    Yes, one can add to a stylesheet (or better practice, use a child – theme) to override both theme and plugin CSS….to do so, inspect the CSS and discover it…again, without a link we cannot help…

    I am using a child theme for 2011 and wondering if since the CSS sheet has become very long with too much customization & experimenting, the error has occured. So wanted to know if I can make a separate css file just for the text widget and call it. Just that I don’t know how to do that.

    OR there is a specific place in the css where the code has to be inserted. At the moment it’s at the end of all my code. If I put in the beginning, the layout gets messed up and parts of the parent theme are showing up.

    Thanks for your time even though I am not able to post the link here. I am still trying and it just doesn’t seem to work 🙁 The first 5 do and the next 4 don’t! That’s weird!

    Revert to the CSS with Theme and then check your customizations for errors, as we cannot see those, you need to do so…

    Oh my goodness gracious me! I’ve left out a few } at the end! And that was the issue!!! I am TERRIBLY sorry for troubling you. And thanks a zillion for your time.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘[Resolved] ul hover issue’ is closed to new replies.
Skip to toolbar