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**
Related
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;
}
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'm designing a website for my company and we're using a wordpress template. We've been able to modify the template to make it full screen (& full width), however, we can't get rid of the blank header that is seen in the screen shot below. We've added custom CSS style into our style sheet, which has helped, but did not eliminate the problem:
CSS Style we added:
.page-template-template-fullsize-php #header { margin-bottom: 0; }
Any other advice would be very helpful as we're looking to clean up this aesthetic flaw on our website.
Screenshot:
Website Address: http://visualicreative.com/products/advertising/web-commercial-html/
This will help your CSS:
#content .entry-header {
display:none;
}
#content {
padding: 0px 30px 30px 30px;
}
/*changed from padding:30px; */
You really need to tweak your theme. You've got a lot of blank code in there that is creating gaps (including the blank header).
You have some inline code that increases top padding:
<div id="main" class="clearfix zIndex" style="padding-top: 108px;">
Then all of this under the entry content:
<p><a name="top"></a></p>
For your article directive/element if you use margin-top: -100px; you can shift it up by 100 pixels. More here.
In one of your template files that has been used on that page, there is a
<header class="entry-header">
<h1 class="entry-title"></h1>
</header>
empty header which causes a little more space. The rest of that additional space is because possibly in the same file just one line up of your header element, you have an <article> element with the id of #content which has padding:30px;
You can change that padding style to
padding: 0px 30px 30px 30px;
just to get rid of the top padding.
Hope this helps.
You have 108px of padding at the top of div#main.clearfix.zIndex. By removing or lessening that padding, you can affect how close to the menu bar your main div is.
Change the padding of .nav-full-width #main and you are good to go. also .entry-header has a margin, change that too.
I visited that web page and I recognized to there is many different type of levels to header.You can fix and delete some of them.However, there is a one way to fix,You should insert #content css veraible to padding-top:0px;.Also, you should delete unnececarry div and p lines from pure html.One of the unneccecary code line is in the following segment;
<header class="entry-header">
<h1 class="entry-title"></h1>
</header>
More over, there 2 empty p tags on the pure html.You should delete them.I tried it on the browser and it displaying,whatever you like.
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;
}