I set cursor: pointer for .about > span, but when my mouse hovers on those texts in <span>, the cursor does not change into pointer mode. I would like to know why it is not working.
HTML:
<div id="firstdiv">
<div id="intro">
<h1 id="name">YOU CHIA LAI</h1>
<ul>
<li class="about">I am a Master of <span>Architecture</span>
candidate at Rice University.
</li>
<li class="about">I am also interested in <span>photography</span> &
<span>web design</span>.</li>
<li class="about">I wish you can know more <span>about</span> me.
</li>
</ul>
</div>
</div>
CSS:
#firstdiv {
position:fixed;
top:0;
left:0;
right:0;
height:100%;
width:100%;
margin:auto;
background:#E6E6E6;
text-align:center;
font-size:0;
z-index:-2
}
.about > span {
cursor:pointer;
font-family:Eurofurence Light;
padding:0 0 3px 0;
color:#01DFA5;
}
I messed with my css for hours, changing the positioning and z-index of just about every element on the page. I deleted every other element from the DOM except for the one with the cursor: pointer on hover, and it STILL didn't work.
For me, on Mac OSX El Captain V 10.11, the issue had to do with some sort of interference with Photoshop CC. Once I closed Photoshop, the cursor started working again.
Solution for me: Close and reopen Photoshop
Apparently this can happen due to many different programs including Photoshop, Sketch, DataGrip, Acrobat, Sublime Text, etc.
You need to change the z-index so that #firstdiv is considered on top of the other divs.
Just happened to me, and in my case it was due to a CSS rule pointer-events: none; which was set on a parent element and I forgot about it.
This caused any pointer events to be just ignored, which includes the cursor.
To fix this, you can just set the style to allow pointer events:
.about>span{
cursor:pointer;
pointer-events: auto;
}
Or directly in the element:
<span style="pointer-events: auto;">...</span>
cursor:pointer doesn't work when you're using Chrome's mobile emulator.
Also add cursor:hand. Some browsers need that instead.
position: relative;
z-index: 2;
cursor: pointer
worked for me.
For the last few hours, I was scratching my head why my CSS wasn't working! I was trying to show row-resize as cursor but it was showing the default cursor but for s-resize browser was showing the correct cursor. I tried changing z-index but that also didn't solve my problem.
So after trying few more solutions from the internet, I called one of my co-workers and shared my screen via Google meet and he told me that he was seeing the row-resize icon when I was seeing the default icon!!! He even sent me the screenshot of my screencast.
So after further investigation, I found out the as I was using Remote Desktop Connection to connect to my office PC, for some reason RDC doesn't show some type of cursors.
Here is the list of cursor's I couldn't see on my remote PC,
none, cell, crosshair, text, vertical-text, alias, copy, col-resize, row-resize,
It works if you remove position:fixed from #firstdiv - but #Sj is probably right as well - most likely a z-index layering issue.
I had this issue using Angular and SCSS. I had all my CSS nested so I decided to remove cursor: pointer; out of it. And it worked.
Example:
.container{
.Approved{
color:green;
}
.ApprovedAndVerified{
color:black;
}
.lock_button{
font-size:35px;
display:block;
text-align:center;
}
}
.lock_button{
cursor:pointer;
}
The problem in my case was that the :after blocked mouse events, so I had to add pointer-events: none; to my :after block.
I have the same issue, when I close the chrome window popup browser inspector its working fine for me.
The solution that worked for me is using forward slash instead of backslash when 'calling' out from a local directory.
instead of backslash:
cursor: url("C:\Users\Ken\projects\JavascriptGames\images\bird.png"), auto;
Note: When I use backslash I am getting a net::ERR_FILE_NOT_FOUND
I changed it to forwardslash:
cursor: url("C:/Users/Ken/projects/JavascriptGames/images/bird.png"), auto;
Note: When I use forward slash, the custom cursor style executes successfully.
This behavior regarding backslashes and forward slashes could probably be explained in this StackOverflow answer: Strange backslash and behavior in CSS
My problem was using cursor: 'pointer' mistakenly instead of cursor: pointer.
So, make sure you are not adding single or double quotes around pointer.
For me, the issue was that I had this set globally:
::-webkit-scrollbar {
display: none;
}
After removing this, cursor: pointer works as expected.
Remove parent z-index value fixed the issue for me.
Whatever you do, the cursor will not change unless you set the style against :hover
this needs to be as follows, in addition to the class you already have for the elements.
.about > span:hover {
cursor:pointer;
}
I found a solution: use :hover with cursor: pointer if nothing else helps.
Prevent user from selecting text, then use curser:pointer property -
.targeted-span{
user-select: none;
curser : pointer;}
Position the element as relative and then use z-index
.menu-toggle{
display: block;
width: 40px;
height: 40px;
border:2px solid white;
border-radius: 5px;
margin: 15px;
float: right;
cursor: pointer;
text-align: center;
font-size: 30px;
color: var(--light-bg-color);
z-index: 10;
}
Related
I have a control that I am trying to highlight when it is selected. I'm achieving this using padding on a div and some positioning so that it surrounds the control. The problem I'm encountering is that the padding on the highlighter div renders differently in chrome and in firefox. Everything I've read says that they render the same so this shouldn't be a problem.
Chrome:
Firefox:
Here's a fiddle that has the problem on it:
http://jsfiddle.net/5fuGB/1/
.control{
position: absolute;
width: 100px;
height: 20px;
top: 30px;
left: 300px;
z-index: 1;
}
.highlighter{
background-color: orange;
position: absolute;
width: 100%;
height:100%;
left: -2px;
top: -2px;
padding-right: 8px;
padding-bottom: 10px;
z-index: -1;
}
input{
width: 100%;
height: 100%;
}
My Chrome Version:
Version 31.0.1650.63 m on Windows 7
My Firefox Version:
25.0 on Windows 7
Thanks for any help you guys can offer.
I believe the difference you are seeing is a difference which comes from the user agent stylesheet, browsers have their own default stylesheets which they use to render things like input elements. In your case it is probably a difference in the padding applied to the input element. You should specifically set eg: padding: 0px; or padding: 1px; on the input element, and then work out how to get it to look right for an input with the specified fixed padding. This will then override the styles set by the user agent style sheet.
Update
I moved to my Windows PC to have a go at fixing it. One way to fix this using one of the vendor specific prefixes from the answer linked in the comments is to add -moz-padding-end: 6px; to .highlighter to compensate for the differences in padding between browsers.
Here's a jsFiddle which fixes your issue, a footnote tho, I can already tell you that this probably won't fix it on Chrome for OSX, which was also rendering things the Firefox way.
Another way to fix this is by adding -moz-padding-start: 1px; -moz-padding-end: 1px; to input, but doing so somehow changes the bottom padding as well, which makes things look not as pretty in Firefox as with the other fix.
I'd go about it differently. Instead of using an extra div, I'd recommend using a combination of border-color and box-shadow on the input's :focus state to achieve the effect you're going for.
Check out this modified fiddle: http://jsfiddle.net/5fuGB/2/
Just experienced the same issue with my code, and fixed it too. The trick is if you use display: inline-block then line-height makes sense. Try it when debugging your code.
You're doing a little more than what's necessary. To get a highlight around that input you can use :focus
So it would be something like this:
CSS
input {
border: 1px solid white;
}
input:focus {
border: 1px solid orange;
}
That will give the input a white "invisible" border so it doesn't move the input when you click into it. It will simply change the border color to orange to get that highlight effect you're looking for.
EDIT
Just saw your comment. I dont have the rep to comment so I'll just add on to this.
If you aren't using the inputs as actual inputs, then I would just make them divs. Inputs render differently by default so that would mess with consistency across browsers.
I'd also recommend experimenting with those divs within one another and making the most outside div relative.
Outside Div <------ position:relative;
Middle Div <------- position: absolute;
Inner div <-------- position: absolute;
Also, if you need a selected state but don't want or are hindered by inputs then I'd recommend jQuery for modifying the css based on user interaction.
This image is a screenshot of the address http://www.rothemcollection.com/engagement-rings/.
The 's' of 'Recommendations' cut by Google Chrome browser. I tried to change the z-index, move it down with the top or margin-top and it still cuts me to the end.
Does anyone have an idea? It could be related to poor I use a special font? If so, what should I do?
Try this css :
#mainSlider h1 span.big {
font-size: 60px;
line-height: 63px;
display: inline-block;
width: 484px;
position: relative;
}
Define your mainSlider Heading position:relative; or define z-index:1;
As like this
#mainSlider h1{
position:relative;
z-index:1;
}
Result is
There is issue, most likely it is related to opacity and css engine rendering, supposely because of some optimization. I would suggest more the header to left by 6 pixels to avoid overlapping of images to it, something like this.
#mainSlider h1 {
left: -6px;
position: relative;
...
There's a few ways to do this - I'll add my view to the mix. Try adding z-index:-1; to the .ring class. This will produce problems if you want to make the images links at some point, but should work in your current setup.
#mainSlider .ring{
position: absolute;
right: 0;
z-index:-1;
}
I reduced the text size by one pixel and problem solved.
Not a suboptimal solution but still works. Unfortunately, the solutions did not help.
Thank you all.
I am developing for an existing web application on an internal server, I can't really post all the code here as it's very very messy but I can show you guys a screenshot of the problem and the relevant css code:
The languages menu should be on top of the blue bordered box, but instead it's beneath.
It works great in FF, this is a IE7 screenshot
blue bordered box css:
.categoryBox {
width:100px;
background-color:#000;
border-style:solid;
border-width:1px;
border-color:#007CF7;
padding:5px;
float:left;
height:260px;
margin-right:25px;
margin-bottom:20px;
text-align:center;
width:200px;
position:relative;
}
language menu css:
#ChooseLanguageDlg
{
display: none;
position: absolute;
width: 87px;
height: 180px;
padding-left: 10px;
padding-right: 10px;
padding-top:0;
margin-top: -9px;
border: none 1px White;
left: 751px;
top: 10px;
font-size:11px;
overflow:hidden;
text-align:center;
}
Note: the languages menu is using a javascript toggle to show/hide.
EDIT:
Adding z-index to the language box does not change the visibility in IE
IE7 has known problems with z-index. Without seeing your page, the best I can do is point you to some useful links which explain the problem:
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
IE7 Z-Index Layering Issues
http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/
The general idea is to poke position: relative (usually remove it) and z-index on parent elements of your drop down until it's fixed.
Good luck!
Setting the z-index of the language box manually may help. Of course, if you don't want to do this, putting the language box after the blue box in the markup will do the trick too.
You could try adding a z-index. This'll define which element is on top of which element:
z-index
add a z-index to the style for the language box?
IE has some problem with z-index (see Google). As I had to fix a similar problem I was forced to use javascript to hide the background elements, which isn't really suitable for you.
You could try to change the order of creation in the html code, if possible.
I am working on a website and on the top navigation bar there is a search box, I applied the following css on the search submit button
#submit {
background: url("img/new-search-icon.png") no-repeat scroll -1px 0 #FFFFFF;
border:0 none;
cursor:pointer;
display:block;
height:21px;
padding:0;
position:absolute;
right:0;
text-indent:-9999px;
top:0;
width:20px;
z-index:2;
}
My Problem is in IE7 the text indent is not working please help me
if you want to see the demo you can view it by clicking here Click here. Please help me.
Add this CSS to make IE7 behave:
text-transform: capitalize;
Crazy but true.
while implementing the image replacement technique like above, there are some rules to go with css to get it work on IE browsers.
css declaration:
text-indent:-9999px;
text-transform:capitalize;
font-size:0;
display:block;
line-height:0;
font-size:0 is used to reduce the font size and works well in IE7. But even after adding this line, you would notice a black line(which is basically the text) on the center of the button in IE6.
display:block Negative text-indent works in IE only if this is added.
line-height:0 Another fix for IE6.
text-transform:capitalize I don't know the exact reason of including the property, somehow it fixes the issue.
Hope this helps.
.submit {
line-height: 0px;
font-size: 0px;
/* restante do teu código */
}
este é um exemplo simse
If nothing else works exactly right, this does:
color: transparent;
text-indent: 0 !important; /* reset the old negative value */
So normal browsers use the negative text-indent, ie7 gets special treatment using conditional comments
Has a similar problem in IE8.
After eliminating all other possibilities, a line-height declaration elsewhere in the CSS was breaking the text-indent. solution: set the line-height explicitly to 0.
Only following will do the job for you :)
text-indent:-9999px !important;
line-height:0;
text-transform: capitalize; actually had no effect for me (it was happening on a tags), but this worked
text-indent: -9999px
float: left
display: block
font-size: 0
line-height: 0
overflow: hidden
I don´t know if it´s the cause of your problem, but I think your background shorthand notation is wrong; the colour code should be at the start, not the end.
Sorry a little late to the post, but was looking for a solution to the IE7 issue with negative text-indent. I started trying my own random ways and stumbled upon this. jUst wanted to post it out on Stack in case it may help others.
Trying to add an icon to a link and not show the text.
My CSS for all browsers
a.lnk_locked , a.lnk_notchecked, a.lnk_checked
{ background: url(../images/icons/icon_sprites.png) no-repeat; padding: 0 2px 0 0; width:18px; height:18px;
vertical-align:middle; text-indent:-9009px; display:inline-block; overflow: hidden; zoom: 1; *display:inline;}
a.lnk_locked { background-position: -1px -217px; }
My CSS just for IE7
a.lnk_locked , a.lnk_notchecked, a.lnk_checked
{ text-indent:20px; padding-left:-20px; width:18px;}
I just wanted to add for "others" (even though it not strictly related to the topic and not the ops problem).
Please ensure you use a "px" for your value. i.e. -9999px not -9999.
I've just spent 10 mins trying to debug why this didn't work. Staring at the value right in front of me.
I've been doing alot of Silverlight lately and so my mind didn't flip over to CSS markup requirements fast enough. Grrr.
You must include a unit of measurement.... or else it will just silently fail.
The solution that I found to my text-indent woes in IE7, and something that I feel should be added to this thread is the following:
Doesn't work:
text-indent: -900009px;
Does work:
text-indent: -9999px;
I didn't know there was a limit? I guess there is.
Don't use text-indent. Try this one instead:
display: block;
height: 0;
padding-top: 20px; //The height of your button
overflow: hidden;
background: url(image.png) no-repeat; // Image replacement
Works in all browsers including IE6.
I tried all of the above with no success. I had to add a float:left before it picked up the text indent. IE7 is crazy, and by crazy I mean awful.
Here is some CSS I'm using that works for me in IE and doesn't rely on text-indent
.sprite {
width:100%;
height:0px;
padding-top:38px;
overflow:hidden;
background-repeat:no-repeat;
position:relative;
float:left;
display:block;
font-size:0px;
line-height:0px;
}
.sprite.twitter {
background-image:url(/images/social/twitter-sprite.png);
margin-top:8px;
background-position: 4px 0px;
}
#social-links a:hover .sprite.twitter {
background-position: 4px -38px;
}
This is my HTML:
<div id="links">
Link 1
Link 2
Link 3
Link 4
</div>
And these are the CSS styles:
#links {
position: absolute;
border: 1px solid #000;
}
#links a {
display: block;
}
#links a:hover {
background-color: #CCC;
}
This displays a list of links, the problem is that in IE, I can only click a link by directly clicking the text link, which is not the case with other browsers (where you can click anywhere whether the text link or anywhere else as long as it's in the link block), is there any fix for that (with only CSS, no javascript)?
Please note that I don't want to specify a width for the links or the div.
I have had the same problem and none of the solutions above worked for me.
I also needed the background of the links to be transparent.
A very uncomfortable solution, but one that worked perfectly is to set the background to a transparent gif. Only needs to be 1x1 px as it will repeat.
#links a
{
display: block;
background: url(/images/interface/blank/1dot.gif);
}
This seems to have no side effects apart from one additional request to the server.
Put position:relative; in your CSS at #links a{ }
like this
It will fix it :)
Enclose the link text in a span element. Then it will accept clicks anywhere within its bounds.
I have no idea why, but giving the anchor a background color seemed to fix this problem for me.
Setting the background color to #FFF and an opacity of 0 worked for me in IE9, Chrome and Firefox. Don't know about other versions though. Setting it to transparent didn't help me.
This has the advantage of being pure CSS and cross-browser, so maybe it could be a better alternative.
Ok, the fix for this problem is to give the anchors a background property other than transparent. Some proposed to give the anchors a transparent background image. I have an addition to this: The image does not have to exist. You can simply write any path and it will make it work:
a {
background:url('dummy/doesnotexist.png') no-repeat;
}
Insert this inside your a-tag style:
background:url('images/dot.png') no-repeat;
where dot.png is a 1x1 transparent image.