I have an unordered list of links and each link has a unique id.
I'm using that id with the :before selector to place
the associated website's favicon before the link (using the content property).
One of these icons is twice the size of the others.
Is there any way to change the size of this icon using CSS?
If the answer is no, is there any way to do this other than editing the image?
Visual reference:
Here is what I tried (and it doesn't seem to work):
#geog:before
{
content: url("icons/geogebra.ico") " ";
height: 50%;
width: 50%;
}
I've run into the same problem before. Try this:
#geog:before
{
display: inline-block;
width: 16px;
height: 16px;
margin-right: 5px;
content: "";
background: url("icons/geogebra.ico") no-repeat 0 0;
background-size: 100%;
}
I'm sure you'll have to tweak those values, but that worked for me. Of course, this won't work if you can't set it as a background image for some reason. Best of luck to you!
I believe you are looking for the zoom property. Check this jsfiddle
Also you can add spacing with margin-right between the icon and the content of the element.
Use PX instead of %
#geog:before
{
content: url("icons/geogebra.ico") " ";
height: 5px;
width: 5px;
}
Give that a try :-)
Related
I am trying to hide a .div in based on this page http://pdtuk.com/learn-with-rockjam/ so that the contents of the page moves up.
If I change the properties in the custom CSS in the admin panel of the to the below it functions in inspector but does not seem to update or take any effect when I preview or try and make live. Any ideas on how I can resolve?
.page_banner .background_wrapper{
position: relative;
display: none;
width: 100%;
height: 46.500rem; /* 730px */
background-position: center left;
background-size: cover;
}
I hope I understood your question correctly.
There seems to be an unknown background-image.
<div class="background_wrapper" style="background-image:url('')">
So the specified height: 46.5rem converts to empty space.
One way to solve that:
height: 0
Adding this CSS rule should help:
.page_banner .background_wrapper {
display: none;
}
That element has a defined heigth which creates the unwanted space. Adding display: none makes it invisible and removes it from the document flow. But to be on the safe side you could also add height: 0;
I have tried all the solutions on SO but did not succeed. I have an image to be appear as a cursor on my image. I have tried all of these.
img:hover{
cursor: url(../images/wand.ico), auto;
}
img{
cursor: url(../images/wand.ico), auto;
}
Not with the .ico but with the .png too. In both cases these are not working. I have read this case. But doing so did not help. Resize the image but still cusror is not working. Any body can help me in this regard?. I did not have that much knowledge but i searched and researched almost every solution.
You need to set some other properties in your CSS.
img {
cursor: url(../images/wand.ico), auto;
// set the width and height to the size of the png/ico
width: 20px;
height: 20px;
// Set the display type
display: block;
}
Give that a try. I believe it's not working as the image has no dimensions, therefore, it's invisible.
I am using position: fixed and bottom: 0 to affix something to the bottom of the screen. The name, however, appears to go off of the screen, on my 11" Air, and you can see the site here. I've posted my CSS code below for the div.
Broken JSFiddle: http://jsfiddle.net/MgdQv/
#credits {
color: #363636;
bottom: 0;
padding-right: 10em;
text-align: right;
position: fixed;
width: 100%;
opacity: 0;
-o-transition:1.5s;
-ms-transition:1.5s;
-moz-transition:1.5s;
-webkit-transition:1.5s;
transition:1.5s;
}
#credits:hover {
opacity: 0.8;
}
Add right: 30px (30px being the value of margin-right of parent body) and it should behave as expected.
Edit: and maybe remove padding-right: 10em. Forgot that I had desactivated it in Firebug before answering...
Also do not post link to a website: after you've fixed your problem, your question will become meaningless to future visitors of this question because the link will have changed... Please post relevant HTML and CSS reproducing your problem (and a fiddle)
You only must add an height-attribute to your #credits.
I'm making a website with HTML5Boilerplate, but every time I use the css background or background-image property, the image doesn't show up.
Folders:
root/css/style.css
root/img_files/logo.png
My css code looks like this:
#logo {
position: absolute;
left: 20px;
top: 10px;
width: 164px;
height: 42px;
background: url(../img_files/logo.png);
background-repeat: none;
}
My stylesheet is properly added to the page:
I can't add a single background image to the objects on the page. HTML5Boilerplate has been installed, so maybe that't the problem, I'm not sure. Do you know why correct CSS and HTML doesn't display the images?
Change
background-repeat: none;
to
background-repeat: no-repeat;
Or just use
background: url(../img_files/logo.png) no-repeat;
I've just come to the same problem and discovered that in case you'll change ID from #logo to anything else (in HTML and CSS of course), then the same code will start to work. Can't say what has been "blocking" #logo to be used, but for now I don't have enough time to discover where the problem is.
Solution for now is to use anything else than #logo, eg. #logoTop or #siteLogo
Hope that helps.
EDIT: It was a selector typo problem which caused browser had ignored that. Weird was it had not happened when selector was changed to some other name than #logo. Please note that #logo:visible typo (instead of visited)
#logo, #logo:link, #logo:visited,
#logo:active, #logo:focus, #logo:hover
{
display: block;
width: 340px;
height: 150px;
background: url(../images/design-elements.png) 0 -300px no-repeat;
}
I had the same problem & found out that if without the width & height property, image will not display.
It works in chrome , and not in ff/opera.
Demo here: http://booksnearby.in/browse_items.php . The 'location: Dhoolsiras Village, delhi' line 'hangs' in the middle. I am trying to make it stay at the bottom of its container.
For this I tried
Child span tag- {
bottom: -5px;
font-size: 11px;
left: 115px;
line-height: 20px;
position: absolute;
}
Parent:- element.style {
height: 100%;
position: relative;
}
But it doesn't work, except in chrome. Please help
Thanks.
Do you have to use a table? Because your problems come from the td element's height. Tables have the worst cross browsers support out of all the html elements :)
Is it possible to change the structure to use div elements instead?
OR you could give the position: relative to your .listtd instead of the div (which means remove the position property from the div). This solution will do the trick.