Why does overflow hidden affect height and how can I fix it in this example?
Tags: html,css,html5,css3
Problem :
Fiddle: https://jsfiddle.net/wa51kdh7/
Code:
HTML: Hello world
<span class="span2">
Goodbye cruel world
</span>
CSS:
span {
display: inline-block;
margin: 0;
padding: 0;
line-height: 16px;
font-size: 16px;
height: 16px;
}
.span1 {
background-color: lightblue;
}
.span2 {
background-color: pink;
overflow: hidden;
width: 130px;
text-overflow: ellipsis;
}
Here I am trying to create two spans next to each other, only one of them has overflow: hidden and the other shouldn't have overflow: hidden. For some reason the overflow: hidden affects the heights and they don't line up - even when I use an explicit height.
Any idea how to fix this?
Solution :
This can also be fixed by adding vertical-align: top
to the span
's CSS rule. The reason that both rules fix the problem is that they enforce the vertical alignment of the divs.
Adding a vertical-align
rule will keep you from potentially having the elements that follow from needing to be cleared.
CSS Howto..
Using flexbox all you have to do is update your div.container rule (without prefixing, for brevity). div.container { height: 500px; background-color: #bbb; // add these properties here display: flex; flex-direction:...
Bouncing images at different times: Add element with class bounce, bounce2 and bounce3. The CSS in my snippet has an animation delay for the bounce effect. If you want to...
Percentage height is calculated based on the height of the first positioned parent. In this case, the #keys and #kbd divs don't have a position CSS rule. This means the...
Everything seems to look fine to me - assuming that I understand you correctly. Edit : Sorry - I am sure you looking for an alternatives. These might help Pure...
Using multiple selectors seems to do the trick. DEMO: http://jsfiddle.net/4V3y5/ document.querySelectorAll("p:not([attra]),p:not([attrb])"); First pass selects all p elements without attra, which will exclude the ones with both. Second pass selects all...
In the .abouth1, .abouth2, abouth3 section of the page remove height: 100%;. Set #content to height: 100%; or Set #content to height: 90%; to get it closer...
It's not really clear what you are asking from this question alone but from the details of the other question it still seems as though flexbox is the solution as...
IE6 doesn't support :hover on anything but a elements anyway, so it's got you covered there. That said, if you'd like to hide any rules from IE6, it's just a...
Oh, well, do I feel a bit stupid! The extra padding was blank space part of the image itself. It works fine with a corrected image: http://jsfiddle.net/bendog/gvtqwhw0/24/ Here's the updated...
So far i found this is best and works in IE 6+, safari 2+, firefox 2+ http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/ ...
I suppose you got something like this: <div class="note"> <span class="label">Note:</span> <span class="text">Certification and E-Tests are...</span> </div> I'd use the HTML tags dl, dt & dd (Reference) for it: <dl>...
use this css http://jsfiddle.net/PESHk/3 #myborder { box-shadow: 0 0 0 4px green, 0 0 0 4px green inset; border-top:2px solid red; padding:8px; } ...
The code u have given has the spelling mistake for position - absolute, Even if the spelling is corrected, it won't work as it needs to be relative to circle....
You need to give the second div position:relative to ensure the correct stacking order. .d1{ width: 100px; height: 100px; border: 1px solid #000; overflow: hidden; /*background-repeat: no-repeat; background-position: 50% center;...
element.style in Firebug is the style applied to the element, for exemple <span style="padding: 10px;">My text</span> element.style will have element.style { padding: 10px; } to override, the best way is...
That's because you are performing quite CPU demanding task 60 times per second (scroll). In every frame you are performing jQuery search and jQuery height calculations and some page repainting...
I cleaned up your code a little and added a new function called ChangeActiveBullet, which removes a previous selection and updates the current selection. I've also introduced a new variable...
* { margin: 0px; padding: 0px; box-sizing: border-box; } #container { width: 100%; position: relative; background-color: darkgray; } #temp { position: relative; background-image: url('http://lorempixel.com/1336/768'); background-size: cover; height: 400px; padding:...
You can do this by adding a class to your icon like below- <i class="large material-icons icon-blue">note_add</i> And then in your CSS stylesheet, you can define the color for the...
again you can't use background-color, I've tried background:linear-gradient (..) and it worked for me in ff. option:hover, option:focus, option:active, select option:checked { background: linear-gradient(#5A2569, #5A2569); } ...
More than easy: Disable the style in your fiddle in Chrome’s dev tools, look at the computed styles, and find that -webkit-appearance: push-button; gets applied via the user agent stylesheet...
Its very simple, just make changes as like this .body { width: 100%; background: blue; overflow: auto; position: absolute; bottom: 40px; top: 40px; } Check this http://jsfiddle.net/rCV6E/1/...
This is a common occurrence in Bootstrap with logos, and you need more context, because there are other ways to do this, but based on your snippet of code, you...
Just define transitions by default: SCSS #nav-toggle { position: relative; z-index: 9000; float: right; margin: 15px 15px 0 0; background-color: transparent; border: none; outline: 0; -webkit-transition: all 0.5s ease; -moz-transition:...
I have added improvements to the CSS and HTML, see http://jsfiddle.net/FJhQ7/17/Also read the comments which I added at the lines where I suggested a change. Some notes: Do not use...
It's being caused by your border from the .fadein class. Remove line 131 from your jsfiddle.
You can add CSS files to your iFrame using Javascript: var cssLink = document.createElement("link") cssLink.href = "file://path/to/style.css"; cssLink .rel = "stylesheet"; cssLink .type = "text/css"; frames['iframe'].document.body.appendChild(cssLink); You just have to...
use javascript: var myVar = "100%"; var elements = document.getElementsByClassName('clear'); for (var i in elements) { elements[i].style.width = myVar; } ...
Try this.... HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Temp</title> <script src="js/jquery.min.js"></script> <link rel="stylesheet" media="all" href="style.css" type="text/css"> <script> $(document).ready(function(){...
CSS only solution: http://jsfiddle.net/2YEzP/1/ I recommend you use another class/ID in front of the proposed selectors below, like this: .class123 table tr th:nth-child(1) or: table.class45 tr th:nth-child(1) Otherwise you could...