Here's a default input[type=date] example in a few browsers:
Both Edge Chromium and Chrome add a lot of unnecessary whitespace to the default width of an input[type=date], about 50px to each. In my particular case, I have a few of them in a very wide grid/table and the horizontal space is at a premium in order to fit all the complex form fields on the screen.
Ideally I would be able to use width: max-content to get those widths to tighten up, but that has no effect. (Or even better yet, that additional whitespace wouldn't exist at all by default.) If I set a specific width in CSS, all browsers start to overlap my date text around different values.
The only two options I can think of to fix my width problems are:
Browser-sniff and use different CSS selectors for different browsers. (I'm aware why this is bad practice and a terrible idea.)
Don't use input[type=date] and instead use a JavaScript datepicker or web component. (I don't love this because I think mobile browsers implement a much better datepicker than desktop browsers and I don't want to force one or the other on users.)
Anyone have any other suggestions? Here's a CodePen in case anyone wants to fork.
I am trying to make a good website and I have a big problem: overlapping.
When I make the window smaller, all of my elements are spread.
On mobile is worse. What can I do?
https://bucovina-tour.000webhostapp.com
I took a look at your .css definitions, and it looks like the way you're positioning your html elements isn't ideal when trying to build a responsive/adaptative website.
When you define margin-top: 500px for your .button_center class, for example, please note that those margins will start stacking on top of each other at some point.
With standard resolution (1366x768, for example) there's enough space for all of your buttons to be inline with each other, so their margins will overlap and work as if they were one. When shrinking screen resolution, though, there won't be space for all of your buttons to stay in the same line, so they will start stacking on top of each other. But since, by css definition, there should be a margin of 500px on top of each button, they'll begin to spread vertically on the screen.
That's one of the reasons your website is overlapping, but there are a lot more. I highly recommend taking a look at Responsive Webdesign Principles and playing with responsivity on smaller scale before editing a template. When you stack multiple inexpected behaviors on CSS, it becomes exponentially difficult to understand why each element broke.
Also, explore the inspect tool that most browsers have. With this tool you might be able to visualize margins, borders, widths and various other characteristics of your html components simply by hovering over them! It's really useful for web debugging.
some of your code is very hard-coded. try to think about mobile sizes (and check it by console) before you give size to elements
Like said above, for every step, use a #media query
I strongly recommend learning how to work with flex in your CSS. It might seem a bit complicated at first, but it's really not. It does most of the responsive work for you. This is the real beauty of it!
Good luck :)
I am new to CSS Grid Layout.
Problems I am facing while trying to achieve following using css grids
Unable to achieve responsive design. (Responsiveness doesn't go well with different screen size ratios. Example 4:3 or 16:9)
It is well known most of things doesn't go well when testing the application in Internet Explorer (Here I am talking about IE11)
(Edit: Excluded, until IE supports CSS grid layout)
It is a web tool dashboard, scroll bar should not appear in any condition while using in a full screen view.
Restricted to use third party plug-in or poly-fills. (Because of commercial use)
Restricted to use negative values in css properties.
(Edit: I know it can be achieved using media queries plus other CSS layout properties. Here I am trying to achieve this with minimal and cleaner code). Thanks
When you use relative units it will resize according to your screen size. For different layouts you still need media queries
CSS-grid is not fully supported by IE11. That usually isn't a problem as you should use a mobile-first approach anyways and mobile websites usually don't look bad on desktop anyways
There is nothing special about the grid layout here. (If anything, it makes it easier: media queries + absolute units = magic) Either use media queries or overflow: hidden;
Restricted to use third party plug-in or poly-fills. Ähm no? I don't understand what you mean
Restricted to use negative values in css properties. Again, no, you're generally not? What's the problem here?
I found a solution to scaling my web page down here. However, I noticed that this solution messes with jqplot's highlighter and zoom functions. Is there a solution that doesn't interfere with these functions?
The only way I can think of with out seeing your code, and without using the solutions provided by the other question, is to add separate size percentages to each element on the page. For example, adding font-size: 30%; will decrease the font size of all text in the element, so you could put this into the body styling’s. I don’t think there is a way to change all div's by a persent of their current size, without using zoom functions in css (I presume you have considered these as they are in the answer for the question you linked) but there is probably a way to do this in JS, by collecting the dimensions and timesing by an amount. You can just change individual sizes for each div though.
Hope this helps :)
Unfortunately, scaling and zooming is part of the function of the browser. This is necessary for screen readers and people with eyesight issues to zoom in.
When you try to take control with zoom, you will always be playing with compatibility and browser issues.
A suggestion? It sounds like your requirements are bogus in light of current internet-enabled mobile devices. A liquid layout is the current best practices for a reason.
EDIT: Have a look at http://alistapart.com/article/responsive-web-design
When I was first learning HTML a very long time ago, I was told that it was important to always set the dimensions of your images in your HTML, so that browsers could draw an empty box where the image should go, render your page, and then download and render the images where they belong. If you didn't set width and height values for your images, the browser would have to download the images first to discover their dimensions, and it would slow page loading for people with crappy connections.
For the past few years I've been using CSS, I always put a width and height declaration in my img tags in my HTML. My question is, is setting width and height in the style sheet, and no longer adding these HTML attributes, just as good? It certainly makes my spartan HTML look even cleaner without them.
The problem you mention with the image not being downloaded immediately also applies to your CSS.
The difference is that without the rest of the CSS the whole layout may not make sense. In other words, if the rest of the CSS hasn't loaded then the fact that the image dimensions are also missing won't really be that noticeable.
So personally I think it's fine to put the dimensions in the CSS.
This is a good question, but it's a bit subjective and may lead to more discussion than is generally advised on SO.
Back in the 90's, browsers were slow, and so was the internet. 56k took a while to transfer medium sized images. During that time, the layout would resize to fit the image.
Fast-forward a decade, and internet speeds are much faster, rendering times are much faster. People are used to layouts that change a bit in the first half-second of page load. It's not bad to not specify an image size, as long as you understand the layout of the page may shift during loading.
CSS is parsed before the page is loaded, so specifying the height & width in CSS will work just as well as specifying it inline.
One thing to keep in mind is that inline styles (and that includes height and width declarations) always trump CSS in specificity. If you specify heights and widths of images inline, you may have to go back through every page where an image is present if you want to adjust the size of the images.
Personally I'd suggest using CSS, as it keeps all your styles in the same place.
Yes, setting these properties in CSS will work just as well.
I don't know that it affects page rendering speed in any manner, however. The little effect it does have, is that layout that depends on the image will appear to jump around on the page until the image is loaded and allocates all the space it eventually will.
This is not a practice I follow myself.
A similar question has already been discussed and answered here:
Image width/height as an attribute or in CSS?
It should be defined inline. If you
are using the img tag, that image
should have semantic value to the
content, which is why the alt
attribute is required for validation.
If the image is to be part of the
layout or template, you should use a
tag other than the img tag and assign
the image as a CSS background to the
element. In this case, the image has
no semantic meaning and therefore
doesn't require the alt attribute. I'm
fairly certain that most screen
readers would not even know that a CSS
image exists.
This is also helpful:
If it's part of your site template,
I'd place it in the CSS file.
If it's just on one page, it should be
inline (or defined in a block of
page-specific CSS at the top).
I think the only difference is that css can (yeah it's possible!) not to be read, so <img> attributes are used.
But I'm not sure, I'm going to check that.
EDIT: http://www.mezzoblue.com/archives/2005/05/10/image_attrib/
While you can use CSS to clean up the layout, if your layout messes up by inability to load a single image you should fix that first.
Modern layouts should be controlled by divs and CSS, images in the layout should be supplied only in the form of a background-image:
The reason for always putting the dimensions into HTML code back in the day was due to loading times -- on a 14.4K modem, even relatively small image files would load noticably after the main HTML document had loaded.
These days this is much less of an issue. If it is an issue, it's worth noting that a CSS file will load after the main HTML document, so if you only specify your dimensions there you could potentially suffer the same problem, but CSS files are typically fairly small, so the effect should be minimised.
The other point is that old-school HTML design was very focused on layout, and image sizes were often a critical part of that - if the images were the wrong size, the layout of the whole page would often be completely wrong.
Modern page design approaches things very differently, putting minimal of any layout information into the HTML, and abstracting it all to the stylesheet. Therefore on a typical modern site, until the stylesheets have loaded, the site will just be a series of blocks, and be completely lacking in design. In fact, often the graphics themselves - not just their dimensions - are defined in the stylesheet.
So the answer is that to follow modern page design methods, you should put it in the stylesheet.
Obviously it's critical for most sites these days that the stylesheets load quickly, but it isn't just the size of the graphics that it'll affect.