I have an app that runs across a few different computers and I develop on Ubuntu using Chrome.
Normally my CSS layouts look ok on PC's running Windows, but I've been noticing that a few of my layouts will break when viewing on my co-worker's computers (instead of being side-to-side with floats, will break to a new line for example).
Generally removing a couple pixels on either side will take care of the inconsistencies. This got me to thinking, is there any way to check the display differences on CSS between OS's? Generally there are guidelines on cross-browser styling, but I don't seem to remember any places that show the differences between OS's.
Most likely, the problems you're seeing aren't related to the OS so much as which fonts are being used and precisely how they're rendered. Using default fonts, "ABC" might render 16px wide on Windows but only 15px wide on your flavor of Linux.
In general, it's a good idea to add in a little extra tolerance when sizing a box based on how long (in pixels) the text inside of it is.
You will have to test your css in different browsers. You must install as many browsers possible in your machine and check periodically.
Also, there are tools that render your site in different browsers and you can see snapshots.
like this one: http://browsershots.org/
it has a big list of browsers/OS to check.
Related
Scenario :
I am working on a mobile web version of my website
Problem :
When the design is running on my own laptop
it looks perfect but when I put my HTML files and open on another
laptop of my friend, the design is totally different and super messy.
For example:
font-size is messed up.
absolute positioned div is not at the position I set.
sizes of input fields messed up.
The overall issue is that the UI design looks perfect on my screen but different on others, even with same screen width and resolutions.
Using : Bootstrap 4 to design the UI.
Open to all suggestions, Please suggest.
Thank you.
You might consider using something like Normalize.css or CSS Reset to minimize the difference between the default stylesheets on browsers and different operating systems. Stylesheets like these give your sites a consistent starting point, removing any custom styling which may be added by the browser publisher or computer maker.
Just add the stylesheet as the first <link> in the <head> of your index.html and it should give you a good starting point. There may be some display inconsistencies afterwards, due to hardware or operating system differences, so some minor tweaking may be necessary.
So my nightmare have come true. I need to make this website im developinglook good not only for IE8 but for IE over Win XP, apparently this company still get support for XP and they have all their intranets working under XP.
After doing a first check on a virtual machine the website looks like hell even the layout was totally broken so i decided to use html5shiv js (that fixed the basic layout) besides things like reset all margins and paddings and <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><![endif]-->.
BUT everything still looks pretty messy, specially things like image re-sizing on the html for retina display matters (i know, LOL) and things that i float with display-block. I have read tons of things with the display-block situation over IE8 but i just cant find a way to make it work without changing all my display-blocks for floats or create another huge specific ie (under win xp..ugg) stylesheet.
Do you guys have a general advice in order to make my website (flat design nothing with transitions or anything fancy) at least look decent on ie8 under xp ? Any help will be really appreciated
I own (and use) a Windows XP machine in addition to something more modern and I actually still have IE6 on the XP machine so as a web designer, I am way too familiar about coding for something as quirky as IE.
One of the biggest and continuing quirks with IE is the fact that it is VERY unforgiving about processing CSS 'instructions'. Leave out one declaration - like heights and widths for example - and you get rubbish because the engine decides it will try to interpret as it will.
These quirks are annoying as heck to experience, but the truth is, these quirks can help you to become a stricter CSS coder.
That said, some thoughts to help avoid these particular problems:
1) Declare ALL dimensions of objects. This includes heights, widths, margins, and paddings.
IE does NOT like 'auto' sizes unless it is exceptionally obvious.
An example of 'exceptionally obvious' would be two blocks floated side by side both whose percent dimensions are explicitly declared which, when added together, equals to 99% (for the sake of the example) which leaves 1% explicitly available to be used as a margin space which can be calculated by IE correctly.
2) When using floats side by side and if the floats don't want to float politely next to each other, try adding this to the floated block element: display: inline;
Normal compliant browsers won't care about it and some designers will gripe about it being a 'hack' (and yes it is), but it's SHORT, sweet, and does the job without resorting to queries.
3) Make sure the container that holds the floats has overflow.
Some thoughts about 'pretty' vs 'older IE and people using XP':
1) If using CSS3 and having it render correctly is all that important to you, then I would suggest either a) use CSS3 for unimportant things only or b) create a stylesheet specifically for non-CSS3 browsers.
a) This way, if unimportant things don't load correctly (and don't cause cascading problems), big deal.
b) This way, so you can use CSS3 all you want however you want without worrying about how it will look for non-CSS3 browsers as you will have a separate stylesheet for them.
A thought on image scalability between browsers and operating systems:
1) This webpage HERE has a great discussion on Fluid Images and scalability and it also offers an approach for addressing image scaling in IE and Windows in particular.
You might have seen it already, but if you haven't, there it is.
Right now, we are trying to achieve consistent formatting of textarea elements, across Safari/Chrome/Firefox/IE on Mac and Windows. I believe this may be a rabbit hole, since any combination thereof could produce formatting in a slightly different way -- maybe one combination adds a bit of padding to a div here differently than the others, another one breaks multi-line text there differently than the others, and so on.
Instead of using textarea (or div) elements, can we achieve pixel-perfect positioning using HTML5's canvas? Or using the Raphael JavaScript library? Or maybe some other JS library?
Mainly, by pixel-perfect, what I mean is any arbitrary text should get rendered in the exact same way (especially with respect to line breaks and padding) in any of the above-mentioned browsers.
(I'd prefer to avoid Flash-based solutions for the moment, unless that is the only solution...)
Send the text to the server, have the server render an image, display the image. Voilà.
I would say this is nearly impossible.
I would also say that there is no reason to have pixel perfect across all browsers because the overwhelming majority of visitors only view your site with one browser. And those who do visit your site in more than one browser (say at work and at home) are unlikely to notice elements that are off a few pixels or have slightly different border colors.
What we should be concerned about is that the content looks good in each browser.
That said, here's a great list of textarea tricks: http://css-tricks.com/6841-textarea-tricks/
One main reason that PDF exists is that browsers are not about pixel-identical layout but PDF is. Among other things, not even typefaces are guaranteed to be the same from one OS/browser to the next.
Even, if you don't let the browser position anything and you do all your own pixel level positioning, you still won't necessarily have the same fonts to work with. If you let the browser position anything, then you can have variations.
Would one solution be to begin your css with a clean slate? Give everything a known default?
For example, I start my css files like this so I always know what to expect:
*{
margin:0;
padding:0;
}
Is that what you're looking for? Similarly, you could change '*' to 'textarea'.
I'm not sure if it is possible, however one thing you may want to look into is using the web developer toolbar for firefox or the web developer add-on for chrome. There is an option to disable browser default styles. Check this and then style everything. The borders, border type, all margins, paddings, background colors, etc. Then reenable browser default styles and make sure it looks the same. If not, wash, rinse and repeat.
Also, if fonts play a part, you will have to embed them into the page since some operating systems may not have a particular font installed.
Can someone look at this page carefully. I am trying to fix font on this page. I don't know what previous programmer has done to font. Can you look at service guarantee and service features headings in green panels, edges of text are like someone cut this font with seesaw. Similarly on other parts of page. They are supposed to look smooth.
viewing page on ff and ie8 (widows xp).
I think you mean that these sections aren't anti-aliased. This isn't something you can control when you display text on the browser -- it's actually browser- and OS-dependent.
If it's important to your users to have smooth fonts, then you could anti-alias them in an image program and use images instead of text, but this is extremely inefficient and makes your page a gigantic pain to update.
So, in short, there isn't anything you can do to fix this. See this SO question for more details.
use firebug which is a firefox plugin to see the styles and html tags used in the web page, you can even edit the css used in the web page through firebug.
Your page looks fine on my browser (Chrome under Windows).
Different browsers all render text differently. What you will find is that there are often sweet spots in font sizes that look better than others. In any case, what you are talking about is whether the browser is displaying fonts anti-aliased or not.
There is a CSS3 property, font-smooth, that you can adjust for this, but don't expect it to work on browsers that aren't smoothing their fonts anyway. You can read about it here: http://webdesign.about.com/od/styleproperties/p/blspfontsmooth.htm
In short, don't worry about it. If it is a big deal for you, then experiment with different fonts and sizes. A good tool for doing this is at http://www.typetester.org/
Don't forget to test your site at BrowserShots.org. It will do screen captures for you, so you can check these details on a wide range of platforms.
If you must have your font rendered in a specific way, then it must be done in an image. This is not recommended. Text should be text wherever possible. However, if you must do it this way, consider one of the many scripts that assist, so you can keep text for browsers that don't support the script, and SEO isn't a problem. Typeface.js is commonly used for this.
Is it good to use bullet image inplace of browser default bullets for UL to get cross browser result?
Unless it's a very stylized/graphics heavy site, I'd say no. Users don't expect your webpage to have any particular look/feel...but they do expect it to be familiar and intuitive. If you have a completely different theme and a completely custom look, then yes, go for it. If you don't...let the user see what they're used to seeing.
Example: Checkboxes look different on different browsers, but 99% of the time, the same to the user that's always using that browser on their computer. Now using images/javascript to change what those checkboxes look like is slightly jarring, because they're suddenly unfamiliar.
If you're totally immersed in a different environment anyway (example: lots of graphics, black background, etc) then make your styles on anything fit that...for the standard-ish looking webpage that's very light on styles, I'd let the browser defaults prevail.
Well, if you are using list-style-image:url(), then you pretty much enter a world of pain, since different browsers will position the image differently. If, however, you're using background images + padding, then you can indeed get consistent cross-browser results at almost no cost.