This question already has answers here:
Browser support for CSS Grid
(2 answers)
Closed 5 years ago.
I'm using CSS grid for my layout, and testing it in Chrome and Firefox everything works great. I have a 4 column layout with both row- and column-gaps, which at certain media query breakpoints turns into 2 columns, and later 1 column. This works like a charm. I tried testing my page on my phone, and everything seems to work, except for my grid-gaps, which is just ignored completely, and there is no gap. Then i tried testing my page in Edge, and here it seems that not a single grid property is working. Not even the basic layout of it. Any ideas why this is? I thought grid was fully supported at this point?
Edge has issues itself, not all devices universally support. Edge probably still working around. Honestly making 100% fool proof with CSS very difficult for complicated layouts in real life.
You can look at this jQuery for flawless grid on almost all devices in case your need is immediate for production purpose. jQuery projects has a basic advantage that users can report bug, test develop.
Related
So I learned about CSS grids today, and I had a question that I could not find an answer for. In my site I am creating, I used HTML tables as I did not yet know about css grids. Now that I have learned about them, I can see that grids are more useful and flexible in layout and style.
With the HTML tables, I can make it look perfect in a browser such as Google Chrome, but then I test it in FireFox and it slightly moves the divs around that I made.
If I used a grid system for a layout, and put all the content into that instead of using HTML tables, and then use the fr in css, would it keep the layout the same across web browsers? It would seem that way to me, since no matter what size of browser window or type of browser you are using, the fr keeps the grid to using 100% of the page size.
I apologize if what I am asking doesn't make too much sense. I tried to word it as best I could.
Yes. It will look the same if the browser supports grid layout.
https://caniuse.com/#search=css%20grid
This question already has answers here:
How to align checkboxes and their labels consistently cross-browsers
(40 answers)
Closed 9 years ago.
Is there a CSS (non-javascript) way to make input fields (text/textarea/password) shown the same way cross-browsers (from IE7+ and all other common browsers (safari, chrome, firefox)) ?
There is some great code you should check out. It has a polyfill for older browsers, but it will make all of your form fields look pretty close. You can use just the CSS portion and it is still pretty awesome. It's called Formalize. It is not identical in every browser but it's pretty close.
If you are worried about pixel perfect similarity you will have to use a javascript like Select2 or Chosen since select fields are usually the elements that vary the most between browsers. You could also take a look at Twitter Bootstrap. They already have a lot of work done for you. Good luck!
I'm working on adding basic print functionality to a web map application I recently built, and I can't seem to make the printing work properly when using Internet Explorer 8 in standards mode. I was hoping that someone with more CSS experience might be able to help.
I've created a basic example on jsbin that demonstrates what I'm seeing: http://jsbin.com/osepov/16. This example prints properly in most browsers. In Internet Explorer 8 in standards mode, however, the map's tile images run off of the first page and onto a second page when printing. I've tried a bunch of different CSS combinations, and have browsed the web for hours looking for hacks that might solve the problem. I've obviously had no luck thus far.
Being that the print functionality works well in most browsers, I am willing to compromise on a few things, if needed, to get this working in Internet Explorer 8 standards mode:
The map doesn't have to fill the entire page, minus the header. It can have a fixed height.
The header is nice to have, but I'm willing to do without it.
I know it is possible to build a PDF on the server, but I really want to do this with a simple print stylesheet.
Note: Yes, I do have to support IE 8 standards mode. I had a solution that kicked IE8 users to IE7 mode, but this was not acceptable to my client.
UPDATE 2: I was able to resolve the issue by bumping IE8 down to IE7 standards mode. The map is printing correctly now.
UPDATE: Nope, this didn't solve the problem. I'm still seeing the same issue. This seemed to work, but I'm still seeing the problem.
ORIGINAL POST: I think I figured this out. Basically, it seems like the "top" div was causing the entire page to get bumped down and run over to a second page when printing in Internet Explorer 8 standards mode. I'm not sure why this was just happening in IE8 and not in other browsers, but there are all sorts of strange IE-only bugs that I don't understand.
The final fix:
#wrapper {height:100%;left:0px;position:absolute;top:0px;width:100%;}
#top {height:70px;position:relative;width:100%;}
#main {height:785px;overflow:hidden;position:absolute;top:70px;width:100%;}
So positioning the "top" div relatively and assigning a pixel height and "overflow:hidden" to the "main" div seemed to solve the problem.
This isn't a perfect solution, but it meets my current requirements.
Here's the updated solution: http://jsbin.com/osepov/19.
I'm building a pretty heavy J.Query website and, as always, it looks great in the modern browsers - but I am coming across all types of alignment issues in IE 6 & 7. More severely in IE 6. I'm working on building a conditional IE Style sheet for those browsers and am wondering - is there a way to align all divs with CSS? Can I permanently position everything to be, and stay center throughout all browsers and window sizes?
Ultimately; any suggestions on fixing margin issues that occur in older IE's? Stuff that looks great in modern browsers and pushed off to the right and top in IE 6 & 7. ..If the conditional is the inevitable route, what's a good way to start defining the parameters within?
are we talking horizontally or vertically?
Horizontally, the "margin:0px auto" should always center the div horizontally along the screen, so long as the width is set. This works for all browsers IE6+ i believe.
There's a pretty good forum here : http://www.webmasterworld.com/forum83/8003.htm
It sounds to me like your problem is that you have poorly written CSS. Certainly, IE6 has plenty of issues, but if you're seeing problems in other modern browsers, then your problems are with your CSS, not standards conformance.
If I were you, i'd just ignore IE6. It's down to less than 5% of the market (some surveys say as little as 2%). Just let it die.
As RCNeil says, using margin centering works with everything. If it's not working, then you have something else causing your problem and we can't possibly guess without seeing your page.
NOTE: in older versions of IE, if your document is being rendered in quirks mode, then you will have problems with auto margin. Make sure your document renders in standards mode.
I'm doing the first bit of web-page development I've done in years, in VS2008, using VB.net. I have a fairly simple layout, which is using several nested tables. IE6 displays the layout just fine, but Firefox for some reason shows the whole thing in a small panel at the top of the page, with a scrollbar. Can anyone suggest something basic I am likely missing?
There is a big difference in a way that IE6 renders HTML and especially tables. If you want to support it you should write explicitly all the position related styles like width, padding etc, just create a css file for table style.
The good news are that IE7 and 8 are mush closer to the standard.