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;
}
Related
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 :-)
I'm trying to get an input to load a CSS sprite, and put the icon I want out of it, right at the END of the input. Here is what I have so far:
#test2 {
width: 140px;
outline:0;
background: url(http://www.chambresdhotes.org/new_design/sprites-all.png) -87px -97px no-repeat;
}
Here is some code I have that works fine, but it uses an individual image (this is what is currently live, but we want to convert it into a sprite for SEO);
#test1 {
width: 140px;
background-image:url(http://www.chambresdhotes.org//new_design/bookings/images/calendar1.png);
background-repeat:no-repeat;
background-position:95% center;
outline:0;
}
Here is a JSFiddle to see the 2 running alongside each other:
https://jsfiddle.net/vr5emuar/
Can anyone explain where I'm going wrong? I've even tried using :after on the input (but it seems that doesn't work, as you can't use :before or :after on inputs)
Thanks!
::after and ::before are pseudo-elements and an input can't have element inside it.
There are multiple solutions :
If you use css sprite, your sprite should be vertical and icons must be separated with some transparents pixel to avoid others icons to be visible in the input.
Use a span or i element around the input, it generate icon with pseudo-element (:after) and put it over the input with absolute positionning on :after and relative position on the span.
You can do it like below only change needed is your sprite should be vertical.
.input {border:none; float:left;padding:1px; outline: 0;}
.calander{
border:1px solid #efefef;
display:inline-block;
float:left;
background: url(http://www.chambresdhotes.org/new_design/sprites-all.png) no-repeat scroll 85px -94px #fff;
width:190px;
padding: 4px 4px 6px 0px
}
<div class="calander"><input type="text" class="input" /></div>
Im trying to change the the height of my container from 527px (Which is the height of the background for the desktop) to make the background image hidden and make background color stretch to the bottom of the div when on mobile. The clearfix is handled from bootstrap. There are several floated divs inside of my .partbackdrop class that are not show because they are too long. No matter what I change the #PartCarContainer on the #media, besides setting it to a fixed value, it will not adjust accordingly and stretch the background to the div.
Link Removed. Problem Solved. Setting height to auto for all the divs inside the container.
CSS
#PartCarContainer { background-color: #FFFFFF; -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25); box-shadow: 0 2px 10px rgba(0,0,0,.25); border-radius: 3px; overflow: visible; }
.partbackdrop { background-image: url(../../_common/img/backdrop.jpg); background-position: top center; height: 527px; }
#media (max-width: 767px) {
#PartCarContainer { height: auto; }
.partbackdrop { background-image: none; }
}
HTML
<div id="PartCarContainer">
<div class="partbackdrop">
Content
<div class="clearfix"></div>
</div>
</div>
Edit: It may be a floating problem because of the floats for the page.
I also believe the footer may be suffering from the same problem. If you shrink the window down to below 767px you will see the red background which is my problem.
You need a height:auto on .partbackdrop and on .partDivMain
.partbackdrop, .partDivMain { height:auto; }
Here is an example: http://jsfiddle.net/7zhLm/5/
The image inside is larger than the div supports.
Therefore it is cropping the rest (overflow-x: hidden).
I am trying to create a white border around the image, but it doesn't seem to work.
After checking what's going on there with dev tool I saw that the lower part overlays the white border.
How to I fix that?
I see you're using both overflow-x and overflow-y. You can just use overflow:hidden; as it works on any browser while -x and -y are not supported by older ones.
Anyway, to avoid it you can add another <div>. Check the live demo, and here is the updated code:
<div id="fixed_event_1" class="splashTabLogout" >
<div>
<img src="http://www.twospy.com/galleriffic/demo/Sample%202.jpg" width="300" />
</div>
</div>
.splashTabLogout {
width: 300px;
height: 100px;
cursor: pointer;
background: #fff;
padding: 10px;
/* border-radius and box-shadow stuff */
}
.splashTabLogout > div {
max-width:100%;
max-height:100%;
overflow:hidden;
}
JSFiddle
You tried to set a border with a padding. Change it to a 10px white border.
The HTML you have is fine. It's semantic, simple -- don't change it. Change the details about it, and fix the CSS, and you'll be rockin': http://jsfiddle.net/7zhLm/9/
CSS
.splashTabLogout {
border: white solid 10px;
border-radius: 3px;
box-shadow: rgba(0,0,0,.22) 0 2px 6px;
overflow: hidden;
}
.splashTabLogout img { width:300px }
HTML
<div id="fixed_event_1" class="splashTabLogout" >
<img src="your-pic.jpg" />
</div>
Note: Including width/height inside an img tag is valid. Period. In a gallery of images, or anywhere else, where you may have multiple images with the same dimensions, it's often easier, and less code to declare the width/height from the CSS file. FYI
If you check out this link (http://noahsdad.com/state-fair-texas-2011/) you'll notice that scrolling side bar to the left of the content area. I'm trying to get it to be closer to the content area, any ideas how on to do this?
Thanks.
In the options of the plug in they give me this, I'm assuming I have to make the css changes in their code, instead of my own stylesheet?
#dd_ajax_float{
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #BBBBBB;
float:left;
margin-left:-120px;
margin-right:5px;
margin-top:10px;
position:absolute;
z-index:9999;
}
Change the margin-left element of #dd_ajax_float to something like -100px instead of -120px
I was able to add this to your page and make it work..not sure where you are linking the style sheet for that floating area
<style type="text/css">
#dd_ajax_float
{
margin-left: -100px !important;
}
</style>