I have a simple page with a nested div containing content and button below it, that seems look fine on Safari and Firefox but was having issues on Chrome with the vertical alignment - two elements superimpose on each other due to the min-h-inherit not working(i.e inheriting) as expected.
HTML:
<div id="cont" class="flex flex-col min-h-inherit">
<div>
...
</div>
</div>
CSS:
body {
min-height: -webkit-fill-available;
}
#cont{
position: relative;
}
A workaround was to specifically include h-screen in the cont div but this seems to break the functionality on Safari, by adding a scroll bar to the page and increasing the relative height between the div's.
However, this issue seemed to resolve a bit when adding display: flex to the body, however this seems to break in certain screen sizes:
body {
min-height: -webkit-fill-available;
display: flex;
}
Spent a lot of time trying to get the inheritance to work as expected by referring to existing answers regarding this webkit bug/functionality. Don't understand what the best way to resolve this is.
New to CSS so would really appreciate if someone could shed some light on this. Thanks!
Related
This is my WordPress Starter Theme: http://starter.devurl.net/
Relevant HTML:
<html>
<body>
<ul class="skiplinks">...</ul>
<div id="site-wrap">
<!-- content here -->
</div>
</body>
</html>
Relevant CSS:
body {
direction: rtl;
overflow-x: hidden;
}
#site-wrap {
position: relative;
min-height: 100%;
transform: translateX(-250px);
}
Viewing the website in mobile (in Chrome's Devtools).
body has overflow-x: hidden;
div#site-wrap has transform: translateX(-250px);
As far as I grasp the idea, #site-wrap suppose to move to the left and leave a blank space at the right, without any horizontal scroll to the sides.
Notice the website direction is RTL, but it's not supposed be a problem, and I'd like to keep it that way without using ltr anywhere in the document.
Thank you!
In my experience with mobile, due to the way they render various things, you sometimes need to address the html element as well to ensure things work properly.
This is what it looks like (before fix) on a Samsung Galaxy (I've added borders to elements to illustrate what's happening):
Black: html element
Green: Body element
Red: site-wrap element
Blue: skiplinks element
Notice that the body and html are actually only the right 250px.
By adding this:
html {
overflow-x: hidden;
}
the problem seems to be resolved:
I'm sure someone smarter than I am will be able to explain why!
For a webpage grid-layout I decided to use Flexbox. Now I wanted to implement some "auto-functionality", so that grid-boxes can later be inserted without the need to add classes or styles in the HTML. One of this features is to make a box allways be 75% as tall as it is wide - even if the box is resized by, for example, browserwindow resize. Off course, if the boxes content extends the 75%-height, it should (and only then should) increase its height to fit the content. I searched for hours to find a suitable solution, but I finally got it working. So I thought at least, until I added content to the box.
The auto aspect-ratio works fine, as long as the box is empty. If I add content, the 75% of the width is allways added to the height it has through extension by its content. I made a jsfiddle to clearly visualize the problem:
JSFiddle wd5s9vq0, visualizing the following Code:
HTML-Code:
<div class="container">
<div class="content-cell"></div>
<div class="content-cell"></div>
</div>
<div class="container">
<div class="content-cell">
This cell has an inreased height because of
it's content. The empty space below the
content is the 75% of the cells width.
</div>
<div class="content-cell"></div>
</div>
CSS:
.container {
display: flex;
width: 400px;
}
.content-cell {
flex: 1 1 0;
margin: 10px;
background-color: #ccc;
}
.content-cell::after {
content: "";
display: block;
padding-top: 75%;
}
If I didn't knew it better, it looks like a floating-problem - but I think the ::before / ::after selector should add the block-element before the element it is used on and not inside it.
Does anyone has an idea on how to fix this problem?
This seems to be a very widespread problem on the internet, and most solutions you find are either about wrapping the content, absolute-positioning the content or a mixture of both. This has numerous and case-dependent downsides. After hours of playing around with the code, I finally found a combination of CSS proporties that work without the need to add any DOM or make the content absolute-positioned. This looks quit basic, and I am wondering why it took me so long and why you can't find it out there on the web.
The HTML:
<div class="mybox aspect-full">
This is text, that would normally extend the box downwards.
It is long, but not so long that it extends the intended aspect-ratio.
</div>
The CSS:
.mybox {
width: 200px;
}
.aspect-full::before {
content: '';
display: block;
padding-top: 100%;
float: left;
}
The only downside I could find is that the content of your cell must float. If you use clear on one of your child objects, it is positioned below the expander-block and you are back to the original problem. If you need to clear the floating of divs inside of these aspect-ratio-cells, you might consider to wrap them and keep the wrapper floatable.
I've on my site I've got two images inside their own parents divs (the full structure for each is div a img). The divs have fluid heights (height: 10%;). The images within are set to max-height: 100%;. The images size properly within Webkit, but every other browser seems to have problems with one or both. I've tried searching for possible solutions, but I can't even begin to imagine what the cause even is.
Since it's probably easier to just show you guys, here are the relevant pages and files:
Main page (the center logo image and the "CRASH" logo at the bottom)
CSS (the relevant divs are .logo and .crash)
Below is a breakdown of what I'm seeing. Thanks for any help!
edit: Never actually mentioned what the undesirable result was. In the browsers where it's broken, the images display at 100% -- not at 100% of the parent container, but at the full size of the image itself, breaking out of its container. Hope this clarifies things!
Browser / DIV | .logo | .crash
chrome 22 | works | works (same results on my friend's copy of Safari)
opera 11.61 | broke | broke
ie 9 | works | broke
firefox 12 | works | broke
I figured out it using Firebug in firefox 15.0 and got a solution, Hopefully it will work on all browsers.
1. Remove css rules defined for #footer and add those rules in .crash like below:
.crash {
height: 10%;
position: absolute;
text-align: center;
top: 82%;
width: 100%;
}
2. Add the following rules:
.footerNav {
position: absolute;
text-align: center;
top: 92%;
width: 100%;
}
3. And in .mod-languages replace existing styles with given below:
.mod-languages {
position: absolute;
text-align: center;
top: 96%;
width: 100%;
}
Additional Notes:
Your HTML structure is looking like this:
<div class="moduletable">
<div class="custom">
<div id="logo">
<a href="http://www.millioncranes.com">
</div>
</div>
</div>
So when you wrap moduletable with #footer like below:
<div id="footer">
<div class="moduletable">
<div class="custom">
<div class="crash">
<a title="CRASH Japan" href="http://crashjapan.com">
<img src="/images/crashlogo.png">
</a>
</div>
</div>
</div>
.. /*Another moduletable*/
.. /*Another moduletable*/
</div>
This causing a problem. The style of #footer applying on all moduletable elements inside #footer. So do not need to wrap these elements inside footer. Style your elements like you have styled for #logo, That's it!
Hopefully it will fix your problem in all browsers.
I'm afraid I only have a chromebook here, so I can't test on any non-webkit browser, but here's my guess:
For the rendering engine to know how to apply height: 100% it has to know for sure the height of the container element. People have wrestled with 100% height for a long time.
First, I would make sure your a is display: block so that the img definitely knows how high its container is.
Then I would play around with setting explicit heights for the imgs container elements, and see if any of those fix it - then when you know what the problem is you can find a solution. Hopefully.
Let me know how you get on.
Not all browsers support max-height; see http://caniuse.com/#search=max-height
You don't really say what aspect of the result you don't like: what exactly is the difference between what you expect to happen and what actually happens?
I've got a CSS :hover pseudo-class that is not producing any results.
I was messing around with some image gallery code, and I've managed to get this snippet that doesn't work. I can't figure out why. Some of the weirder CSS rules regarding size here are because these divs normally contain images. I removed the images for simplicity, but left the rules in.
Other :hover elements on the same page are working.
I'm not sure what else to say about the problem, since this is so basic. I'm probably missing something really obvious.
JSFiddle here -
http://jsfiddle.net/GbxCM/
In some cases (mostly with absolute positioning), you cannot apply a :hover pseudo-class to something with display: inline-block;. (If you have Chrome, use inspect element and add the :hover trait yourself--notice, it will work perfectly! The browser just doesn't register the :hover itself.)
So, I went ahead and replaced this with float: left;, added a margin (to simulate the inline-block look), and changed the br to a clear. The result is in this jsFiddle.
If I'm guessing correctly what you're trying to do, then you don't need to change the positioning or any of that. The only change I can see you wanting to make is changing the background color. Here's the fiddle I made to clarify that response.
Here's the code for readability's sake:
HTML
<div class="wrapper">
<div class="squareswrapsolo"></div>
<div class="squareswrapsolo"></div>
<div class="squareswrapsolo"></div>
<div class="squareswrapsolo"></div>
<br>
<div class="squareswrapsolo"></div>
<div class="squareswrapsolo"></div>
<div class="squareswrapsolo"></div>
<div class="squareswrapsolo"></div>
</div>
CSS
.wrapper {
height: 600px;
width: 600px;
overflow: hidden;
position: relative;
}
.squareswrapsolo {
height: 100px;
width: 100px;
display: inline-block;
overflow: hidden;
background: #ccc;
}
.squareswrapsolo:hover {
background: #000;
}
For me The problem was with my Chrome setting, I was testing my multi-platform web application with chrome in Mobile view for which the hover event is by-default disabled.
You can disable the Mobile mode by clicking the mobile icon in the top-left of Elements tabs as shown in image.
Moreover, to check if your :hover event is setting the desired css property or not you can force-trigger the hover event from chrome (by checking hover in styles> :hov> hover red marked in image) and check if the :hover CSS property is working or not. For me it was working fine so I was sure that the event is not triggering.
I fixed it with removing a z-index: -1 from a wrapper element
I am using yaml for layout and famous clearfix css to make sure container with floats get extended.
Everything works fine with Firefox 3, IE6, IE7, IE8, Opera 9 and Google Chrome, but I have issue with Firefox 1, Firefox 2 and SeaMonkey. The problem is that clearfix container gets extended too much, as you can see on the website:
http://www.slagalica.tv/game/mojbroj
Here are screenshots of Firefox 2 and Firefox 3 rendering.
Update: Screenshots on BrowserShots.org
Unfortunately, stats show that more than 10% of my visitors are using FF2, so I cannot simply ignore the problem. I tried removing or tweaking some parts of clearfix CSS, but no matter what I do, the timer DIV (green) is separated by a large margin from the rest of the page.
Does anyone have an idea how to solve this?
Update2: I finally gave up and put TABLE tag and solved the issue in few minutes. So, don't try to look into HTML source - problem is not evident anymore.
So if you look at the original article that promotes clearfix on positioniseverything, you will note that the author recommends that since the fix is out of date the reader should look at an article on sitepoint. This sitepoint article points out a method which I have been using for a long time now.
Very simply if you give the parent overflow: hidden and make sure it has 'layout' in IE then this will clear the internal floats.
<div id="wrapper">
<div id="leftcol">
Text
</div>
<div id="rightcol">
text
</div>
</div>
and then the corresponding CSS:
#wrapper{
overflow:hidden;
width: 100%;
}
#leftcol{
float:left;
width: 50%;
}
#rightcol{
float:right;
width: 50%;
}
In the above example I have used width: 100% to give layout to IE, but you could just as easily use zoom: 1 or height: 1% if you would rather.
Try replacing clearfix with this technique and your problem should be solved.
Things to bear in mind with this technique, be careful of your internal widths otherwise you may get clipping and it is important to override the wrapper in your print stylesheet as overflow: visible otherwise it will only print the first page. but I have been using this method in production successfully for years now and I have never had any unresolvable issues with it.
clearfix is just a hack for the lazy or obsessive purist. Put a clearing div where you need it (at the bottom of your div) and get on with life.
<div>
... floated content ...
<div style="clear:both"></div>
</div>
BTW. Purist who claim this breaks semantics are incorrect. The HTML specification defines no semantic meaning for <div>. At worst it mixes style/structure but it's hardly a burden to remove when the site is redesign in the future and a pure css solution becomes practical.
I looked at it using browsershots, and I'm trying really really hard to figure out what the difference between it in FF2, 3, and chrome is. I'm not seeing it.
Looking at your page though, why not do something along these lines?
<div id='wrapper'>
<div id="leftcol">
Text
</div>
<div id="rightcol">
text
</div>
<div id="foot">
text
</div>
</div>
And the CSS:
#wrapper{
min-height:1%; //to fix IE6 floats escaping ancestor div
}
#leftcol{
float:left;
}
#rightcol{
float:left;
}
#foot{
clear:both;
}
Seems like this is a bug, and is fixed in newer versions. However, to maintain compatibility, tables have to be used instead of CSS.