ul hover issue

  • Resolved dumpyparthan

    (@dumpyparthan)


    12 years, 1 month ago

    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("https://127.0.0.1:4001/wordpress/wp-content/uploads/2013/02/servleft2_01.png");}

#serv1a:hover {background:url("https://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("https://127.0.0.1:4001/wordpress/wp-content/uploads/2013/02/servleft2_02.png");}

#serv2a:hover {background:url("https://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("https://127.0.0.1:4001/wordpress/wp-content/uploads/2013/02/servleft2_03.png");}

#serv3a:hover {background:url("https://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("https://127.0.0.1:4001/wordpress/wp-content/uploads/2013/02/servleft2_04.png");}

#serv4a:hover {background:url("https://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("https://127.0.0.1:4001/wordpress/wp-content/uploads/2013/02/servleft2_05.png");}

#serv5a:hover {background:url("https://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("https://127.0.0.1:4001/wordpress/wp-content/uploads/2013/02/servleft2_06.png");}

#serv6a:hover {background:url("https://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("https://127.0.0.1:4001/wordpress/wp-content/uploads/2013/02/servleft2_07.png");}

#serv7a:hover {background:url("https://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("https://127.0.0.1:4001/wordpress/wp-content/uploads/2013/02/servleft2_08.png");}

#serv8a:hover {background:url("https://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("https://127.0.0.1:4001/wordpress/wp-content/uploads/2013/02/servleft2_09.png");}

#serv9a:hover {background:url("https://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("https://127.0.0.1:4001/wordpress/wp-content/uploads/2013/02/servleft2_10.png");}

#serv10a:hover {background:url("https://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="https://127.0.0.1:4001/wordpress/services/">Service</a></li>
	<li style="text-align: left;"><a id="serv2a" href="https://127.0.0.1:4001/wordpress/?page_id=18">e-CRB</a></li>
	<li style="text-align: left;"><a id="serv3a"  href="https://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="https://127.0.0.1:4001/wordpress/services/ecrb/application-support/">Support</a></li>
	<li  style="text-align: left;"><a id="serv5a" href="https://127.0.0.1:4001/wordpress/services/slim/">SLIM</a></li>
<li style="text-align: left;"><a  id="serv6a" href="https://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="https://127.0.0.1:4001/wordpress/services/slim/application-support-slim/">Support</a></li>
	<li style="text-align: left;"><a id="serv8a" href="https://127.0.0.1:4001/wordpress/services/software-development/">Software Development</a></li>
	<li style="text-align: left;"><a id="serv9a" href="https://127.0.0.1:4001/wordpress/services/kaizen-support/">Kaizen Support</a></li>
	<li style="text-align: left;"><a id="serv10a" href="https://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)

  • 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…

    https://127.0.0.1:4001

    So we may not be able to assist…

    Thread Starter dumpyparthan

    (@dumpyparthan)

    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.

    Thread Starter dumpyparthan

    (@dumpyparthan)

    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?

    Thread Starter dumpyparthan

    (@dumpyparthan)

    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…

    Thread Starter dumpyparthan

    (@dumpyparthan)

    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…

    Thread Starter dumpyparthan

    (@dumpyparthan)

    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 ‘ul hover issue’ is closed to new replies.