I am studying CSS3 and HTML5 and trying to develop a simple homepage. Since I have only Mac interface in my house so I couldn't check any differences on windows.
But one day, one of my acquaintances told me that there is a pixel difference between browsers which I didn't know at all. Then I checked my page and it appeared to be wrong.
Even though it was same resolution as I set, Chrome on Mac showed me an appropriate position of several buttons but Chrome on Windows didn't.
Their position was quite different and ruined the design. How can I fix this problem? or is it normal?
Thanks.
Developing a site that is the same on every combination of operating system and browser is no easy task. It has personally added many hours to my development time trying to fix the issues.
There are several tools out there that try to help you with this task, such as Cross Browser Testing. Or you can manually test it by installing the browsers on your machine. It is also common to use virtual machines to test your website on other platforms. VMware is popular.
Using cross browser libraries can also aid in this. Such as jQuery, which is very popular. This page lists more information on the subject, in general.
Difference is not in Chrome, but difference is in Mac and Windows.
Here, you can detect the userAgent and add the appropriate class to the body tag (with jQuery):
jQuery(document).ready(function(){
if(navigator.userAgent.indexOf('Mac') > 0){
jQuery('body').addClass('mac-os');
} else {
jQuery("body").addClass("pc");
}
});
After detecting userAgent, you can write css specially for Mac and Window and their browsers too.
In 2018 chrome and firefox behave differently depending on the operating system. I built a site recently, and on latest chrome and firefox versions one page was rendering OK in windows, while on macOS and ubuntu, it had a small glitch. The elements that are supposed to be inline were displaying horizontally in certain states.
Related
Real quick question here... I'm trying to style a public facing website. I've coded individual css files for the different browsers, but I've noticed that I've got some display issues when a user views the page from a mac OS... it's minor- just a footer background that's about 50 px too high, but it happens identically on FF and Chrome... both interpret correctly when viewed from Windows, but the same browsers from a Mac mess it up... this was one of the issues that initially got me to do differently tweaked...
Here's what I'm using for browser detection...
Dim browser As HttpBrowserCapabilities = Request.Browser
Dim bName As String = browser.Browser
If bName = "IE" Then...
Ok, So I'm thinking that the browser reports differently under these different circumstances, but there's only one mac in the company, and I'm having trouble finding a way to get what she sees to report to me, short of posting some kind of label... Does anyone know if there's a difference, and if so, what it is? what string I could look for so that I don't have to just throw mac users into an "else" category?
UPDATE
Well, I coded a little JS to give a popup for what the browser was reporting as... both FF and chrome reported correctly... so it seems that those OS's seem to interpret the CSS slightly differently, just like different browsers do? Does anyone know a trick for determining the OS a browser is coming from?
We built a Joomla website for one of our clients which can be located at:
http://mayslakeministries.org/
Although everything was looking fine from our end, the client was seeing the website as if no CSS was being rendered. Unfortunately, I do not have a screenshot at the moment. I will try and get one up here in the next hour or so if we don't come up with a resolution. (If anyone is able to see the mess that I'm describing, if you could post a screenshot that would be appreciated as well. We have limited testing equipment available and it's hard for us to reproduce.)
But here is what we've concluded: the website works fine in Chrome and Firefox on all systems. It works fine with IE10 on all systems as well. However, as soon you switch to IE9, things get strange.
IE9 will work fine if you are on Windows 8, but if you are viewing in IE9 from Windows 7 or Vista, things look as if the CSS isn't being loaded.
Any help would be appreciated. If you view the site and find that the information I've provided contradicts what you are seeing, then let me know. We have limited equipment to test with, so it was difficult for us to be able to see the problem.
This is the first time I've encountered a problem that only occurs on a certain OS.
Oh! One more thing I think is worth mentioning. The Joomla template we are using works fine even on Windows 7 IE9. So we believe it's something that we have done to the website that changed it's behavior.
Here is the Joomla template demo:
http://www.astemplates.com/itempreview/186
Alright, it took is a few days, but we finally figured out the problem.
IE apparently has a limit to the number of resources that can be linked to the page at one time. Our Joomla site has around 200 JS/CSS files being linked through the source, and this caused IE to bug out and not load our CSS properly.
This is one of the strangest problems I've had to deal with, so I'm very glad it's fixed.
I have a Website which has a disclaimer which says that this web site is best viewed on IE7, 8 & 9, Firefox 12,13 and 14, Chrome 18, 19 & 20.
This disclaimer was put many months back.
But, new versions of Chrome and Firefox gets updated on User's system if auto-update is enabled.
Till now, whatever latest version of Chrome (CH 23) and Firefox (FF 17) that User's are using, my web site is supporting in terms of CSS and alignments. A day might come when a particular browser version will be released in which they internally update something and that might affect my CSS, Ajax calls etc. Am particularly bothered about look and feel.
How to find out beforehand if the Browser version which is getting released will start showing up my site properly. And that I dont have to start making any code changes.
For eg., IE10 is released and I had not targeted this during development. What parameters I need to check to make sure that I dont have to do any code changes.
First, the whole "best viewed in" thing is a throwback to the past when different browsers had substantial differences in how they rendered HTML, it's essentially pointless if you're developing properly these days.
Second, it's rare where a newer version of a browser will break display functionality of a normal website, I've seen it happen with some games and the newer versions of Chrome, but never a normal site. Browsers generally move forward in their display abilities but never at the expense of previous versions. You can still build a website with frames, tables and HTML font tags and it will still display properly so honestly I think you're worrying unnecessarily about something that isn't likely to happen.
That being said, Chrome has their Canary browser, which is their development version of Chrome with the latest toys and tweaks, IE will usually release preview versions of their browsers before going public as they did with IE10, not positive about Firefox or Safari but a quick Google should help you there.
Do keep in mind that developing for unreleased versions of browsers is a horrendously bad idea. They can change before release breaking what you've done. Make sure your code is clean and error free and works on current browsers and the chances a new browser release will break that code ranges between slim and none and is a lot closer to the none end of the spectrum.
Im currently building a website and it seems that the font used in the header isnt rendering correctly on windows machines. I've checked the windows machines have cleartype enabled which they do so im wondering if anybody else has come across this issue or knows what the cause is?
Windows...
OSX...
It seems that particular font has not been properly hinted, and that causes numbers to have uneven sizes with the Windows ClearType (mis)renderer.
You can try to fix the issue with the FreeType’s ttfautohint tool.
There are a lot of reasons why fonts render differently from OS to OS and browser to browser. This SixRevisions article discusses some of the challenges using custom fonts online and towards the end there is a section on font rendering. It's a jungle out there.
Back in the past,
i found a third party webpage that was able to capture and save images of my website in different resolutions and browsers. Of course i have no more that bookmark...
So is there any webpage or application where i can see how my webpage looks like in different resolution?
And here are the resolutions i would like to check for..
1. 1024x768 24.56%
2. 1280x800 22.06%
3. 1280x1024 13.42%
4. 1366x768 7.10%
5. 1440x900 6.68%
Perhaps you're thinking of http://browsershots.org/ ?
Note that the screen resolution of the computer running the browser is only half of the truth. If the browser isn't maximized, it will be a lot smaller than the resolution you see there, and on non-Windows operating systems (Mac OS X, Linux) it's a lot more common to run applications non maximized.
It's simply best to make sure that your site is viewable in anything from small windows (just resize your browser down) to large.
If you want to check various resolutions and browsers, then BrowserShots may have been what you came across before, give it a look.
For viewing which percentage of people sees how much of your web page:
http://browsersize.googlelabs.com/
Also: Web Developer plugin for Firefox (Resize menu).
Chrome Extension and Firefox add-on to resize your browser to various standard resolution sizes...
There is one more online tool called ScreenFly which is very good and you can even check for tablets, TVs, mobiles.. screenfly
There are many utils available for watching your website in different resolutions.
Some are installed on PC, some are online services like these:
Adobes "render browser" - you'll need to create a free Adobe account:
http://browserlab.adobe.com
Nice, but not free if you want it fast as I recall it:
http://browsershots.org/
Google - shows what part of your website is visible based on statistics from Google:
http://browsersize.googlelabs.com/
But as far as I know, todays most commonly design resolution is 1024x768, eventhough the height isnt that important because of the popular scrollwheel on most mice/pads.
If you design to design for this resolution there is a lot of design help in the "growing standard" called 960 grid, which is based upon how many professional designers build a design.
You always make an invisible "grid" and then you use the cells to arrange the contents. Much like the old "table" system, but much more focused on professional designs.
Regarding your question, the % you list, seems like you would have most use of the "Google" link above.
Lastly, always remember to test how your website looks with the most used browsers. For me those 4 will be:
Internet Explorer (latest and previous version, use more than one computer to test if you cant do a double installation of it)
Mozilla Firefox (latest and perhaps previous.. but they make less changes in the render, so latest would be ok)
Google Chrome (awesome debugging tools too, and a very stable browser)
Safari (so you make sure that you support MacOSX)
Thats my opinion.
The Multibrowserviewer is a great (paid for) tool for multi browser support, I know it's not free, bt worth looking into even just for the trial period.