I'm trying to create a page with a long strip of images, where the height of the strip is set to a percentage of the height of the browser window, and the images are scaled to 100% of the height of the strip. I also want to be able to overlay text on top of the images. I've got as far as this:
http://jsfiddle.net/bX8Cb/
But it doesn't behave as expected. The div.news-item elements should shrink to fit the contained img elements. This happens in Chrome/Safari, but when the window is resized the .news-item elements retain their original width rather than adjusting it to fit the resized images. (But if I then inspect the element in the Chrome developer tools it redraws the divs as desired.)
In Firefox the .news-item elements are given the full width of the un-resized image, although the image itself is resized.
What's happening here? Am I doing something wrong or is it a browser bug or something? I've been looking at the CSS specification for the width property and it seems like what I've done ought to work.
Related
hyhy, I've started a website and designed it for Firefox, but did the rounds and found Safari was not treating images in the same way. I'm running into issues with Safari making every single image's height the same as the browser's viewheight/viewport height. Here is a dummy site that you can pull up a version in Firefox and Safari to compare.
I'm running a 15 column grid without an exact column width (1 fr is used) or row height (min-content is used). In Firefox, the browser finds the width of the image based on how many columns the image spans out of the 15 total columns, and then proportionately sets the image's height. In Safari, the image has the same height as the browser window itself with no regard for how much of the width of the photo is cutoff and the extra burden of scrolling caused by this behavior.
Solutions attempted so far:
Defining a max row height: This solution gives Safari a pixel dimension to scale my image to and things behave correctly on images. However, the accordion at the bottom of the page has too much content when open, and not much content when closed, which requires a dynamic min-content sizing approach. When applying a maximum row height to my grid (example: grid-auto-rows: 175px;), the accordion's content extends past the grid. The result is the content of my accordion is not respected, the grid ends too soon and my footer inserts itself while the rest of my content balloons out the bottom of the page.
Define each image's px height in css: This solution just changes how the website looks in Firefox, with images not filling up the vertical spaces they need to.
Define each image's height as less than 100% of its parent element: This does indeed make the images smaller in Safari, since the browsers reads height: 100% and defaults to the browser's viewport height. However, this clearly breaks in Firefox and images fill less than 100% of the defined Row span.
This grid system is used all over my website, which is very photograph-forward. I'd love to not define a max row height, but Safari seems to be desperate for a defined row height but not want to do it the way Firefox does.
My hope? Some sort of minmax(min-content, defined-value) replacement that let's me have rows with zero content have zero height, rows with lots of content have matching height to that content and still have a 'default'? value for images to get their sizes from? What can I do here to get the look of the Firefox version to show up on Safari?
I hope what I try is not impossible.
Let me explain first: I have a responsive design which requires a background to be fixed under some situations (media query blocks). The design in question is this one:
http://think-open.at/fileadmin/templates/responsive/content.html
Basically there are two media queries: one for the maximal height and one for the minimal width. If there is enough viewport height there is a scrollbar in the content area and the design height is fixed. But if the viewport is not large enough for showing the predefined height the height-mediaquery removes the scrollbar from the inner div so there won't be two nested scrolling containers (body + div) and sets the content area to height: auto.
There is also a responsive media query if the viewport is too narrow but this works flawless.
Now the problem: When the design switches to the mode where the whole page scrolls (below 830px height) I would like to position the image in the right container "fixed" so it does not scroll out of the viewport. But then the problem arises, that I can't really position the background in regards to the container div as "fixed" positions an background image in regard to the viewport. I have created a CSS fiddle here:
http://dabblet.com/gist/ae5c3598e1465ce0c90e
If you change the width you notice the problem. I would like to have the right border of the image aligned with the right border of the green box.
Is this somehow possible? I have no problem using calc() as there will be a condition in my CMS to use the plain old-school design if an older browser gets detected.
I solved it myself now. Sorry for posting.
The trick was: As my design is centered, I started to try using calc(50% + somepixelvalue). This did the job.
I adjusted the CSS playground:
http://dabblet.com/gist/5b63553f47a81f3bb701
Now the image is always up in line with the right border of the green area. When scaling there is sometimes a 1pixel difference but this doesn't matter as the background will get assigned to some container element which acts as mask.
I've attached a repeat-y background to my body element, and while everything else works fine, I noticed that when the window width is less than the min-width of the body, the background is in fact centered to the window instead of the body element.
I checked from the element inspector in Chrome (and it's also obvious from the horizontal scrollbar) that the min-width attribute works; the background just isn't centered accordingly.
I'm running the latest consumer Chrome. Is this a browser bug (sure smells to me like it)? How can I circumvent it?
I've made a Fiddle; http://jsfiddle.net/FXyMz/ — Make the Result window's width smaller than 250 pixels and you'll see.
The body element is a special case, and will not work the way you want it to.
"The background of the root element becomes the background of the canvas and its background painting area extends to cover the entire canvas,"
in: http://www.w3.org/TR/css3-background/#special-backgrounds
Your best bet is probably to place another layer within the body to behave the way you're expecting the body to behave.
This: http://jsfiddle.net/7mVNL/1/ is a partial solution. You'll see that the wrapper doesn't paint all the way down to the bottom of the viewport as I expect you would desire.
Please visit website: http://viewlike.us/ and change resolution to e.g. 1920x1200 - in mostly cases header (div with input form and submit button ) is not anymore 100%. How to avoid this situation? Ive tried to use width:100% !important, min/max width - but without success. I suppose there should be a small trick/fix or sth to avoid it but Im struggling with lack of ideas.. thanks~!
I think the default value for the width property is auto for most elements. And in this case, the <div> is expanding to 100 percent of its parent element, which in your case is <body>. Since the <body> tag has no width defined, it will default to 100 percent of the browser window. So even though the width of the page located below the resolution selection bar is greater than the browser window's width, the top bars (URL entry and resolution selection) still have the width of the browser window. That is why you see the edge of them when you scroll to the right.
You might want to experiment with using position: fixed in combination with the CSS properties top and left for your top bars. That way, those bars will be on-screen even when you scroll the page to the right. (I tried that breefly and it should work.)
I hope that helps you!
I've coded myself into a corner or I am overseeing something obvious here. I have a semi-fluid CSS layout that is designed like this:
header - 100% width at all times, contains a x-repeated background image
container - fluid (960px to 1200px, centered, contains two columns)
footer - 100% width at all times, contains a x-repeated background image
In almost all cases this works fine.
In summary, the design as a whole scales to any width, yet the content part only to 1200px at a maximum. However, since this concerns a photo site, sometimes images are wider than the container width of 1200px and the image breaks out of it. This is perfectly fine, I want the full image to be shown. However, I want the header and footer to scale to the widest element, in this case the image. This is not happening and is particularly troublesome when I resize the window to a width less than the image and then scroll to the right using the horizontal scrollbar: it leaves a clear gap on both the header and footer whilst I want them to stretch to at least the image/content width.
Simply setting the width to 100% is not enough as that concerns the viewport, not the content width. I can forcefully use min-width with a large value for the header and footer, but that leaves a horizontal scrollbar in normal resolutions. I could hide that scrollbar using overflow:hidden but that would chop of content and not display a scrollbar when the window is small.
To make a long story short, I guess what I want is that this layout would work as a table would work: if one column's content is wider than its size, it pushes all other rows to that same width. The largest width determines the total width. I prefer a solution without javascript, but am thinking it is either not possible or I am overseeing something very obvious?
100% width sets the element's width to 100% of the width of the element it is contained in. In your case, it seems this is the window itself (or the body element). To make the header and footer divs (I'm assuming you're using divs here) scale with the image, they will probably need to either be included in the same div that the image is in, or inside a div that the image div is also in, assuming that div is scaling to the correct width (don't assume it is scaling to fit the image).
However, in many cases using a table for your layout can be much cleaner, and will handle the type of horizontal scaling you're looking for without needing to resort to css hacks.
To make a long story short, I guess
what I want is that this layout would
work as a table would work
display: table on the common container of these elements, and display: table-row or table-cell on its children. This will not work in IE6, but clever things can be done with its CSS expression() hack to simulate this.
I would rather suggest, however, that you not set a maximum width at all, and allow the design to flow better according to the user's desired window size.