I've got a dropdown I've made: http://jsfiddle.net/QPxVe/
For some reason, jsFiddle is altering the alignment which is not present outside of jsFiddle - this is not the issue.
I seem to have a gap between items and I cannot see why it is being added.
The Fiddle has different colours and fonts, but other than that, everyting is identical. The arrow in the image below points to the problem - it is like that for all the divs. If I set the margin to
-4px for the main .dropdown class, it is fixed but I'm not sure why the space is appearing in the first place...
It's because whitespace (e.g. new-line characters) around display:inline-block element is rendered as space. One of solutions is to set font-size for parent element to zero.
See http://jsfiddle.net/Kb7Fp/ where following rule is added:
BODY > DIV {font-size: 0; }
It is because of the whitespace (as Marat said).
Another solution (that I found more convenient) is to comment the line break like that:
<div class="dropdown"><span>Rice cakes</span></div><!--
--><div class="dropdown"><span>Enemies</span>
You can see the result here: http://jsfiddle.net/EfQdX/
Marat has the answer as to why the whitespace is there.
Depending on your reasons/needs for display: inline-block, another solution could be to add float: left; to the .dropdown rule.
Like on this fiddle: http://jsfiddle.net/QPxVe/2/
Related
My code is available here:
https://drive.google.com/open?id=0B1sXI26Zssw2YUVueDdyUHlrVXM
The problem that I'm facing is that there's some space showing up between my navigation tabs, and I didn't have this problem before I used the 'display: inline' function to center my navigation. What can be done? I've tried using "negative pixel margins" but they don't seem to work at all (They did work in another sample navigation I was experimenting with).
Here's a screenshot of the output of the code.
Ok so I downloaded the files and tested it on my server, what I found was rather strange, but the space was only there when the code was on different lines, I ended up fixing it by putting all the <li> elements on one line. You can see the code here: https://gist.github.com/HoogleyB/87de68e1a74480d73150770885e25224
Try to set margin = 0 . If you are running your code on chrome, it adds additional padding and margin of about 8px on its own. So try to fix that.
Have you tried:
ul li{ margin-left:-6px; }
Hope it will helps you.
Just so you know, this bug is because you are using display: inline-block;
With inline-block, if your html has breakline between elements you will see a space.
To remove it there is a tricky css thing :
ul {
font-size: 0;
}
li {
font-size: 12px;
}
If you set the parent with a font-size 0 the space will disappear.
I wonder if anyone has a genius idea for why my internal links are not working on a webpage.
I've set the html with the standard
<button>Some Text</button>
....
bunch of content
....
<div id="link"></div>
Here is the codepen link
http://codepen.io/Cornucopia/pen/vyrPWw?editors=1100#0
This was not working for unknown reasons until I greyed out enough bits of code and isolated the line that caused the problem. In one of the linked css files was a float:left for the li elements. The command is not associated with the button link, and so I can't fathom why it would keep the hyperlink from working. But when the " .grid .tile {float: left;} " is greyed out then the link works again.
the result you getting is absolutely correct.
Case 1:
/*.grid .tile {float: left;} */
<div id="link" style="width:100%;height:30px;background:yellow;"></div>
Result:
And, on click of your button you come to this location.
Case 2:
.grid .tile {float: left;}
<div id="link" style="width:100%;height:30px;background:yellow;"></div>
Result:
See, the location of div now (yellow background)
So, the anchor is working correctly. There is no issue in browser rendering, html or JavaScript.
Reason of Mishap in 2nd Case
You do not completely understand of float. It renders an item like some mixed behavior of (display:inline + Position absolute), which means, first ---> it is no longer eligible to take height and then give space to next item. Second, this is no longer going to effect the location of other items in Y-axis, ie, height.
So now all your li's (which are all float:left) are having no effect on taking space on Y-axis or taking space in height. So Div, has shifted up (like position:absolute items do not effect on other items).
So, removing same you get your desired result.
Hope, this helps!
The problem is that everything is floated left except for your <div id="link"></div>. I tested the following and it seems to work.
.grid .tile { float: left;} /*cuase of problem*/
#link { clear:left;} /* add this */
The clear:left; breaks the float and puts the div back into the position it would be in. Then the floats start back up again. :)
One potential issue is that you may not want a break in the pictures. I.e., if you still want everything to line up against each other, the dude pics and the car pics, then just put #link { float:left; } but in my opinion since the pictures are of different types the break seems appropriate.
I have divs after each other that look like this.
<div class="tag">one tag</div>
<div class="tag">second tag</div>
<div class="tag">third tag</div>
...50 more of them....
(in CSS)
.tag {
display:inline
}
I found out that I have too many of them and they start breaking in the middle, and I don't want that.
However, when I set the nowrap like this
.tag {
display:inline;
white-space:nowrap;
}
all of them are on one line, making more than 100% of the window. I don't want that.
What I want: if there are too many of these divs on one line, the list of the divs can break, but the divs themselves don't. I just don't want to break the divs in the middle.
I hope I tell it clearly enough.
If I understand right, you want them to lay side to side, and then break to a new line when the row is full, but not in the middle of a div.
All you need is
.tag {
float: left;
}
See fiddle here for demo.
You can also add padding-left: 5px; if you want some space between them.
.tag {
display:inline;
white-space:nowrap;
float:left;
}
That worked. (and adding "clearing" empty div with clear:both under that.)
Depending on the browsers you need/want to support, you may find using
.tag {
display:inline-block;
vertical-align:top;
}
a better solution. Since it is a <div> that you want to apply this to, the style will not work out of the box for IE5-7 - see http://www.quirksmode.org/css/display.html#t03. There are workarounds of course - How to fix display:inline-block on IE6? - if you want to use it with those browsers.
The benefit of inline-block is that you do not need to clear the floated content and also that your elements are not rendered out of normal flow. I try to avoid floating elements where possible as in my experience it has caused layout problems.
However, there are a couple of potential catches with this approach. One of which I have already addressed, by adding a vertical-align:top rule. See a previous answer for why this happens - https://stackoverflow.com/a/12950536/637889
The other is due to potentially unwanted white-space between the inline-block elements. See http://css-tricks.com/fighting-the-space-between-inline-block-elements/ for some clever ways around this.
Below is a jfiddle containing the following html.
<span class="label label-warning">helloworld</span>
<i class="icon-copy"></i>
I run into this issue a lot, where two inline-block / inline elements are side-by-side and don't match up at the same top. I believe this has something to do with the line-height of both elements not being the same. Is there any hack to combat this effect?
http://jsfiddle.net/YfZVS/
Current Configuration:
Desired Effect:
.btn { vertical-align: top; }
Works on this browser... I can't check any others atm. here's the fiddle
if you float both of your elements left they will line-up, you can then add a margin to space them out check it out in the fiddle that is in the comment, Stackoverflow is preventing me from adding the link in the body!
http://www.lethalmonk6.byethost24.com/index.html
If you inspect with firebug the spacing between the "project-link" divs, there are a few pixels of added margin between each div. I have the margin set to 20 px, and then these little bits gets added on. Where is it coming from?
You're using display:inline-block so the white space between the elements is what you are seeing there. You can either remove the white space between the divs or use float: left instead.
To elaborate... if you're using display: inline-block do this:
<div></div><div></div>
Instead of this:
<div></div>
<div></div> // White space is added because of the new line
As Terminal Frost said, add float: left to the class, and remove display: inline-block. Additionally, add content: "." to the parent div container to fix the wrapping issue you'll have from doing that.
As Lucifer Sam said, display:inline-block will show you space between element if there are one.
The slution given is good:
<div></div><div></div>
But for element with large content, i personnaly prefer this solution of not having the white space between display:inline-block elements. This is what i do:
<div>
large content
</div><!-- No space
--><div>
large content 2
</div>
I wasn't quite happy with the provided solutions here and then I came across a fix that I actually was using to address this issue before, but forgot about it...
All you might need is to simply add font-size: 0; to the parent container (you can overwrite this rule for the children, so it shouldn't break your fonts).
So, here's a basic example:
<div class="font-zero">
<div class="inline-block"></div>
<div class="inline-block"></div>
<div class="inline-block"></div>
</div>
<style>
.font-zero { font-size: 0; }
.inline-block { display: inline-block; }
</style>
With that example you don't have to worry about the markup in your code (personally, I think removing line breaks in the code to solve this issue is really ugly) and also you don't need to use floating, which might be not optimal for many reasons.
Since this page was the first Google result, I hope I'll get here next time I come across this issue and forget the easy fix... And maybe it would be useful for someone else too :)