I have encountered what I consider a bug in Safari and was wondering if anyone might be able to shed some light on why this outcome is taking place. I have included a very simple example below, but basically my issue is this. I have a child element with a width of 300px and a height of 80px, I have a this child nested in a parent with a width of 0px and an overflow that is hidden. These two elements are wrapped in a container that has no width set and all three elements are floated left. The content is being hidden by the parent, however the container that is wrapping them both is extending the full width of the "hidden" child. Works great in every browser except Safari and I don't know why.
summary: width: 0px; and overflow: hidden; does not work in safari
<html>
<head>
<title></title>
<style type="text/css">
#container {background: rgba(0,0,255,1); float: left;}
#block {width: 0px; background: rgba(255,0,0,0.50); float: left; overflow: hidden;}
#content {width: 300px; height: 80px; background: rgba(0,255,0,0.50);}
</style>
</head>
<body>
<div id="container">
<div id="block">
<div id="content"></div>
</div>
</div>
</body>
</html>
Certain display values seem to be where the bug happens in Safari.
After a lot of trial and error it seems that a good solution may be setting max-width to the same as width. Keep in mind that if you animate width you need to set max-width to something that allows width to expand (possibly a value of auto), temporarily, while the animation occurs.
Read the various CSS comments below to understand more about this problem.
HTML:
<div id="container">
<div id="block">
sfdklhgfdlkbgjhdlkjdhbgflkjbhgflkdfgid
</div>
</div>
CSS:
#container {
flex: 0 0 auto;
background: red;
/* BUG: Certain display values seem to be where the bug happens, if display was just inline here, there would be no issue. */
display: inline-flex;
overflow: hidden;
border: dotted 2px green;
}
#block {
width: 0;
/* height: 0; Setting height to 0 simply creates the illusion that width is fixed. If you look at the border, the width is still there, so height 0 does not help. */
background: blue;
/* BUG: Certain display values seem to be where the bug happens, if you don't need this, change it. */
display: inline-flex;
overflow: hidden;
/* Has no practical effect here. */
text-overflow: clip;
/* font-size: 0; still keeps a little bit of width and can spoil the look of animating the width open from 0. */
/* margin-right: -100vw; is a nasty hack that totally works but is bad for animating margins. */
/* BEST FIX: Setting this property to the same as width may be the best way to fix the issue. */
max-width: 0;
}
Running example at: https://jsfiddle.net/resistdesign/k0b5s4p7
If you are presentnig text inside that div. Then, you should try to zero font-size.
.class{
font-size:0;
}
Or use text-indent
.class{
text-indent: -999px
}
If you also set height: 0; on #block your problem will be solved. Not sure why this is happening though :/
Related
Given the following structure, I need level2 have a min-height without changing the structure. Further, I am not able to move the overflow: hidden to a different class (the example is simplified, it would affect a lot of other things). It works with px, but not with %. All other css properties can be changed.
I am aware of vh, which works exactly like it should. But I would love a solution with CSS2.
Fiddle
HTML:
<div id="level1">
<div id="level2">
<div id="heighter"></div>
</div>
</div>
body and html: height 100%
level 1: min-height 100%, overflow hidden
level 2: min-height 100%
heighter: height 200px
Edit: More informations about the overflow:hidden
I am using this for a offcanvas navigation. This is a place where I can't use max-width (right?). If I replace the overflow with the max-width, the layout gets recalculated and after that I am able to scroll the level2 on the x-axis (left and right). Same problem as here (click on Push-Menu-Left and then you are able to scroll the x-axis). What I am trying right now is preventing the x-axis scrolling and being able to use the min-height: 100% corretly.
In order to calculate min-height, div#level2 needs to refer to the height definition of its parent. In your code, div#level1 does not have a specified height. You an specify one like so:
#level1 {
height:100%;
overflow: hidden; /* This has to be here */
background-color: red;
}
WORKING EXAMPLE
EDIT:
Explicitly setting height on div#level1 (rather than setting min-height), you no longer need the overflow:hidden definition. Removing that allows the page to scroll when div#heighter expands beyond the browser's height.
(You mentioned that you need the overflow:hidden for other reasons. If possible, please edit your question to describe those reasons a bit more.)
#level1 {
height:100%;
background-color: red;
}
#level2 {
min-height: 100%;
background-color: lightseagreen;
}
#heighter {
height: 2000px;
width: 100px;
background-color: white;
border: 5px dashed black;
}
WORKING EXAMPLE
http://jsfiddle.net/b8uj75e5/3/
#level2 {
min-height: 1000px; /* Working */
min-height: 100%; /* Not working */
background-color: lightseagreen;
display: block;
position: absolute;
width: 100%;
}
IT LIVES.
I just messed around until it worked.
I have a wrapper that contains all the elements of an html page.
#wrapper {
width: 1000px;
height: auto;
min-height: 100%;
margin: auto;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4488ff), to(#4422ff));
[...]
background-attachment: fixed;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
}
Here's the HTML code sample
<div id="wrapper">
<div id="uppermenu">
<div id="container">
<div id="logo"> <img src="images/logo.png" height="100%"> </div>
<div id="banner"> <br></div>
</div>
</div>
<div class="sidemenu"> [...] </div>
<div id="guide"> [...] </div>
</div>
I want this wrapper to change its height depending on the content it has to contain, but as I do this is not happening.
If I try to use
overflow: hidden;
the wrapper is shifted down by the uppermenu div (which it should be containing) and using
clear: both;
at the end of the contents doesn't change anything.
I've tried at least 5 different question answered correctly here but none worked well for me.
Last thing: the wrapper set as I wrote (with min-height at 100%) fits perfectly the screen of my browser, but that clearly not what I want it to look!
Any help???
EDIT: here's the CSS of sidemenu class
.sidemenu {
float: left;
margin-left: 20px;
margin-top: 20px;
height: 200px;
width: 150px;
background-color: #4488ff;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
z-index: 3;
}
and of the guide id
#guide {
float: left;
margin-top: 20px;
margin-left: 50px;
height: 100%;
width: 760px;
background-color: #4488ff;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
z-index: 3;
}
uppermenu and container
#uppermenu {
position: fixed;
top: 0px;
width: 1000px;
height: 100px;
margin: auto;
background: #004465;
z-index: 5;
}
#container {
width: 1000px;
min-height: 100%;
margin: auto;
}
Solution one: clear: both
Adding a block element with the style clear:both; onto it will clear the floats past that point and stop the parent of that element from collapsing. http://jsfiddle.net/TVD2X/1/
Pros: Allows you to clear an element and elements you add below will not be effected by the floated elements above and valid css.
Cons: Requires the another tag to clear the floats, bloating markup.
Note: To fall back to IE6 and for it to work on abstinent parents (i.e. the input element) you are not able to use :after.
Solution two: display: table
Adding display:table; to the parent to make it shrug off the floats and display with the correct height. http://jsfiddle.net/h9GAZ/1/
Pros: No extra markup and is a lot neater. Works in IE6+
Cons: Requires invalid css to make sure everything plays nice in IE6 and 7.
Note: The IE6 and 7 width auto is used to prevent the width being 100%+padding, which is not the case in newer browsers.
A note on the other "solutions"
These fixes work back to the lowest supported browser, over 1% usage globally (IE6), which means using :after does not cut it.
Overflow hidden does show the content but does not prevent the element from collapsing and so does not answer the question. Using an inline block can have buggy results, children having strange margins and so on, table is much better.
Setting the height does "prevent" the collapse but it is not a proper fix.
Invalid css
Invalid css never hurt anyone, in fact, it is now the norm. Using browser prefixes is just as invalid as using browser specific hacks and doesn't impact the end user what so ever.
In conclusion
I use both of the above solutions to make elements react correctly and play nicely with each other, I implore you to do the same.
get rid of min-height: 100%. this means that the minimum height of the div is 100% of your browser height. eliminating this should make it fit to the content
Strangely certain aspects of one of my page doesn't show on FireFox. I have narrowed the problem down to this:
Main Page (Works On All Browsers)
The <div id="wrapper"> has the following CSS:
margin: 0px auto;
width: 1000px;
background-color: #272727;
min-height: 100%; /* ie6 ignores min-height completely */
height: 100%;
background-size:100%;
This ensures the nice grayish background. Also I am using the masonary jquery script for floating all my stuff. At the end of all my floats I clear them with :
<div style="clear: both;"></div>
This makes everything perfect. However on another page, that didn't seem to work so instead I added this line of code to the wrapper style (for that page)
style="overflow: auto;"
Now on IE and Chrome that's all good and well, and restores the background, but on firefox neither the content or the background is to be seen. On removing the code, the content is there but the background is not.
Why is this? What surprised me most is that IE worked and firefox didn't?!
EDITED:
Add clear:both or clear:left and overflow:auto; in the wrapper css.
#wrapper {
background-color: #272727;
background-size: 100% auto;
height: 100%;
margin: 0 auto;
min-height: 100%;
width: 1000px;
clear: both; /* Added Clear Property */
overflow:auto; /* Added Overflow Property */
}
Because tagbar <div> above the wrapper <div> is floating left, So you need to clear the floating.
http://img841.imageshack.us/img841/3145/imgej.png
I have some pretty basic HTML/CSS that isn't working as I expect. Basically I have my body setup to be 400px wide. I then have two divs inside of the body with explicit widths of 300px and 100px. Additionally, both of these divs are set to display: inline-block. For some reason, the 100px div breaks out of the body's content area and appears below it. I don't know why this is happening. If I set the width from 100px to 96px, it works. However, if I set it to 97px, 98px, 99px, or back to 100px, it doesn't work. I find this behavior very odd. Can someone explain what is going wrong?
Note that I am testing this on Chrome (Beta Channel). Code is below.
The CSS:
body {
margin: 4px;
width: 400px;
height: 250px;
border: 1px solid black;
}
.list-container {
display: inline-block;
width: 300px;
height: 100%;
background-color: red;
}
.button-container {
display: inline-block;
width: 100px;
height: 100%;
background-color: blue;
}
The HTML:
<body>
<div class="list-container">
</div>
<div class="button-container">
</div>
</body>
It's because of the way white-space collapses in html.
If you remove the line-breaks from between the two div elements, everything's fine:
<div class="list-container">
</div><div class="button-container">
</div>
JS Fiddle demo.
You could, also, just comment-out the between divs:
<div class="list-container">
</div><!--
--><div class="button-container">
</div>
JS Fiddle demo.
Or even set the font-size to zero for the body element (but you'll have to redefine it for the child elements, obviously:
body {
margin: 4px;
width: 400px;
height: 250px;
border: 1px solid black;
padding: 0;
font-size: 0;
}
JS Fiddle demo.
Another possibility with odd inline-block behaviour in Chrome is if you have text-render: optimizeLegibility set. I was struggling with inexplicable line-breaks in inline block elements in Chrome, and found that removing text-render: optimizeLegibility fixed the problem.
I've had at least one other hard-to-figure-out problem (inexplicable non-rendering of web fonts) that turned out to be caused by optimizeLegibility in the past, so from now on that's going to be a prime suspect when things behave strangely in Chrome.
(nb. Even if you don't think you're using it, if you're using a framework like Twitter Bootstrap you may be using it unwittingly)
It's the margin in your body:
margin: 4px;
Because the margin counts as part of the total width. 300px for the first one + 100px for the second div + 8px (4 on either side) for the margin = 408px. That forces the second div down to the next line.
I'm actually kind of surprised that it works at 96. It acts like it's only accounting for the margin on one side. I'd expect it to only work at 92 or below. Either way account for the margin size in the width of your body or set the margin to 0 and that should fix the problem.
I've come across a bug in Chrome in the following situation:
Two block elements (we'll call them #rail and #well)
#rail is floated left
#well is not floated, has an overflow set (hidden or auto), and a left margin set.
What I'm observing is that, in Chrome, #well is not as wide as it should be. From playing with the different widths, it appears that Chrome is calculating the width of the #well as if neither the margin, nor the available space it inhabits, exists. Here's a reduction:
<html>
<head>
<style type="text/css">
body {
width: 1000px;
font-size: 2em;
color: white;
}
#container {
background-color: green;
}
#rail {
float: left;
width: 100px;
background-color: blue;
}
#well {
overflow: hidden;
margin-left: 500px;
background-color: red;
}
</style>
</head>
<body>
<div id="container">
<div id="rail">RAIL</div>
<div id="well">WELL</div>
</div>
</body>
</html>
Screen shots of the reduction in Chrome and Firefox attached. In Firefox, it's as expected -- 100px of #rail, then 400px of margin, then 500px of #well.
So I'm wondering if anyone's seen this before and, if so, whether there's a known workaround. Here's why I have this combination of properties:
The #well contains floated content that I'd like for it to wrap, hence the overflow.
The #rail may or may not exist on the page, hence the left margin on the #well.
Many thanks for any pointers!
Here it is in Firefox:
And in Chrome:
Try adding margin-right:-500px to #well
I had the same problem and your reduction helped me solve it.