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.
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.
Any css tricks for getting text of any size to appear on the baseline for children inside one element that has float:left and another that has float:right?
Check out the jsfiddle link below to see what I'm talking about. Notice how the word "One" has a larger font so it bumps all of it's siblings in the float:left down, but it does not influence the spans in the float:right div.
http://jsfiddle.net/QeRhU/
I'd like for them all to appear on the same baseline. I'm hoping for a solution that still uses float:left; float:right; because I still want the liquid behavior that it gives when a user scales the page.
Try this, it's not the clean solution, but rather a workaround that could get the job done if you don't find a cleaner css solution.
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
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.
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!