so when adding an overflow hidden on this ul (which i want for hiding other items in the list) is causing the whole ul to jump about 10px up, can anyone suggest why this might be happening?
i have left the inline css on so it's easy to toggle to see
<ul style="
/* max-height: 25px; */
/* overflow: hidden; */
/* margin: 0; */">
https://jsfiddle.net/mt7qpn3L/
P.S. i know there are other ways to accomplish my hidden list but i'm curious why this is happening and a solution
set ul display: inline; in your style
and remove comment on overflow:hidden
Govind is on the right track. I just thought I'd answer why. It has to do with the text baseline, which is the default setting for vertical-align (vertical-align: baseline).
An interesting side point is that if you remove the UTF-8 characters (中国) the baseline will jump a few pixels since the baseline is different for those characters. CSS baseline is actually dependent on line-height. It is misleading since you expect the baseline to be the line where letters "sit", but the actual baseline overflows the bottom of the ul.
Thus when you add overflow: hidden; The <ul> will shrink to smallest possible height where everything is still visible. And your baseline, which no longer overflows, is now effectively cut to be at the bottom of the element. Therefore everything will jump around when you change overflow.
I think this is a good read about css-baselines: https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/
vertical-align: middle on both ul and li css selectors will center everything.
Related
I have these inline-block elements with a set height and width and overflow:hidden. On chrome, it lines up nicely, but in an older webkit browser, it does this:
.item{
display:inline-block;
height:72px;
width:144px;
overflow:hidden;
text-align:left;
}
If I change them from overflow:hidden to overflow:scroll, they all line up (and overflow: auto makes them all line up except the ones not long enough to need scrollbars)
It almost seems like it's hiding the overflow by just making it invisible but still saving that space. Is that what's causing this?
You need to add a vertical-align: top rule to .item, as inline-block elements will align via baseline (text bottom aligned) by default.
I am trying to put an image in a container but for some reason, there is always a small additional space at the end of the image: Here is a fiddle with tests: http://codepen.io/anon/pen/sikAm. If you look at the last one in the right bar, there is no white because the container hides the overflow. This made me think that the problem happens because of the image, not because of the container. So the container's size gets that white because the image "pushes" an additional space inside. However, the image's size is correct and it has no margin that can add this at the bottom, so I might be completely on the wrong track:
img {
border: 0;
width: auto;
max-width: 100%;
height: auto;
}
I don't know what to do about this. What can cause that whitespace? What am I missing?
The problem is that, by default, images are inline elements, and its vertical-align property defaults to baseline. This alignment produces some space below the element.
To fix it, you can use
display: block [Demo]. This way the element will no longer be inline-level, so vertical-align won't apply.
vertical-align: middle [Demo]. This fixes the alignment problem. Other values may also work.
imgs are displayed inline by default, which creates spaces automatically for next line of texts.
Instead set the display to block. It will make those spaces gone.
img {
display:block
}
This doesn't occur in Chrome. I am trying to implement an Ellipsis for the nested element. Has anyone else come across this and, if so, were you able to work around?
<span>bar <span class="foo">foo</span> bar</span>
span.foo {
display: inline-block;
overflow: hidden;
}
Fiddle
bar <span class="foo">foo</span> bar
span.foo {
display: inline-block;
text-decoration: inherit;
overflow: hidden;
}
Fiddle
Add vertical-align: top where you have display: inline-block.
This is due to the specification on overflow, which works only on block element and how line-height work.
Your outer span is by default display:inline. An inline element should not contains block elements. Although, setting it to display:block won't fix the problem.
The problem is the baseline for the text (outer element) is the same for the box of the inner element. So the box sit at the same height it should start the text (which leave a bit of white space underneat).
Anyway, it might be easier to understand with a demo.
If you set the line-height of the inner-span to lower than the text actual height, the box will conserve its size. Of course thirtydot solution is also valid.
I am using a Navigation design from the site - CSSDECK.
I have done some modification and this is my code.
DOUBTS:
Why #siteNav and #siteNav ul not wrapping around lis. I have used height:auto in #siteNav and #siteNav ul. What I know is auto means browser will decide the height accordingly. But this isn't happening. WHY?
If I do overflow:auto or hidden in any of #siteNav or #siteNav ul. Then that block wrap itself around the lis. Why using overflow doing this?
This is because your lis are floated. When you don't have overflow: hidden;, then the lis are in a different context than the ul, so the ul doesn't wrap around them.
overflow: hidden; is a generic, known fix for containers to resize to fit their floated contents, but there are other methods -- for an extensive reference, see this.
just apply overflow: hidden; to your #siteNav ul
#siteNav ul {
overflow: hidden;
}
Because you establish a new Block Formatting Context when using overflow with anything ofther then visible (link to the w3.org specs). by- ChristopheD
read this
This is happening because lis are floated. Any wrapper containing floated elements will not wrap the contents unless overflow: hidden is applied to the wrapper.This is a common browser issue with floated elements. Also, overflow:hidden does not fix this issue in all browsers. Search for "clearfix" to see cross browser fix for this issue.
BTW, you don't need the height:auto there, block elements by default have width and height auto. If there was no floated element inside, then you would see the expected behavior.
I am trying to get a series of <a> tags appear at the base of their parent <li>.
The problem is two fold. If I use position: relative, bottom: 0; has no effect. If I use position: absolute, the <li>'s have overlapping widths.
I can fix the first problem by using the top style, but this is not ideal as the text size is unknown, and the top element measure from the top of both elements (so the base of the element would not hit the base unless I knew the font size).
I can fix the second with defined widths, but this will add unwanted white space on elements with shorter titles.
Here is a JSFiddle of the issue.
Try this bit of CSS:
#main-menu li a{
display: table-cell;
position: relative;
vertical-align: bottom;
height: 111px;
}
jsFiddle of the working style
Add a line-height value to your "#main-menu li a" style and position accordingly, 200px should work.