I have a problem with an image on my website and want to get rid of it by modifying the dimensions of it to 1px height and 1px width.
I am trying to do it with css but I have a problem selecting the image because the class of it has empty spaces (class="avatar avatar-96 photo tie-appear"). This is the code of the image when I inspect it:
<span class="dwqa-date">
<img alt="" src="http://0.gravatar.com/avatar/3314a60ebb551b6be74e876f2c56e115?s=96&d=mm&r=g" srcset="http://0.gravatar.com/avatar/3314a60ebb551b6be74e876f2c56e115?s=96&d=mm&r=g 2x" class="avatar avatar-96 photo tie-appear" height="96" width="96">
<strong>⋅</strong>
22 mins ago
</span>
Do you know how I can get rid of this image? If you know the code you make me a great favor.
Thanks!!
Display: None
Is your friend.
Changing the picture dimensions will still push the other stuff around and make it very ugly on low-resolution-screens.
Your CSS class does not have spaces, each of those is its own CSS class
class="avatar avatar-96 photo tie-appear" can be selected with the css selector .avatar.avatar-96.photo.tie-appear
See this duplicate question: How to select classes with spaces
Edit: I have it set up on this JS Fiddle for you: https://jsfiddle.net/y3s2869g/ You can see the CSS selector is removing the image by setting the display to none. Hope that helps!
Edit again: After reviewing the markup on the site, you can remove the avatar images with the following CSS:
.dwqa-author > img.avatar, .dwqa-comment-author img.avatar {
display:none;
}
You might also want to remove some of the extra padding, CSS similar to this will accomplish that:
li.dwqa-comment {
padding: 15px 20px !important;
}
.dwqa-header div.dwqa-author {
padding-left: 0px !important;
}
.div.dwqa-content {
margin-left: 0px !important;
}
Related
I'm trying to figure out why my image is in a box. I ran a little script that nulls out all the white space in my image, but when I try to use it on my site, my image has a white box around it.
I tried setting margin and padding to 0, I also tried setting the display to block, but still it persists, I appreciate any help, I'm sure this is simple, but I'm not a front end developer unfortunately (:
<div class="img_style">
<a href="link" class="btn btn-lg btn-default">
<img src="imgSrc.png" style="block">
</a>
</div>
Currently the css is empty, but after trying first comment, it looks like this:
#img_style {
style="border: none !important";
}
Remove white space from image
Image inside div has extra space below the image
First remove style="block" in image tag! Its false. Read about class and id, Link this css to your page
First way
.img_style a{
border: none;
}
Second Way
.img_style a{
padding: 0;
border-radius: 0;
}
Third Way
.img_style img{
margin : -10px -15px;
}
I think I found the issue, my link styling was creating the unnecessary space, so I just removed that and it works, I didn't need to add any extra code.
have you tried the border?
style="border: none !important"
Based on in-line styling**
I have two pics pic1.png (100px x 20px) and pic2.png (100px x 380px) which each are inside a link and should look like one pic of 100px x 400 px. Unfortunally (at least in Firefox and IE) as a result there is a visible gap of several px between these two pics.
Website-Source (please excuse that I put it all into one line - but I did not want to possibly falsify the exact code by formatting):
<div style="display:inline-block;width:100px;height:400px;max-height:400px"><img alt="somealt" title="sometitle" src="pic1.png"><img alt="somealt" title="sometitle" src="pic2.png"></div>
Can you tell me what is wrong in the above Source and how I could fix it?
The images are being rendered one below the other, as if they were text, in different lines. Thus, the line-height CSS property is causing a visible space within them, in the same way that you expect some spacing between lines of text.
You can solve this by adding line-height: 0; to the style of the div.
See an example: JSFiddle
you should add border="0" attribute to the images, the fact that the browsers add a border of 1 or 2 pixels to the images that are inside an anchor tag and use the default "link" styling, probably you are getting the space between the images.
<img alt="somealt" title="sometitle" src="pic1.png" border="0">
or in CSS file that you're including, this will make that any image inside an anchor tag has no border:
a img { border: 0; }
http://jsfiddle.net/njwx47tg/
Why don't you use float:left? to the a tag?
<div style="display:inline-block;width:100px;height:400px;max-height:400px;margin: 0px; padding: 0px; border: 0px;"><img alt="somealt" title="sometitle" src="pic1.png"><img alt="somealt" title="sometitle" src="pic2.png"></div>
Add:
margin: 0px;
padding: 0px;
border: 0px;
I have an a tag with an image inside of it and for some reason the a tag looks like it extends below the image and is causing a little blue tic mark on the bottom right side. I've tried setting border to none and a few other css solutions but nothing seems to be working. I appreciate any help anyone can give. Here is a link to the test page. Header_test.
There are a couple of options. First of which, the reason why you see the extra border is because the a tag is overflowing into the space between the images... so you can always just eliminate the spaces like so:
<img class="announcement" src="../resources/images/headers/20150723announcement.png">
<img class="announcement" src="../resources/images/headers/20150723announcement.png">
<img class="announcement" src="../resources/images/headers/20150723announcement.png">
Alternatively, change the CSS for your a tags to:
a { display: inline-block; }
or:
a { text-decoration: none; }
to remove the underline.
In your CSS, remove the fixed width/height for the a and apply text-decoration: none to it.
Change the a styles in header.css line 63 for these one:
a { display: inline-block; }
I want to display two images in a div with one at the top and one on the bottom.
I have achieved this but there seems to be extra space especially at the bottom and I don't know where this comes from. When I use Firebug layout it show a height of 61 pixels but my images are only 18x16 and I think that doesn't include padding and margins which are just a few pixels in any case.
What am I doing wrong? Is there a better way to do this?
jsfiddle
<div class="ex6">
<img src="images/uparrow.png" align="top" id="Z6Sync" width="18" height="16" title="up" onclick="manualup()" alt="up"><p>
<img src="images/downarrow.png" id="Z6Sync" width="18" height="16" title="up" onclick="manualup()" alt="down">
</div>
css
div.ex6
{
padding-top:5px;
padding-bottom:1px;
padding-right:10px;
padding-left:10px;
border:2px;
font-size:0.7em;
border-style:solid;
border-color:#ddd;
margin-top: 8px;
margin-bottom: 2px;
overflow: hidden;
float:right;
background: #eee;
cursor:pointer
}
Your problem lies in the <p> tag you added after the first image. A paragraph has a fixed style that includes a margin/padding after the paragraph. Get rid of it and take care of adding the line break via CSS to make sure the images are shown one below the other.
To achieve this you can for example set the images inside of your image to be displayed as block element:
div.ex6 img { display: block }
If you do that, you will have to add some more styling though to add some more margins, especially between the images. You do could do it like this:
div.ex6 img:first-child { margin-bottom: 5px }
But there are also many other ways, including just using <br /> instead of <p>. I personally don't like using manual line breaks for positioning though.
Weird question I think its more of I am not sure what it is called. But I have an img wrapped in an link
example
...<li>
<a href="#link">
<img ...>
</a>
</li> .....
Now I have the css border rules all to 0. So their is no Blue border. But in Firefox their seems to be a pink mini dashed border only when I click on the image? In other browsers there is no border at any time. Im not sure if its from the browser itself or something I am missing. In my css I have border set to 0 on the a,:hover,:visited I even put text-decoration to none thinking that might help. But to know avail. I tried searching online for help but all I get is info on removing the border caused from placing the image in the link. So any help or a point in the right direction would be great. !
edit// I added a picture to better explain what I am talking about.
Links (<a>’s) by default have a dotted outline around them when they become “active” or “focused”. In Firefox 3, the color is determined by the color of the text
To remove it, simply use:
a {
outline: none;
}
Or you can do what I do, and remove it from all elements (I use my own focus/active rules) and do
* {
outline: none;
}
This will remove it from all elements.
#link img a
{
border:0;
outline:none;
}
Install Firebug and see what's going on. I think what's going on is img tag probably has a default border.
To remove it maybe you can try putting your a and img tags inside of a div with an id and using following CSS:
Your HTML:
<div id="test">
<a...>
<img .../>
</a>
</div>
And use the following CSS:
#test img {
border-style: none;
}