Here is the code snippet : https://codesandbox.io/s/zen-stallman-p71018
My css grid does not render in the same way on firefox and chrome, despite the fact that the computed rules are the same on both browsers.
The computed height of the grid is the same value on both browsers, and the code for the grid template is the same as well :
display: grid;
grid-template-columns: [col0] 33% [col1] 17% [col2] 25% [col3] 12.5% [col4] 12.5% [col5];
grid-template-rows: [row0] 50% [row1] 33% [row2] 17% [row3];
There is no problem on firefox :
But on chrome, the rows take a different height:
I tried to change the parent's height of the grid, and obtained an unpleasant result (the row still took too much height making white space, even when the height stop the right place).
I tried to check if the computed rules were the same on both browsers, and they are.
Related
I am trying to create a game level select map where I need different sprites from a spritesheet placed on a very specific tile in a grid. I use CSS grid for this and place the tiles on the grid inline with grid-row-start and grid-column-start. Everything works as it should, except for one thing: the tiles have a small gap between them, but gapis set to 0 in the CSS. That small gap is enough to look really jarring (screenshot of map with the gap).
Because this is a mobile game, it is important that the grid is responsive and works on all device sizes. I am therefore working in percentages, and vw in the CSS. I am thinking that the gaps might be caused by decimal rounding errors?
The parent div:
.tilemap {
display: grid;
height: 150vw; /* 15 rows, 10 columns */
grid-template-rows: repeat(15, 1fr); /* 15 rows */
grid-template-columns: repeat(10, 1fr); /* 10 columns */
gap: 0;
place-content: stretch end;
}
The grid is full width (100vw) and each tile is 10vw = 10 columns. The height of the tilemap is 150vw = 15 rows. Each tile is squared (screnshot of CSS grid in devtools).
Common class for all tiles:
.tilemap div {
max-width: 100%;
background-size: 100%;
background-image: url("../images/responsive-spritesheet.png");
}
And each tile has a different background position. Included for completeness:
.tilemap div.road.vertical {
background-position: 0 100%;
}
The problem is not the spritesheet image, because the gaps still appear when I comment this out and replace it with background-color instead (screenshot).
Any help is greatly appreciated.
I know this question was asked forever ago, but I solved a similar issue of my own by dropping fr units, and using exact lengths for my grid cells.
This might help you, because I see you're using repeat() and thus have equal spacing in your grid, like I do.
I have an image which I'd like to scale according to the following rules with increasing importance:
normally has a width of 38% (of the parent/screen);
not become smaller than 300px;
never become larger than 100% (of the parent/screen) (only an issue if the parent/screen is smaller than 300px;
That is to say: the image takes only a percentage of the available space but should not become too small on smaller screens. However, for very small screens (mobile devices), the image may never exceed the full width of the available space, even if this would mean it shrinks below the minimum width.
I thought I could do this with the following css:
img {
width: 38%;
min-width: 300px;
max-width: 100%;
}
thinking that the max-width would take preceedence over the min-width because it appears later. But it is not working... The image appears as the required percentage and is not shrinking below 300px. However, on a small screen (<300px), the image extends out of the screen (scrollbars appear).
Reading the docs, min-width overrides max-width, so I should have seen this coming...
One obvious solution would be to add a media query:
#media screen and (max-width: 300px) {
img {
min-width: 0;
width: 100%;
}
}
However, I would like to be able to override the width specifics (i.e. the 38% or the 300px values) from within the html (tag style).
Several questions on SO touch on the topic of sizing, but I could not find one about my exact case. Anyone here with a solution/suggestion?
Some side requirements:
should work in major browsers, html5/css3
no javascript (if it turns out that it's not possible with css only, I will create a js solution, but I prefer no js for this)
no media queries (see above)
I am in control of the html, so nesting inside additional elements is fine if needed
If min-width overrides max-width, then the solution is to not set min-width to a value that can become greater than the window width.
In other words, swap around the values for width and min-width. Then you won't need media queries or JavaScript.
img {
width:300px;
min-width:38%;
max-width:100%;
}
<p><img src="https://via.placeholder.com/999x333"/></p>
<p><img src="https://via.placeholder.com/999x333" style="width:400px"/></p>
In this example, both images are never smaller than 38% and never larger than 100% of the window, and the first image prefers 300px while the second one prefers 400px.
(Note that the images themselves say they are "999×333"; you should ignore that.)
Hello StackOverflowers,
Set Up:
This problem is the same one that is addressed here. Specifically, we have:
HTML:
<div class="outer">
<div class="inner">left</div>
<div class="inner">right</div>
</div>
CSS:
.outer{
width: 100%;
}
.inner{
float: left;
width: 50%;
}
viewed in Internet Explorer 8. You can see a JSBin example here.
Problem:
As stated in the problem referenced above, the subpixel rounding that IE implements forces the right div to drop onto a new line when you resize the window and have the zoom level on IE set to 100%. Or 150%. Or 50%. But not 75%, 125%, 95%, etc.
Question:
Why? How does the zoom level factor in to the subpixel rounding problem. Why does setting the IE zoom level to 95% prevent the second div from getting kicked down onto a new line, regardless of how much resizing of the window is performed?
Thanks everybody!
Think about what it means that IE always rounds up.
What if you have a zoom of 100% and the width is 701px?
50% is 350.5px, which means both 50% in IE will round up to 351px, resulting in a total width of 702px and overflowing.
Now, at 95%, what is 95% of 701px? 665.95px, which rounds up to 666px.
50% of that is 333px, which added up to account for both is 666px, oh boy! Now it works!
Of course, this all depends on the width of the window so sometimes 95% will help, other times it will actually hurt.
How to CSS style a table such that
a cell is at most 30% of screen height
use a vertical scroll bar when it's taller than 30% of screen height
don't use a scroll bar if it's shorter than 30% of screen height
works in Firefox and Chrome
EDIT
I tried
tr td {
max-height:30%;
height:auto !important;
overflow:scroll;
}
and several variants with no luck. The tall cells came out taller than 30% of screen height.
An alternative question if the original is too hard:
I can accept any way to present the content of a large cell, for example, if the big cell can be clapsed and reopen by a button or something, and the scrollbar isn't absolutely required, as long as the cell height is at most 30% of the screen; I.e. the main goal is to avoid having a cell so tall that the whole screen is showing a part of one cell.
Is there any reason it has to be 30% as opposed to a set height? I was able to achieve the effect I think you're going for by throwing the content in a div
tr td div.box {
max-height:200px;
overflow-y:scroll;
}
I'm having an issue applying a CSS Width with a percentage and a decimal (e.g 33.33) to a div.
It seems to work fine in Chrome but plays up in Opera and Firefox.
http://jsfiddle.net/nhkz9/1/
Opera and Firefox both just round the percentage up, and because of insufficient width in the container, the third div moves to a new line. But when the percentages are not rounded up, there is enough space for all three to fit in one line.
any ideas on how i could fix this issue?
thanks
The demo you posted adds 1px border to two of the <div>s. By default this is not included in the 33.33% calculation, so your <div>s will never fit. To change this, use box-sizing: border-box;.
Try to use
{max-width: 33.334%; min-width: 33.333%;} instead of {width: 33.333%}
For all browsers it will be:
.class {max-width: 33.334%; min-width: 33.333%; *width: 33.333%;}
It's not ideal. +-1px still left in some browsers, but... that is better than 1%