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?
Related
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.
I have a plunker to show: http://plnkr.co/edit/nGjdvrG27jNpQ3QTulMr?p=preview
I want the green area to fill the remaining available height. I can set div height:100% and get almost I want, but that is less than desirable.
Is there a way to do this with css? Do I need to do some sort of resizing via js?
I've set the following classes to height: 100% and it seems to work now:
.tabset, .tab-content, .tab-pane, .tabbable {
height:100%;
}
Updated Plunker
if you use flexbox layout you can do it this way:
override the display property of the '.tab-content>.active' class. By default it is set to 'display: block'. It has to be set to 'display: flex'. Also modify the tab template.
See my solution:
Using flexbox layout with angular-ui tabs
The easiest way that I know is to set the height with vh units. They were introduced in CSS3
height: 100vh;
Updated plunker.
vh unit is setting the viewport height. I believe it's viewed as setting it to a % of the viewport, or visible screen. So simply changing 100% to 100vh gives you the desired outcome.
It seems like it's pretty widely used: http://caniuse.com/#search=vh. Just depends on who your audience base is I suppose.
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'm trying to create a fluid-layout in html, containing images.
For now, I support 2 sizes for the layout. The default layout is used to display a 1000px wide site. If the screen is wide enough (wider than 1200px), I enhance many aspects with css media queries.
I have a DIV container that is 600px wide for the default layout, and 700px for the enhanced layout.
There is a random image inside, for which I know some metadata (width and height). I may need to downsize the image if it is too large for the container.
So I use this code to have a fluid-layout
<div class="container">
<!-- for a 650px/400px image, the downsized version is 600px/369px -->
<img src="/image?id=1234" width="650" height="400" style="width:600px;height:369px" />
</div>
and the style
#media screen and (min-width:1200px){
.container IMG {
width:auto !important;
height:auto !important;
}
}
Here is how it works:
In case of the default layout, the inline style applies. So the image is down-sized to 600px/369px to fit the container.
Otherwise, the media query style applies, and the image is at its default width/height (I know the image is never wider than 700px so all is fine).
My problem comes from the loading state of the image and the space reserved by the browser. The behaviour of chrome/firefox is the same but is quite strange for me. Not tested with IE (not my priority actually)
For the default layout, no problem, the inline-style still applies. The browser displays a white space corresponding to the image.
For the enhanced layout, the "auto" sizes applies. But the browser does not know the natural size of the image while it is not fully loaded, and it appears that "auto" is equivalent to 0px. It would be perfect if the width and height attributes set for the image applied. But it is not the case. The result is that no space is reserved for the image, which is not the behaviour I want.
A first solution I found is to add another inline css rule for the image. If I add "min-width:600px; min-height:369px" the reserved space for the image is always 600x369 pixels, instead of 0 pixels for the enhanced layout. That's better, but not perfect yet.
-- What do you think ?
Is it possible to "reset" the css instead of overriding it with the "auto !important" rule ?
Should I use an other approach ?
I may use some javascript, but I think it is a bad idea to rely on it. Actually, I may have a lot of containers similar to the one described above. I prefer an automatic solution (css is great for that).
you can just set the width or height to initial.. that resets the Value on override..
The general approach that I've seen thrown around for responsive images is to have a parent element (like .container) change sizes with media queries. In your markup remove the width and height attributes, and then in your CSS add:
img {
width: 100%;
}
As your parent element's size is dictated by media query rules, your image will grow accordingly.
I'm bringing this up because it looks like you want to use the same image file, but just have it grow/shrink. The major drawback is that a larger image could load on a mobile device screen, and add to page load. This is the major technical hurdle facing Responsive design currently, and there is great debate about the best way to address it.
Use .container IMG.someClass { ... } then you can remove the class name from the image to remove the CSS styling.
After experimenting with the css3 flex-box proporty, I quickly noticed some differences in Chrome and Firefox.
In particular: if you set a width on an element that should be flex,
firefox will flex the element according to what it needs, it takes the width style into account but its only a variable.
Chrome will respect the with style fully,
An example:
<div id="box">
<div class="flex-box">Test</div>
<div class="flex-box">Test Text</div>
</div>
If the 2 divs inside the box have the same width assigned, chrome will make them the same size. Firefox will reconize that the second div needs more space, and thus it gets more allocated.
who is right?
Remember the flex doesn't apply to the width, it applies to the free space after the minimum intrinsic width has been determined. This produces counter-intuitive results in several common cases, as has been pointed out on the www-style mailing list. I've found that, unless you want the CSS re-ordering or the multi-line (which isn't yet implemented in Firefox and Chrome), what you think you want to use display: box and box-flex for you really want to use display: table and display: table-cell.
But back to your actual question: I found Firefox and Chrome display identically if you set a width in pixels, but not if you set a width as a percentage. As far as which browser is doing it correctly at the moment, it's a fair bet Firefox is implementing what the spec originally intended as the original spec is describing what the XUL property does, and the XUL property is what this is all based on. As others have mentioned, whether or not the final spec ends up matching this original intention is unknown.
I don't think any browser is right or wrong as flexbox is still a working draft. At any time the spec could change and render another browser right or wrong.
http://www.w3.org/TR/css3-flexbox/
I disagree with robertc's statement "But back to your actual question: I found Firefox and Chrome display identically if you set a width in pixels, but not if you set a width as a percentage."
I am currently using the flexbox in an attempt to show how simple it is to convert a rather heavy in JS and CSS site to a very simple HTML/CSS3 site. Once conclusion I have come to with regards to setting width in pixels:
#main {
display: box;
}
#main > section {
width: 120px;
padding: 10px;
border: 5px solid #000;
}
In chrome, the total width = 120 + 20 + 10 = 150px
In ff, total width = 120px (the 20px padding are inside the 120 and the 10px border is as well)
Another inconsistency I found, in chrome, #main IS greedy and takes up 100%, as you would likely expect. In Firefox, you need to set with to 100% on #main in order for it to act as you would expect.
I'm still working on ironing out all differences in all supported browsers, I will try to post when I have more to add to this. Sadly, as cool as he flexbox model is, and as easy as it makes a lot of shit, its far from consistent.
One more thing, using CSS transitions to change dimensions works well with explicitely defined dimensions (ie. pixels)... but if the dimension is defined by the box's flex, the animation simply jumps between the flex values... no where near as smooth (though, instead of heaving flex of 5 and 1, you could have flex of 500 and 100). In fact, chrome will not animate between flex values, just jumps. FF on the other hand does this nicely.
I'm just really hoping things progress to the way FF handles flexbox, while chrome is close, I just don't agree with how some things are handled, and the lack of animation between flex values just plain sucks.