I have an ul with varying-length li's, but a fixed width. I also have some icons in the li.
<ul>
<li><span class="icon"></span>Long Text with text-overflow:ellipsis</li>
<li><span class="icon"></span>Short text</li>
<li><span class="icon"></span>Long Text with text-overflow:ellipsis</li>
</ul>
The li's have the text-overflow property set to text-overflow:ellipsis;.
But the clipped text that would have been overflowing blocks elements behind it (.icon) from registering the cursor hovering
my CSS:
.icon {
height:18px;
width:18px;
float:right; /*there is a good reason for this, don't complain ;) */
cursor:pointer;
background:url(icons.png);
background-position:-72px -72px;
}
.icon:hover {
background-position:-90px -72px;
}
li {
text-overflow:ellipsis;
height:20px;
overflow:hidden;
white-space:nowrap;
list-style-type:none;
width:150px;
}
Check my jsfiddle, it explains it a hell of a lot better than I do :p
http://jsfiddle.net/eXXTG/
The overflowing text hidden by text-overflow:ellipses stops the dom from registering the cursor hovering above things that are behind the text (or where the text would be).
Any ideas on fixing this?
Cheeers
You can add
position: relative
to the .icon class
Just add display block to icon class:
.icon {
height:18px;
width:18px;
background:url(http://www.darkroomart.com/dewolfe/css/images/dw-icons.png);
float:right;
/*there is a good reason for this, don't complain ;) */
cursor:pointer;
background-position:-72px -72px;
display: block;
}
Related
I am implementing a close button on an element containing text with CSS. The close button is generated content from a pseudo element with content:'X';. I need the cursor to become a pointer on that "X" so I used :
cursor:pointer;
It works fine in Chrome and Firefox but it doesn't seem to work in Internet Explorer (testing on IE11 windows 7).
DEMO (test in IE)
I also tried with cursor:hand; but it doesn't solve the issue. How can I make the cursor a pointer while hovering the "X" but not on the text of the div?
Relevant code :
div{
font-size:2em;
position:relative;
display:inline-block;
}
div::before{
content:'X';
cursor:pointer;
display:block;
text-align:right;
}
<div>some text</div>
--EDIT--
I am aware that making a child or sibling in the markup and applying cursor:pointer; to it will work but I would like to minimize markup and use a pseudo element for the close button as it has no semantic value.
I'm really late to the game, but I just now figured out a solution to this problem.
This solution allows a pointer on the child element, while retaining a default cursor on the parent element.
(See the accepted answer here for a solution that doesn't include keeping the parent element's cursor default: cursor: pointer doesn't work on :after element?)
First of all, for this hacky solution, you have to give up the ability to interact with the parent element using the mouse.
Set the parent element to cursor: pointer.
Then, setting the parent element to pointer-events: none will allow you to "click/hover through" the parent element.
Then, for the pseudo element, just re-enable pointer events with pointer-events: auto.
Voila!
div{
font-size:2em;
position:relative;
display:inline-block;
/* remove ability to interact with parent element */
pointer-events: none;
/* apply pointer cursor to parent element */
cursor:pointer;
/* make it more obvious which is child and which parent for example*/
background: darkred;
}
div::before{
content:'X';
display:block;
text-align:right;
/* restore ability to interact with child element */
pointer-events: auto;
/* make it more obvious which is child and which parent for example*/
width: 30px;
text-align: center;
background: white;
}
<div>some text</div>
I believe that it's not working in pseudo elements in IE,
What I'm use to do is add cursor: ponter to main element.
If you need to add cursor: pointer to pseudo element only, than only way is to add child element
like:
<div><span></span>some text</div>
div{
font-size:2em;
position:relative;
display:inline-block;
}
div > span{
cursor:pointer;
}
div > span::before{
content:'X';
display:block;
text-align:right;
}
But than is no point to using pseudo class...
demo
HTML:
<div>
<div id="closebutton">
X
</div>
some text
</div>
css:
div{
font-size:2em;
position:relative;
display:inline-block;
}
div#closebutton{
cursor:pointer;
display:block;
text-align:right;
}
DEMO
demo
div{
font-size:2em;
position:relative;
display:inline-block;
border:1px solid #000;
margin:20px;
padding:20px;
}
div:after{
cursor:pointer;
display:block;
position:absolute;
height:20px;
width:20px;
top:-10px;
right:-10px;
content:'X';
font-size:15px;
}
<div>
some text
</div>
In order to make IE 7,8,9,10 behave like regular browsers that can deal with pseudo selectors, I always use IE7.js, a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues related to Internet Explorer. An alternative would be modernizr.js which is a good implementation to get pseudo selectors working with IE. I hope, that helps.
I have This Menu For Horizontal Menu. How To generate css for selected li or a.li.
HTML :
<ul class="arrowunderline">
<li>Home</li>
<li>New</li>
<li class="selected">Revised</li> <!-- IF a.LI selected <a class="selected" > END -->
<li>Tools</li>
<li>CSS</li>
<li>Forums</li>
</ul>
CSS:
ul.arrowunderline{
list-style-type:none;
margin:0;
padding:0;
text-align:center; /* enter "left", "right", or "center" to orient the menu accordingly */
font: bold 16px Georgia;
margin-top: 60px;
}
ul.arrowunderline li{
display:inline;
margin-right:25px; /* spacing between each menu item */
}
ul.arrowunderline li a{
position:relative;
color:black;
padding-bottom:8px; /*spacing between each menu item and arrow underline beneath it */
text-decoration:none;
}
ul.arrowunderline li a:hover:after{ /* use CSS generated content to add arrow to the menu */
content:'';
position:absolute;
left:50%;
margin-left:-75px;
margin-top: -60px;
width:150px;
height:40px;
background:url(http://i.stack.imgur.com/7jpU4.png) center bottom no-repeat;
}
UPDATE : Online Demo: http://jsfiddle.net/uc6Yz/2/
Might be you are looking for this:
//CSS
.selected{
background: red;
}
add this class to your <li> of respective page. let me explain if you are in home page add selected class to your <li class="selected"><a>Home</a></li> OR if you are in Forums page then add selected class to respective <li> like: <li class="selected"><a>Forums</a></li>
When you visit on home page the home menu get selected and when you visit on forum page forum menu get selected.
find here: http://jsfiddle.net/KkP7J/
You want that top border on permanent for selected right?
For this.
$('.arrowunderline li').on('click', function(){
$('.arrowunderline li').removeClass('selected');
$(this).addClass('selected');
});
are you looking for this?
ul.arrowunderline li.selected {
//place your code here (to modify list item)
}
ul.arrowunderline li.selected a {
//place your code here (to modify the "a" item when li is selected)
}
your question is a bit too dry, can you explain yourself al little bit more?
I'm starting to use the :before pseudo element to display logos before anchor text in a list.
I've followed Nicolas Gallagher's instructions, but the background images are not displaying in IE8. Works in other browsers. Anyone see what I might be doing wrong?
I've posted the example here:
http://vervedesignstudios.com/gb/testBefore.html
Here is the markup:
Thanks in advance for your advice.
<style>
/* Pseudo-element cropping bit */
.iLst24 li a:before {
content:"";
float:left;
width:24px;
height:24px;
margin:0 6px 0 0;
background-image:url("images/HomeSprite.png");
}
.iLst24 .fb a:before {background-position:0 0;}
.iLst24 .tw a:before {background-position:0 -50px;}
.iLst24 .yt a:before {background-position:0 -100px;}
</style>
<div class="iLst24">
<ul>
<li class="fb">Facebook</li>
<li class="tw">Twitter</li>
<li class="yt">YouTube</li>
</ul>
</div>
IE8 has multiple issues with float and specific width/height values on tags. Try adding a "zoom:1" to trigger haslayout and see if that helps.
I have a menu:
<div id=menu>
<ul=navigation>
<li><a href=>Home</a></li>
</ul>
</div>
With the sliding doors technique I want to create my button (containing rounded corners at the bottom.)
I can get this to work, by hovering the a and the li. But the li is bigger, and if I hover over the li, without hovering the a, only the background image for the li shows.
Now I'm wondering if there is a way to connect the hover of the li and the hover of the a within css. I rather fix this problem without using javascript.
Googleing didn't helped me further. I'm guessing this isn't possible, but I wanted to be sure before trying other options.
Thanks in advance for any advice/help/suggestions.
From what I gather you cannot do what you are after in the way you have described it.
However what I would do is make the "a tag" display as block and set the width and height to fill the "LI" that way you can use a:hover and change the whole bg which makes it look like the LI is changing
li a {
background:#000 url(images/bg.png) no-repeat 0 0;
display:block;
height:20px;
width:100px;
}
li a:hover {
background:#fff url(images/bg.png) no-repeat 0 -20px;
}
also use some padding to sit the text in the right place within the "LI" and remove any padding from the "LI"
li:hover is not supported without JS in older versions of IE so using a:hover instead provides better cross browser compatability
You can do this simply with:
<div id=menu>
<ul>
<li><a href=>Home</a></li>
</ul>
</div>
Then in your CSS:
#menu ul li:hover{
background-image:url(newimage);
}
If you require IE6 compliance, just make your links fill the entire width of the UL's.
#menu ul li a:link, #menu ul li a:visited{
display:block;
width:999px; <-- enter pixels
height:999px; <-- enter pixels
}
then modify the background image normally with:
#menu ul li a:hover{
background-image:url(newimage);
}
#menu li {
/* normal li style */
}
#menu li a {
/* normal a style */
}
#menu li:hover {
/* hover li style */
}
#menu li:hover a {
/* hover a style */
}
Will not work with IE6...
I'm really frustrated with this one. A few weeks ago I got it working in both firefox and ie just fine. Went back today to do some testing and found a problem with the display in firefox and I've been searching the code but can't find anything. I could use a few tips from anyone willing, I'm sure I'm looking at the wrong things. I upgraded my firefox version but I imagine my code is broke, not firefox. I'm assuming the problem is somewhere in my css file, but I'm not sure.
Here's what I've confirmed so far. There don't seem to be conflicts in other css files with < ul >'s or < li >'s that may be overriding settings. The other confirmation is that This works fine in Internet Explorer...therefore I must be an idiot, because its usually been the other way around (working in FF, but failing in IE).
Here's How it looks in IE (Notice the position of the folder icon right next to the text):
alt text http://www.redsandstech.com/ie_works.jpg
Here's how it looks in FF (Notice the folder icon is not being pushed down with its corresponding text).
alt text http://www.redsandstech.com/ff_broken.jpg
Here's the Unordered List:
<ul id="nav">
<li><a>Utah</a></li>
<ul>
<li><a>ParkCity</a>
<ul>
<li><a>Com1</a></li>
<ul>
<li class="folder_closed"><a>Timber</a></li>
<div>SQUARE CONTAINER IS INSIDE THIS DIV</div>
</ul>
</ul>
</ul>
</ul>
Here's the CSS that is used for the whole menu:
/* MENU NAVIGATION (<UL><LI> LISTS
****************************************/
ul#nav{
/* This handles the main root <ul> */
margin-left:0;
margin-right:0;
padding-left:0px;
text-indent:15px;
}
ul#nav div{
overflow: hidden;
}
#nav li>a:hover {
cursor: pointer;
}
#nav li > ul{
/* This will hide any element with an id of "nav" and an "li" that has a direct child that is a "ul" */
display:none;
margin-left:0px;
margin-right:0px;
padding-left:15px;
padding-right:0px;
text-indent:15px;
}
#nav li {
list-style-type:none;
list-style-image: none;
}
#nav > li{
vertical-align: top;
left:0px;
text-align:left;
clear: both;
margin:0px;
margin-right:0px;
padding-right:0px;
}
.menu_parent{
background-image: url(../images/maximize.png);
background-repeat: no-repeat;
background-position: 0px 1px;
position:relative;
}
.menu_parent_minimized{
background-image: url(../images/minimize.png);
background-repeat: no-repeat;
background-position: 0px 1px;
position:relative;
}
.folder_closed{
position:relative;
background-image: url(../images/folder_closed12x14.png);
background-repeat: no-repeat;
background-position: 0px -2px;
}
.folder_open{
position:relative;
background-image: url(../images/folder_open12x14.png);
background-repeat: no-repeat;
background-position: 0px -2px;
}
</ul>
You have encountered one of the greatest and most frustrating CSS differences between IE and other browsers.
My advice is to use a reset stylesheet, and to style tree icons as backgroundImages of their containers.
For example, one of your tree items might be
<div class="folder">This is a folder</div>
and have the following CSS:
.folder {
background-image: url(someImage.png);
background-repeat: no-repeat;
background-position: 0 0; /* or wherever you like */
text-indent: 20; /*enough room for a 16x16 icon with a little space to the right */
}
}
I do this kind of thing always using DIVs, not UL>LI combinations. YMMV. You can do the same thing with UL>LI, but I don't like the differences in where the bullets are placed, etc., and if you use a reset stylesheet anyway, you are simply converting the LI containers to something resembling a DIV anyway.
Your markup has some errors, so it is up to the browser how to generate the DOM.
ul can only have li as child, not div or another ul. Fix the markup, and see what happens.
I've been having problems with firefox when I use overflow:hidden on my lists. Try taking out overflow:hidden and see if that changes things.
For my issue, if I use overflow hidden then it causes my ordered lists to not show their A.,B.,C. or 1., 2., 3. etc... (turns it into an unordered list, with no bullets)
Didn't test but this may have to do with the fact that FF uses margin to set the bullet marks while IE uses padding. Or is it the other way around? Forgot.