Under Chrome this is like this and how it is suppose to be :
However under firefox it goes like that :
Here is a link to see it link
Does someone has any link to a page where are explained the differences between navigators and their fixes ?
Replace max-width: 70% by width: 70% in this selector :
#miniMenu img { width: 70%; }
See this post on SO explaining issue on Firefox with max-width property :
Image mysteriously ignoring max-width in Firefox & IE
Especially theses lines from #Boris Zbarsky answer :
You have max-width: 100%, but 100% of what? Of the parent width,
right? But the parent is an inline-block (with class="sponsor") whose
width is not set, so its width depends on the children, and in
particular on the preferred width of the children.
The layout of this styling is undefined in the CSS specification. In
particular, the intrinsic width of the kids in this case depends on
the width of the parent which in turn depends on the intrinsic width
of the kids. See
http://www.w3.org/TR/CSS21/visudet.html#shrink-to-fit-float for the
relevant spec text and note all the "does not define" bits.
Related
What is the best way to solve this issue. Obviously all browsers on mobile have got a UI (address bar etc) at the top. This adds additional height to the viewport, so my website which is using 100vh is missing a section.
I'd assume different browsers have different sized viewports due to this, I could simply do something like height: calc(100vh - 50px) or what ever the height is, but it won't match up on all mobile browsers right?
Usually the 100vh height will account for the adjusted height, with is why you'll sometimes see mobile pages go funky when the browser's address bar slides down.
For browsers that don't account for the sliding bar within the vh unit: The height for the address bars will not be constant across the browsers, so I'd advise against appending -50px.
Try setting the height of the page (using javascript) with the window.innerheight property.
function resetHeight(){
// reset the body height to that of the inner browser
document.body.style.height = window.innerHeight + "px";
}
// reset the height whenever the window's resized
window.addEventListener("resize", resetHeight);
// called to initially set the height.
resetHeight();
The accepted answer didn't work for me. I had to make two adjustments:
use document.body.style.height instead of document.body.height
add 'px' to the end of window.innerHeight
document.body.style.height = ${window.innerHeight}px;
If the element is a direct child of body, you can achieve the desired effect with:
html, body {
height: 100%;
}
#screenheight {
height: 100%;
background-color: blue;
}
<div id="screenheight"></div>
<p>Random content after screenheight element.</p>
Use height: 100% which gives you the height after reducing the menu bar's height.
You can test the difference between 100vh and 100% by using document.getElementsByTagName('html')[0].scrollHeight on mobile browser.
For me (Chrome on Andriod), 100vh returns a higher value than 100%, which always giving me a vertical scrollbar, even if I haven't added anything in the html body.
In modern browsers, you can use the dvh unit, which refers to the dynamic viewport. For more information on these new units, see the relevant can I use and web.dev article.
A simple solution worth mentioning...
Continue to set the height of your element to 100vh, then just declare that element's max-height in js.
$('.top-hero-container').css('max-height', (window.innerHeight + "px"));
Now on page load, your element will be no larger than that declared max-height, so will display fine on mobile. It obviously doesn't account for resizing, but the load overhead is less.
What is major differences in using these css rules
div{width:100px; overflow:hidden;}
And
div{max-width:100px; overflow:hidden!important;}
Is there going to be any cross-compatibility Issues.
max-width is great for stating "don't go any bigger than this, but it's OK if it's smaller".
This might be great if you were doing say a speech bubble that could be dynamic in size (depending on content) and you wanted the div surrounding speech bubble to vary.
width on the other hand says "the must be 100px", which means even if the content within the div is smaller, the surrounding div will still be 100px.
Example:
http://cdn.gottabemobile.com/wp-content/uploads/2013/10/photo1.png
max-width: 100px is not different from width: 100px if you do not have width specified. And the !important flag only prevents from overriding the property, so it depends on the context if that makes a difference.
I am using IE browser version 10, Chrome browser version 34 and FireFox browser version 28. I have the following CSS class that works well with Chrome and FireFox browsers; the class (named ".container") makes HTML elements stretch whole window screen horizontally as expected. But with IE, the class does not work; all HTML elements shrink toward the center of the window screen horizontally. How can I update the ".container" class so it also works with IE? Thank you in advance.
.container {
max-width:initial !important;
width: initial !important;
min-width:1000px;
}
Sample using of the class:
<div class="container">
...
</div>
min-width and max-width are calculated based on provided width value. Here you state width:initial which is not a valid amount for such calculations to occur.
You need to specify a unit based number for width in order to correctly define the parameters for your expected behaviour.
min-width on MDN
The min-width CSS property is used to set the minimum width of a given
element. It prevents the used value of the width property from
becoming smaller than the value specified for min-width.
More on Width from MDN
To use min-width and max-width, these values as well as width need to be set to numeric units.
initial is not supported by IE10
https://developer.mozilla.org/en-US/docs/Web/CSS/initial?redirectlocale=en-US&redirectslug=CSS/initial
why not use auto?
I am trying to get a div to fit to only the content using intrinsic sizing, but chrome dev tools seems to be rejecting that style.
In the dev tools, that style has a strike-though through it and a yellow triangle with an exclamation mark as if it is an invalid style.'
The style gets a strike-through if I do it without vendor prefixes or with so none of the following are working:
.box{
width:-moz-fit-content;
width:-webkit-fit-content;
width:fit-content;
}
All of them have a strike-through through them.
What am I doing wrong? I have the latest versions of Firefox and Chrome and they are supposed to support this.
Update:
Here is a screenshot of what I am seeing in chrome dev tools:
http://cl.ly/image/1k0I21192Q36
The code you have written in your answer:
.box{
width:-moz-fit-content;
width:-webkit-fit-content;
width:fit-content;
}
should work totally fine. However the code in your screenshot:
div.container{
height:-webkit-fit-content;
height:fit-content;
}
won't work. This is because fit-content only applies to width and not height.
See the Mozilla Developer Network for working values for width and height - there are way more available for width:
https://developer.mozilla.org/en-US/docs/Web/CSS/height
https://developer.mozilla.org/en-US/docs/Web/CSS/width
According to MDN, the fit-content width does the following:
fit-content Experimental The larger of: the intrinsic minimum width
the smaller of the intrinsic preferred width and the available width
So for a height you can expect a div to expand it's height to fit the content within it (unless the content is positioned absolutely or floated). To get it to fulfil the last part (making sure it doesn't exceed the available space) you could add max-height:100%; depending on the structure of your html.
I have web page working properly on Ie 7 and mozilla but when opened in IE 8 height getting mizimized.Is there any additional height property i need to set up for this in css??
You may have a float issue. Are you floating elements? If so, you might want to put clear: both as a css property in your footer.
The height depends on a couple of things, such as how you have initially set it (%, px), and how it is positioned. If the height is set with pixels then you should be ok.
A fallback option is to use min-height: 800px; replacing 800 with your chosen value. That way if something happens to the content (or there is none), you will still see the element.
Also, if the element in question is not meant to have any content, then give it display: block;.