I'm just trying to make the cursor a custom image. I have followed all instructions everywhere but it still will not work:
CSS:
body, html {
margin: 0px; padding: 0px;
border: 1px solid red;
cursor: url(images/rsz_red_crosshair.gif), crosshair;
}
The image is 32x32. The stylesheet is linked properly because the border is showing. The second option (the built in crosshair) works fine. Just wondering what I'm doing wrong, I'm sure it's fairly obvious to others.
Your style syntax is correct and I've implemented it myself just to be sure. I would confirm the location of your image.
This css should solve your problem. Include the URL in quotation mark and make sure path is correct.
body {
margin: 0px;
padding: 0px;
width:100%;
cursor: url('http://icons.iconarchive.com/icons/hopstarter/plastic-mini/32/Cursor-icon.png'), auto;
}
Related
I am trying to vertically align a span-tag inside a DIV. I have a working example on JSFiddle but the EXACT same CSS and HTML will not work on my own site.
#drop_zone {
width: 500px;
outline: 1px solid #E1E1E1;
margin: 0 auto;
height: 200px;
line-height: 200px;
}
#drop_zone span {
display: inline-block;
line-height: 19px;
vertical-align: middle;
}
<div id="drop_zone"><span>Drag file here.<br />Your file will <strong>not</strong> be uploaded!</span></div>
Now, it works on JSFiddle and on Stackoverflow, but why does it not work on my own site? You can check out the results here: http://snorlax.org/stackoverflow.html
If you check the source code, you can see it's the exact same code. What on earh is going on?
Your document is missing the Doctype, so you are triggering Quirks mode. The feature you are trying to use only works correctly in Standards mode. Add a Doctype. Use a validator.
I'm using Wordpress and I currently have installed Tesseract theme on my site: (http:// instantiwebs . com)
I would like to remove left/right margins on everything, like this site did it: http://tyler.com/. It is using also the same theme.
I've looked through the CSS style and can't seem to find the right section to edit. The stylesheet is located here: http://alexardavin.com/instantiwebs.com/wp-content/themes/Tesseract/style.css
Help would be really appreciated, thanks!
Just add this code to the bottom of the stylesheet, it should work for you.
EDIT: Make sure you have the !important statements.
#site-banner {
max-width: 100%!important;
padding-left: 20px;
padding-right: 20px;
}
#footer-banner {
max-width: 100%;
padding: 0 20px;
}
#site-banner-right {
right: 20px!important;;
}
Use the free plugin Wordpress My Custom CSS.
It is light, and for small CSS edits you don't change the theme source code.
It prevents your edits to be overrided when you update.
body .site {
padding: 0;
margin-top: 0;
margin-bottom: 0;
box-shadow: none;
}
try above code
I have the following style class for button -
.buttonStyleClass {
padding:5px 20px;
}
When I try to focus the button in Firefox, then focus outline is appearing inside the button after padding. But when you verify the same in Chrome you will find the focus to entire button including padding.
In my application focus outline seems to odd in firefox since it is appearing 20 pixels inside of button.
Is there any CSS fix for this issue ?
Thanks,Gopal
Actually in both Firefox and Chrome I see the outline OUTSIDE of the button... Check out this fiddle. You can easily hide the outline though:
.buttonStyleClass { outline: 0; }
If this is not the answer; could you provide us with a fiddle or screenshot of what you mean?
edit
It's probably a bit OS-specific, as I only saw the dotted (inner) outline when I added a explicit border to the button (button { border: 1px solid red; }).
You can remove, or alter, the outline with the :-moz-focus-inner selector, like this:
button::-moz-focus-inner { border:0; padding: 0; }
Also check out the updated fiddle
I realize this is a very old question, but no one has actually answered the question yet, and several people have given bad advice. Given I got here via Google, other people may come here and leave with that bad advice.
For accessible reasons, you should never remove styling like this, unless you replace it with something better.
Instead of:
button::-moz-focus-inner {
border:0;
padding: 0;
}
Try:
button::-moz-focus-inner {
padding: inherit;
}
Try out this
button { padding: 10px; border: 1px solid red;}
button.no-outline { border: 1px solid blue; }
button.no-outline::-moz-focus-inner { outline: none; border:0; padding: 0; }
button.better-outline {border: 1px solid green; }
button.better-outline::-moz-focus-inner { padding: inherit; }
<button>my button</button>
<button class="no-outline">without outline</button>
<button class="better-outline">with better outline</button>
Add this to your CSS.
.buttonStyleClass:active {
outline: 0;
}
Are you viewing this in a web browser? You said 'application' in your query.
If I understand correctly you are saying that:
Chrome : outlines around the button area inside padding.
Firefox : outlines the area outside padding.
This is a browser specific rendering problem.
Two solutions come to mind.
Don't use padding for you button instead use:
.buttonStyleClass {
height:50px;
line-height:50px;
text-align:center;
}
Alternatively use -webkit targeting to write specific browser css markup.
http://jsfiddle.net/JV6MH/4/
This fiddle should render focus outline the same in both firefox and chrome by avoiding the use of padding on buttons.
I have an image like such:
and would like to when i hover, to get another Transparent image on TOP of it.
this is the css:
#imagebox {
Width:338px;
margin-left:10px;
background-color:#12100e;
height:221px;
float:left;
margin-bottom: 10px;
border: 1px solid #232323;
}
#imagebox:hover {
background: url("upplyst-platta.png") no-repeat 0 0;
}
But it is behind the picture, any way to solve this in css? or i have to fix it with javascript?
The image on bottom is generated from db(later on) and cannot be set in css
EDIT:
I saw this solution:
http://jsfiddle.net/bazmegakapa/Zf5am/
but cannot get it to work. even though i copy the whole code, what can be the problem?
Use the z-index to state which order the elements are drawn in.
You can find more information here: http://www.w3schools.com/css/pr_pos_z-index.asp
A few other things as well, you might want to add relative image placement based on the parents position and where you say Width in the first style, it should be all lowercase width :-P
Hope this is what you are looking for.
#imagebox {
Width:338px;
margin-left:10px;
background-color:#12100e;
height:221px;
float:left;
margin-bottom: 10px;
border: 1px solid #232323;
background: url("upplyst-platta.png") no-repeat 0 0;
}
#imagebox img{
display: none;
}
#imagebox:hover img{
display: block;
}
and the html structure should be:
<div id="imagebox"> <img src="iWantToShowThisImage.jpg" /></div>
Hope this works for you or provides some inspiration: jsfiddle example #1
Update based on first comment:
Do you mean like this? jsfiddle example #2
2nd update based on edit in question:
Well, the reason for not working is that the hoverimage isn't just transparent: it's a modification of the original.
But it clarifies your wish. I really think my first example is the solution you're looking for. Just replace the url in the style sheet with your transparent png file name.
Chrome and Safari are displaying a border around the image, but I don't want one. There is no border in Mozilla. I've looked through the CSS and HTML, and I can't find anything that is fixing it.
Here is the code:
<tr>
<td class="near">
<a href="../index.html"class="near_place">
<img class="related_photo" />
<h4 class="nearby"> adfadfad </h4>
<span class="related_info">asdfadfadfaf</span>
</a>
...
CSS:
a.near_place {
border: none;
background: #fff;
display: block;
}
a.near_place:hover{
background-color: #F5F5F5;
}
h4.nearby {
height: auto;
width: inherit;
margin-top: -2px;
margin-bottom: 3px;
font-size: 12px;
font-weight: normal;
color: #000;
display: inline;
}
img.related_photo {
width: 80px;
height: 60px;
border: none;
margin-right: 3px;
float: left;
overflow: hidden;
}
span.related_info {
width: inherit;
height: 48px;
font-size: 11px;
color: #666;
display: block;
}
td.near {
width: 25%;
height: 70px;
background: #FFF;
}
Sorry, I copied some old code before. Here is the code that is giving me trouble
Thanks in advance
Now I don't know if this is a bug with Chrome or not but the grey border appears when it can't find the image, the image url is broken or as in your case the src isn't there. If you give the image a proper URL and the browser finds it then the border goes away. If the image is to not have a src then you will need to remove the height and width.
sarcastyx is right, but if you want a workarround you can set the width and height to 0 and a padding to make space for your image.
If you want a icon of 36x36, you can set width and height to 0 and pading:18px
I know it is an old question. But another solution is to set the src to a 1x1 transparent pixel
<img class="related_photo"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
This works for me.
.related_photo {
content: '';
}
This may happen when the image is planted dynamically by css (e.g. by http://webcodertools.com/imagetobase64converter) in order to avoid extra HTTP requests. In this case we don't want to have a default image because of performance issues. I've solved it by switching from an img tag to a div tag.
img[src=""]{
content: "";
}
Lazy image solution (img loading="lazy")
If you are using lazy image loading you may notice this thin thin border before the image has loaded more than if you didn't.
You're more likely to see this for a horizontal scrolling gallery than a normal vertical scrolling webpage.
Why?
Lazy loading unfortunately only works on the vertical axis. I'm assuming this is because there's a high likelihood that you're going to scroll down, but not left to right. The whole point of lazy loading is to reduce images 'below the fold' from consuming unnecessary bandwidth.
Soution 1:
Detect when the user has scrolled (eg. using intersection observer) and then set loading="eager" on each image you want to immediately load.
I haven't actually tested this, and it's possible some browser's won't immediately load images - but it should be fine.
Solution 2:
Detect when the image has finished loading loaded and then fade it in.
img.setAttribute('imageLoaded', 'false');
img.onload = () =>
{
img.setAttribute('imageLoaded', 'true');
};
Then with css hide the image until it's loaded, after which it fades in nicely:
img
{
opacity: 1;
transition: opacity .5s;
}
img[imageLoaded='false']
{
opacity: 0; // hide image including gray outline
}
Also this behavior is subject to change, the browser may be clever enough to detect a horizontal scrolling element in future - but right now Chrome and Safari both seem to have a zero pixel window for looking for horizontal lazy images.
img.related_photo {
width: 80px;
height: 60px;
**border: solid thin #DFDFDF;** //just remove this line
margin-right: 3px;
float: left;
overflow: hidden;
}
Inside img.related_photo, you need to change border: solid thin #DFDFDF; to border: 0.
I have fixed this issue with:
<img src="img/1.jpg" style="height:150px; position: absolute; right: 15px;">
The right: 15px is where you want the image to be shown, but you can place it where you want.
I just added src="trans.png", trans.png is just a 100x100 transparent background png from photoshop.
Worked like a charm no borders
To summarise the answers given already: your options to remove the grey border from an img:not([src]), but still display an image using background-image in Chrome/Safari are:
Use a different tag that doesn't have this behaviour. (Thanks #Druvision) Eg: div or span. Sad face: it's not quite as semantic.
Use padding to define the dimensions. (Thanks #Gonzalo)Eg padding: 16px 10px 1px; replaces width:20px; height:17px; Sad face: dimensions and intentions aren't as obvious in the CSS, especially if it's not an even square like #Gonalo's example.