Browser Compatiablity
Is there a offline programs for Linux to check and show browser compatible with html&css code? I write in vs code and I check chrome browser and everything looks great. I go into Mozzila Fire Fox and everything is blow up. Fonts are larger, sections,div's nav's all get completey messed up. Any ideas what I can do or use for testing. I seen 10 products online, but they only address the devices and OS that they are running on. Is there a way to see a side by side comparison of both browsers open on the screen at same time and the little tricks to keeping everything formatted closely the same to look pretty close as one another? Thanks all.
46 Replies
Is there a way to see a side by side comparison of both browsers open on the screen at same timeOpen it in multiple browsers on your device at the same time 🙂 You can look into Playwrite, which is a testing tool that I think is what you're after. It'll run webkit on Linux as well, so you are more or less testing Safari (though I've found there can be small differences when you actually test Safari on Mac)
not all problems are browser compatibility issues
"fonts get larger" sounds like you either have a different font size set on the browsers and/or you used em and due to differences in rendering the size compounds and gets massive
div and nav being messed up may be related to the above or something entirely different
it might be worth for you to share the code
Here is a great example of what I was talking about with the browsers being incompatible: Used challenge project seeing how it's a simple web page with no crazy fonts installed. Chrome browser looks great and Firefox looks weird. https://www.nicksbargainnews.net/kevins_classes/index.html
That seems like zoom level or base font size is different between the two
Agreed, it looks like something like that is at play here. I don't see any zoom indication on either one, so it could be a browser setting?
you're using linux mint
if im not mistaken, firefox uses the system font rendering
windows and linux render fonts differently
yup, at least it does on windows, according to google
yeah, browsers and OS both impact how fonts render, but the differences tend to be quite small.
I'd open the dev tools of both and look at the computed tab to try and figure out what's going on, looking for the font-family and font-size, and other things that look different
i mean, if things are done with em, i can see it all compounding to ridiculously huge differences
if the text is 0.5 pixels larger, and everything uses em all the way down, the 0.5 pixels can grow or shrink a lot
Is there a way to for the ALL browsers to use the font or fonts you setup up in your CSS code. One that are default fonts that all browser should be able to use? I can't see how if I am building a website for a company and they ask me to fix this, I would have no idea how other than write two types for different browser, but even then what is my reassurance they will look closely the same?
Are you talking about a custom font brought in by “@import” or in the <head>? Or a default os font that every os has to use as a fallback?
Because some browsers may come with default fonts, but normally I use (take it with a large grain of salt) os fonts, not browser fonts
Chrome shows me the font of Times New Roman, FireFox shows nothing in the computed tab, I scrolled over every line of text and no value shows up? Strange. Also on each OS what font am I looking for. Will t say browser font or will it be a default desktop font that the browser font? That is the one I should look for. But still won't correct the problem. How do professionals fix this problem. Or do I have to use programs like WP, Square Space ect... to fix issue of the browsers? I'm so confused and a little
that there is no easy way to keep all the same. 🙁
Arial is a font used by every os I think. I’d start there
NO importing or exporting, just wrote simple code and views in both browsers and I can not for the life of me figure out how to make the code compata
ble with all browser, which leads me to how do coders get around this or is there a simple fix?
Ya but you see websites using different fonts, how do they pull that off. Generic fonts you think would be the safe bet, but like in many videos using same fonts you should not do. Now this opens up another can or worms. Ugh
When you import the font from Google Fonts (not GDPR compliant, but makes this analogy a little bit easier) every browser uses that font (if it was downloaded correctly). Every font has its own line height, kerning spacing, etc. and so it will change the way things look between fonts. The same font rendering different on different browser/os ‘s is a different story. Can I see your “font-family:” line?
it won't even be .5px different, it's more about sub pixel rendering and stuff like that.
Here is my original example, with not fonts https://www.nicksbargainnews.net/kevins_classes/index.html When I do put a font in my css at the top in the * section or body section, the broswer still ignore what I code and use what ever they want. This is the problem.
I will say, neither of those is Times New Roman 😄
Kevin, I’ll let you take it from here. You’re more experienced than me 😂
I’ve been doing websites for just over a couple of years so you can share your more accurate wisdom
In this case, without seeing the code and playing around in the devtools, it's pretty hard to say what the problem is.
Kevin the code is your from your second challenge. I figured us something simple.
The differences you're seeing now are not normal. When we talk about the differences between browsers, they tend to be very small when they are present, to the point where many people won't even see the differences.
The only exception is if you use a feature that is supported in one browser, but not another, but in what we are looking at now, that's not the problem.
In the case of what you're showing us, the difference seems to be the
font-size. you set your images to have a width and height of 800, but the original images aren't square, so it's stretching the image and distorting it, which doesn't help. I removed the height attribute, and I think the only difference is the font size.
My first guess is one of the two browsers has a browser setting that is changing the default font sizethats a different issue and, therefore, moderators usually ask to make a different post
a simple ctrl+0 on firefox should do the trick, if it is zoom
and yeah, i know it will be tiny differences, but if something goes super wrong (bad fonts or something), i can see all sorts of wacko things going on
I guess I have to user google fonts or something they show loading dynamic fonts for those issues to be handle. I can not just code it using native CSS. I really wanted to use what was free and locally installed by default on everyone OS's. Guess I can't.
dont use google fonts
https://discord.com/channels/436251713830125568/1411377608251146312
use a gdpr-compliant option instead, or self-host
You definitely can do this. I regularly use
system-ui, but if you do that, you have to be okay with a different font being used depending on the persons OS.I think we are all getting off topic. Feel like I went down a rabbit whole. Back in the 90's you used to be able to use Front Page 98/2000 or Dream Weaver or Web Expressions all offline products. I used to be able to code and then have four different browser windows open at the same time. This allowed me to see real time changes. Is there no longer any tools that do this anymore? Seems like we only care about devices and resolution, instead of browser support these days.
Seems like we only care about devices and resolution, instead of browser support these days.YES! YES! EXACTLY!!!! there's a gazillion apis, properties, methods, behaviours ... i don't want to have to remember that for EACH BROWSER so, NOT having to care about compatibility is a very very good thing it means that browsers have a decent standard-following footing not 100%, but more than in the 2000's
There's nothing stopping you from having 4 browser windows open, and making sure things look correct in all of them as you code offline.
But as @ἔρως said, back then each browser behaved very differently. These days, they are more or less all the same. There are some edge case bugs (mostly in Safari) that you might run into, but it's quite uncommon.
Generally when I develop something for production now, I just make sure what I'm using is supported by all the browsers, write my code with one window open making sure everything is looking good, then do cross-browser testing later to make sure they are all behaving.
same, just open firefox if im doing something sketchy and hope it works
I found the problem. Because I set a width && max-width which I am learning in your classes here online in Challenge_2, this made the Firefox Desktop view look like what we saw in my web link I provided. This makes me very confused. So I learn what these elements can do for me, but if I use them they will throw your web pages off in other browsers? So how the heck am I to design web pages? There has to be something that I can code to fix all browsers. And 2nd if not then it feels like we just code for Chrome, which in turn makes this a monopoly. Where fored to use only this browser. So now lets just worry about different screens desktop/tablet/mobile. NO ONE is showing how to code the fix for browser compatibility. Does anyone code from just HTML & CSS anymore? I also believe there is built in cross platform compatibility in these GUI WYSWYG to fix the browsers issues. But again NO ONE wants to tell us this. How am I to start taking on web designing signs if I can't even fix this?
Force customers to us Chrome and be done. Just move on? I don't get it. I was having fun learning and was excited, but now the BREAKS have been applied fully and not sure what to do. I miss the old days when creating web pages was straight forward and Webdesign tools from Microsoft handle the broswer compatablity issue. Here are some of them I used Microsoft Web Expressions I,II, Microsoft Front Page98/2000 and Dream Weaver. "1994- HÃ¥kon Wium Lie" Why couldn't he just use x,y coordinates like gaming on screen resolutions and kept aligning things simple. He created a nightmare to learn CSS. So many things effect so many things in different seniors. If this is the case why not just give us pre-defined templates and just stick to that. Not sure how I am to move forward with this problem. Very upset. Trying to stay positive.
"I just make sure what I'm using is supported by all the browsers" What does this mean in detail?
I even tryied AutoPreFixer this is outdated and doesn't work!
Why don't you post the code here so others can confirm what's going on
It might not be what you think it is
better yet: where can we see where you're having these issues?
You mean the site they're having issue with or code popped up in a codepen/jsfiddle?
something where we can replicate the issue
Gotcha
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Day 01</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<div class="container">
<div class="intro-content">
<h1>Lorem ipsum dolor sit.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem aspernatur distinctio laudantium dolores. Nulla quibusdam reprehenderit eum sit minus aliquid!</p>
</div>
</div>
</main>
<div class="writeup">
<h2>more content D:</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, mollitia adipisci magnam voluptatibus repellendus fuga ut repellat exercitationem eaque amet, omnis aliquam fugiat laudantium id dicta at? Consectetur iure porro illum laudantium excepturi a laborum!</p>
<p>Sit magni soluta porro fugit placeat eius itaque, accusamus quisquam voluptates reiciendis pariatur, vitae molestiae. Minima, quos reprehenderit autem animi, nisi necessitatibus eligendi quis modi, facilis ipsam nihil odit quaerat! Nisi doloribus harum culpa ipsam!</p>
<p>Sint corporis animi repudiandae. Aliquid illum, tenetur magnam provident molestiae rem doloremque aspernatur quia reiciendis est facilis enim praesentium officia sequi qui debitis exercitationem quaerat hic quos recusandae. Architecto repudiandae aperiam tempora iste saepe error.</p>
<p>Provident aut suscipit aspernatur doloribus illum assumenda cupiditate perferendis dolores! Obcaecati omnis magnam ipsam voluptas ipsa eos explicabo quisquam architecto similique, sunt repellendus animi a doloribus ab deserunt. Dicta neque nostrum modi, illum debitis dolorem.</p>
</div>
</body>
</html>
/* INSTRUCTIONS
*
* 1) Keep the text inside .intro-content
* in the same place, but have the background
* extend from one side of the viewport
* to the other, no matter how wide or narrow
* the browser is.
*
* 2) Limit the maximum width of the text in the
* bottom area.
*
* You may modify the HTML if needed
* (you probably should for this challenge)
*
*/
body {
margin: 0;
}
main{
background-color:#23424a;
}
.container {
background: #23424a;
color: white;
padding-top: 1rem;
padding-left: 15rem;
padding-right: 1rem;
padding-bottom: 2rem;
max-width:850px;
border-right: 20px solid#23424a;
}
.intro-content {
width:50%;
}
.writeup {
padding-left: 15rem;
padding-right:15rem;
min-width:780px;
}
It's Kevin's Class I am taking. Class Challenge 2
Done!
https://www.nicksbargainnews.net/kevins_classes/index.html
MOzzilla Fire Fox vers Chrome Browser
See below
You guy try it in firefox and chrome, you'll find the width and max-width are the problems. Then if that is the case, why learn those commands if it's going to screw up the browsers. This is where I am a lost of understanding....
I can't be any clearer or more direct or detailed. I gave it all I got.
it looks exactly like chrome
EXACTLY
https://nicksbargainnews.net/kevins_classes/challenge_2/index.html <-- this is the link, btw
I'm sticking with what I said from the start, you have a setting in one of those browsers that is changing something.
This is firefox on the left, and chrome in the right. I copy and pasted the code you provided.
it is a setting
probably the font or zoom
I'll look but not sure where. Do I have to dive into the browsers .ini files? I am using Linux Mint Firefox version 001-1 139.0.4 64bit. Also how do I send you a screen shot? There are no upload options on here? Well thanks everyone for trying to help. I'll keep looking but again not sure where in the browsers. The basci settings are easy to set and find, but after no clue.
no, you click on the hamburger menu then go to settings
the font size is on the general settings
Ok I like to thank Kevin and everyone in here who took the time out of their life to help me with my crazy problem. Yes Kevin you where right, it was a Font issue. The web pages look much more similar now in both browsers. At least I can sell or use this now. Thanks for not giving up on me. Keep up the great work. Have a great day...