Hopefully this should be short and sweet, I am making a website and i want two 40x40 images placed next to each other, the problem is that their seems to be a rogue margin or padding that is being applied to it. I have tried to remove it but with no luck.
Image:http://i.minus.com/jblfTtkLGRaE74.png
As you can see i have firebug open and it shows that there is no styles being applied to the images to cause the blank space inbetween the images to happen. Also the images are not childs of a div. and i have used a CSS Reset.
If you need anymore information please ask.
Thank you.
It's because images are inline elements. Options to remove the gap include adding float: left to your images or removing all whitespace between your images in the HTML.
If you're using firefox and you're certain that all the space taking values have been zeroed then it's probably the font size of of the white space, remove any whitespace or spaces between the 2 images, you can also try setting the font-size of the parent element to 0.
Interesting, without looking at any of the code / the reset that you claim to be using. Here is how I would quickly put two images right next to each other using CSS.
img {
float: left;
margin: 0;
padding: 0;
border: 0;
}
Sometimes you have go back and dig through your code a little bit and do a little rewriting. Best of luck!
You can use the CSS
word-spacing:-1em;
on the parent container to remove these spaces between images.
Have you tried using a table and placing each image within?
The main borders on the page tend to be wierd but I've realised the table method tends to allow for more refinement. Best part is it wont show up on the page.
Related
I have been trying to solve this for days but can't solve it. (I'm usually quite okay with css). The website is www.auralaid.com.
On the homepage, there is a white spacing which I want removed. The class that is causing this issue is flex-viewport whose height is always slightly more than the "gray fabric image" it contains, leaving a white space at the bottom.
How do I remove the white space?
P.S. I can't set a fixed height otherwise the contained image will be cropped when minimising the browser.
white spacing http://auralaid.com/wp-content/uploads/2013/11/Screen-Shot-2013-11-09-at-9.34.02-pm.png
you should post your code to get the perfect answer but i guess there is a problem of positioning of the div in which these two images are and also set height of image according to the div positioning.
Perhaps you should check your margins? We need the code to answer your question definitively.
For me it seems the h1-tag is responsible as with
.slide-content h1 {
display:none;
}
the white-space will disappear.
i'm making a new site where the headings have backgrounds around them and a little padding.
This is a responsive site, so in some states the headings will break into multiple lines, resulting in them losing the padding to the right on the first line, and to the left on the second line. I am using display:inline since the padding needs to be adjusted around each line.
Is there any way to keep the padding when breaking lines?
Example:
http://jsfiddle.net/gmW5X/
The padding is missing after introducing and before the ...
This does not need to scale down to old ie since the problem only appears at the mobile css targeted to primarely iphone. However, i'd very much like not to alter too much html :/
I don't see another solution but wrap each word in span... http://jsfiddle.net/gmW5X/4
display: inline-block;
do the trick.
jsFiddle
I built a quick jQuery image slider today, but there's one problem. The images, which are inside divs, have a gap between them, offsetting them.
I've isolated the problem here: http://jsfiddle.net/UgzsH/
float: left; gets rid of that gap, but apparently because of the elements they are in, they stack vertically.
Unfortunately from this computer I can only test in Firefox. Thanks for any help.
Test case uses http://placekitten.com/.
Floating is how you get rid of the gap, but the last floated element is dropping down because the container is too small. The reason you get the gap is because elements that are display: inline with each other preserve the whitespace you get from the markup itself - if you remove the whitespace (meaning line-breaks) you'll notice the gaps go away. This makes your markup uglier, or course, hence why you use float instead. Make your containing div wider and they'll fit.
It's because in your HTML you have spaces between the divs and such. Try putting all the images and divs in one line of your HTML without spaces between the tags. No spaces!
Hope this helps and good luck!
EDIT: Here's the updated code. It looks a bit messy, but there are no spaces any more!
Please have a look at this page www.pixeli.ca/issue.
I have begun making a page layout using CSS framework 960.gs. My problem is that there is some strange space appears between block with top image and blue block with "hello" string. So you can see a green stripe there that shouldn't be visible at all. I tried different variants and have no idea what's wrong with it. I noticed that it happens only with the block with images inside them, but if there is only text, no space happens.
Thanks.
Simply adding float:left to the image fixes it.
<img src="imagetop.png" style="float: left;"/>
Not quite sure why or if there's a slightly more accurate method but hey, there you are.
Actually: why don't you set a background-image and height on the container. That would be a much cleaner way of doing things.
what i do at the beginning of each css sheet is adding this
*{
padding:0px;
margin:0px;
}
this removes all default spaces, might help.
The image is inline and is treated as text - so it gets aligned to baseline which adds a bit of space under it as a normal line would do.
set image to display:block and it should work.
http://www.wilwaldon.com/crossing/page3.html
If you look at the page in IE7 there is an ungodly amount of space between the top paragraph and the bottom spotlight area. It works fine in all other browsers.
If you know of any tricks or hacks to prevent this I'd greatly appreciate this :)
Thank you!
The reason you're getting all that space is because of all the top padding and margin you put on the #spotlight yourself. You seem to be adding all that space as a way of making enough room for the floats inside it. Don't do that. Make the div contain its floats by adding overflow: hidden to it. If that has unwanted side-effects, add the clearfix class to it, which is already in your CSS.
The reason you're seeing all that space in IE7 is because the #spotlight has a width, which is triggering layout. That causes it to contain its floats already, pushing all that top margin and padding up above it.
Oh, and don't use multiple id="spotlightbox". That's what classes are for. IDs must be unique. Use class="spotlightbox" instead.
if you set display:inline on your spotlight div it should render better in IE7...but that will break other browsers - so use the conditional css - or rewrite your style to be more compliant