In a fundraising page I'm working on at https://cjshayward.com/these-are-a-few-of-my-favorite-things/, in the body of the post there is one portrait without any border, but once you get to the shuffled list of "favorite things," all of the product images have an eight-pixel-wide border that remains present after setting DIV, A, and IMG tags to have inline style of border: 0 !important; margin: 0 !important; padding: 0 !important.
I've also spent some time inspecting the page, and can't find anything that would be assigning borders to the images or immediate containers. (N.B. I think it's more likely a border than a background with padding: some images are partially transparent PNG's, and those let you see the background image through transparent parts of the PNG's.)
The page is part of a Wordpress site under a modification of the twentyseventeen theme.
What am I missing?
It is the box-shadow property
.entry-content a img, .widget a img {
-webkit-box-shadow: 0 0 0 8px #fff;
box-shadow: 0 0 0 8px #fff;
}
remove this from the css
it was just masquerading as a border :-)
Related
I am trying to create an image, in a circle shape, with a border around it. The problem is that if you look VERY carefully between the image and the border, there seems to be a small space.
Is is possible somehow to make the border attach itself perfectly to the circle shape?
Here is a small codepen:
https://codepen.io/dbugger/pen/NjYMEQ
This is the CSS used:
img {
border-radius: 150px;
box-shadow: 0 0 0 10px black;
}
Just give image the same background-color (whatever that is, I used maroon here) like this:
img {
border-radius: 150px;
box-shadow: 0 0 0 10px black;
background-color: maroon;
}
<img src="https://placehold.it/300/300" alt="" />
I planed to add an image below a div. It would be below a navigation bar (div), adding some nice shadow effect (img). Looks like this:
<div>...</div>
<img>
So far it is just in the html code, but I want to keep the html code since it's a theme that gets updated frequently. So I want to alter only the CSS.
Is there a way to do that without altering HTML code, just using CSS?
Two suggestions:
Add the shadow image as a 1px x Xpx repeating background image to the bottom of your nav DIV. So it would sit within the nav DIV. Simply add some padding to the bottom of the NAV DIV to accomodate it e.g.
nav {
padding-bottom:6px;
background:url(images/nav-bg.png) repeat-x 0 bottom;
}
(The above code would presume you have a background image which is 6px in height and probably 1px wide (but that's up to you) and the path would obviously have to be adjusted to be where your actual image was located.
Instead of adding an IMAGE under the NAV DIV add another DIV and once again add a 1px x Xpx shadow image to that DIV through the CSS.
you cant change the source of an image element through css...
you could create the shadow using CSS tho:
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
or you could change the image through javascript or from the codehind
javascript: $(element).src = "path to new image";
I'm using asp.net with themes, master and child pages. In the base css, I've got the img tag with a border. It's great in that I never have to place a border around my image. However, on one page where I'm using the Nivo slider, I want to remove the border. I know it's the base image, cause if I change the border to white, everything works fine - but every image on my website then is missing the border. I thought the inheritance went theme, page, inline css?
img { margin:0 10px 10px 10px;border:1px solid #000000;}
#imgNoLine { margin:0 0 0 0;border:0 #ffffff !important; }
#maincontainer #contentwrapper #contentcolumn #contentInnerTube fieldset .nivoSlider img { position:absolute;margin:0 0 0 0; top:0px;left:0px; display:none;border:none 0 solid white !important; }
<img src="image.jpg" alt="" style="border-width: 0 !important;" id="imgNoLine" />
put your slider in a div and give the div an id.then use this in css:
#div-id img{
border:none;
}
I am using this technique for a sticky footer: http://ryanfait.com/sticky-footer/
I wanted to create a border around my entire site that also encapsulates the footer but has passing around the entire page but ended up with this: http://i.imgur.com/jy9vN.jpg
Notice how the white box is not moving down to the footer.
Here is the jsfiddle showing this problem: http://jsfiddle.net/hc3Xu/14/
*I had previously asked a similar question not realizing it was the footer and I got an answer telling me that it is the height: auto !important; in the container class that was the cause of the contentcontainer not stretching to 100%. Removing that however causes a problem with the footer not being set to the bottom of the page. So I can't figure out how to proceed.
Instead of:
.container {min-height:100%; height: auto !important; height:100%;
margin: 0 auto -30px; width:980px;
background:URL(images/bg_sides.jpg) repeat-y #f4f4f4;}
try something like:
.container {min-height:100%; height: auto !important;
margin: 0 auto -30px; width:980px;
box-shadow: inset #f4f4f4 0 0 0 20px, #BDBDBD 0 0 3px 3px;
-webkit-box-shadow: inset #f4f4f4 0 0 0 20px, #BDBDBD 0 0 3px 3px;
-moz-box-shadow: inset #f4f4f4 0 0 0 20px, #BDBDBD 0 0 3px 3px;}
You'll then also need to tweak the left and top margins of the footer to bring it in line with your contentContainer div.
http://jsfiddle.net/z5geM/
http://jsfiddle.net/hc3Xu/16/
I've changed the elements a bit to have the background image on your html element and the body be the main, centered content area. By giving it a border and changing its box-sizing, it creates that grey border around the outside while still maintaining it's 100% height. Just a slight tweak to the position of the footer moving it down 20 or so pixels makes it line up within the body's grey border area.
Hope this helps, let me know if you need a more thorough explanation of why this works.
I have a two sprite images. One image contains the body of a rounded button as well as other states (hover, clicked, ect) while the other contains the left most curve of the image.
I am using these so I don't have to have multiple button images on my webpage, these buttons are can be scaled to any size.
<div id="search_tips"><span>Search Tips</span></div>
and CSS
#advanced_search_button, #search_tips{
background: url("graphics/doc_button_left.png") no-repeat scroll 0 0 transparent !important;
color:#666666 !important;
display:block !important;
float: right !important;
padding-left: 5px;
padding-right: 6px;
padding-top: 0px;
margin-right: 16px;
height: 22px;
overflow: hidden !important;
}
#advanced_search_button span, #search_tips span{
background: url("graphics/doc_button.png") no-repeat scroll 100% 0 transparent !important;
padding: 2px 9px 5px 0 !important;
line-height: 19px;
display:block !important;
float: left;
}
#search_tips:hover, #advanced_search_button:hover {
background-position: 0 -22px !important;
}
#search_tips span:hover, #advanced_search_button span:hover{
background-position: 100% -22px !important;
}
When I hover over the part of the div which contains the , (the majority of the icon) then both parts of my sprite have the "hover" style applied to it. However, if I hover over the part of the image before the " I only see a chuck of the image have the "hover" style applied to it.
What I would like to be able to do is to activate the "hover" style for the span whenever the parent div has it's hover style applied to it.
Any advice?
Thanks
Have you tried #search_tips:hover span?
For starters, when you hover over an item, only that item gets the hover css event, not anything behind it.
However you can hide the element on hover, which triggers hover for the element behind it.
Not 100% sure whether it answers your question, but :hover can be a parent selector too:
#search_tips:hover span.classname1
{
......
}
#search_tips:hover span.classname1
{
.......
}
those rules will both apply the moment search_tips is hovered over.
Make sure you use the :hover pseudo-class before the span element to make the hover work correctly:
#search_tips:hover span, #advanced_search_button:hover span
I also think you'll need to use your doc_button_left.png as the background of the span if you're using the standard sliding doors technique. I'm not 100% sure about this, but if you keep having problems, you might want to make that switch.