I'm new to the front-end world and was wondering how you guys go about positioning elements on a website that translate across multiple browsers.
I'm designing and developing a website for a school project which looks fine on my MacBook Pro in Chrome and Firefox. However, when I try to view it on IE 9 and Firefox on my work's PC, the positioning is completely off. The font size in IE 9 is also really off.
I hear IE is sometimes a bitch, but I'm wondering if there's anything I can do to make it the same across different browsers and operating systems.
I use mainly relative positioning with one or two things that are position absolute. For font sizes I'm using em's as I hear they're better for responsive. If I want this website to be responsive and the same across different browsers and operating systems, what should type of positioning should I use?
I usually look at http://quirksmode.org to learn what features are compatible with the browsers that I want to support. I haven't done that in a while, but I see that the site author (Peter-Paul Koch) is keeping it up to date.
I also like to know which standards documents are relevant and what they say. As to font sizes, relevant standards include HTML 4.01 and the various levels of CSS. I think the documents don't say a lot though. In any case browsers frequently vary slightly in their interpretation of or adherence to occasional points in the standards for technical reasons. After all the standards say little or nothing about anti-aliased fonts, Retina displays, and other matters that may be very relevant to platforms and implementations.
For font sizes, I use a base size and set everything else relative to that. I haven't done that in a while, either. Other people may come along with a sharper understanding of current practices. Nevertheless I expect that my suggestion will continue to work.
When I'm coding for business purposes, then I still go through the exercise of testing in a varieties of browsers before I consider the job done.
If you had more specifics for your question, please add them. Otherwise, although it's fine that you asked here, I think you'll find that further broad "what do you guys do" questions fit in best here http://programmers.stackexchange.com
In addition to the other suggestions, I recommend you always use a CSS reset so that the default settings are similar in all browsers.
There are several good resets to choose from, I've had good success with http://necolas.github.io/normalize.css/
Good luck!
Related
tl; dr: making website for biological researchers. Are these guys apt to use IE8?
I'm developing a website that will act as a reference for biology researchers. I'd like to implement loads of HTML5 and CSS3 if I can. But I can't spend forever developing it though, and fixing websites for IE8 takes too long, especially with the heavy reliance on SVG elements I have planned. With such a user base (researchers), would it be safe to drop support for IE8 and below? I've heard that it's mostly banks and airline companies that use IE <= 8, but I've never come across an actual statistic, other than that global usage of IE8 is around 10%, which is a bit high for my taste.
The short answer is, of course, "it depends", but some things you might consider:
-Who benefits from people using your site? If it's you who wants them to use it, then the onus is more on you to make their lives easier by supporting whatever browser they use (most ecommerce sites would fit this category). If there's less value to you and you're genuinely just trying to be helpful by producing a valuable tool for you particular research community, it'd probably be more reasonable to expect them to update if they care enough.
-How much effort would support be? If it's little extra effort, then just do it, but for what you've described it sounds like support would be very difficult. If it's going to take 5 times as long to support 10% more people, I personally wouldn't bother.
-What sort of age are they? Not always true, but generally speaking younger people will tend to use more recent browsers.
In your position, I'd try to ask 10 or so people who you'd expect to use the site what browser they use. If only 1 or 2 people would be affected, I'd ditch IE8 support, and make sure the site falls gracefully back to a page explaining why they aren't able to use it and how to update their browser.
Points to consider:
Many people who use IE8 may also have other browsers installed as well. (choice of browser isn't an 'either-or' option)
How about making your site semi-functional for IE8 rather than entirely non-functional? If parts of it don't work, explain that to the user, but don't stop them using the bits that could work for them.
There are fall-back options (polyfills) for IE8 that allow you to do some modern browser features, including SVG -- see here. They won't work as well as modern browser, but they might make it possible to support IE8 a bit more than you think, without too much extra work on your part.
If your resource is useful enough, and the IE8 users can see what they're missing, it might push people to upgrade in order to use it.
Surely a group of intelligent people (scientists, researchers) would be sufficiently technically literate that they'd at least know about alternative browsers, even if they are still using an old PC that originally came with IE8. With luck, your target market may have fewer IE8 users than the general population.
What is your preferred approach when creating websites :
Make effort so pages looks exactly the same on every browser ? or
Let the browser apply its default stylesheet on some specific objects like inputs, borders, colors, etc. ?
The first solution is obviously what we would naturally have in a perfect world, but require a lot more work, CSS hacks, browser specific stylesheets and so on.
Is it what webdesigners should tend to do ?
About the second one, I'm thinking about forms, disabled elements, colors sometimes, table's header and footer... It is a lot easier to let the browser handle it and has the advantage of being consistent across websites for the user.
Is it a good practice or I am being lazy ? How to "sell" this solution to a client that don't care about those considerations ?
I'm looking for the pro and the cons of each method.
How to choose between one and another ? Where is the limit ? (How about : stick to the W3C standards and let the browser handle the rest ?)
The art of web design is to work within the constraints of the medium, of which there are many, and still come up with something 100% functional across many different platforms. It is a challenge to make your pages look good and function completely across all browsers at multiple screen sizes, resolutions, cultures, languages, connection speeds, accessibility issues, etc., If you can just accomplish "not broken in IE" that is something.
Of course I want it to look like it did in Fireworks, but that is not a realistic target. Every single machine is different, so every view of your page will be too.
You some CSS framework like Twitter Bootstrap Or Blue print. There are actually Many out there. Then if you are writing custom CSS I would recommend you to use CSS Preprocessors.
List of CSS Frameworks
List Of CSS Preprocessors
http://twitter.github.com/bootstrap/
Since Twitter Bootstrap and many in the list cover responsive designs too so you dont need to rework for Tablets and other Equipments.I hope this list will get you started.
As a developer you would want a consistent look across all browsers. You don't want to have a lazy attitude as you suggested!! That is a terrible habit for a developer and leads to poor quality products.
Familiarize yourself with the different frameworks out there that address cross browser issues. Twitter bootstrap and jQuery are a great place to start. Also get to know the different browsers and understand what they support and what they don't, so that when you are coding you can avoid certain things!
While most web designers desire consistency across browsers, there's nothing inherently "right" about it being so, and in practice it depends on the nature of the web pages you are creating.
In particular, total consistency runs contrary to the principles of Progressive Enhancement and Responsive Web Design. There's no golden rule, do what's right for your client in each situation.
Recently, I have been battling with: weird table borders/margins, div alignments, positioning problems, and am having a down right nightmare supporting Internet Explorer 6. I know a lot of you like me are forced to support, IE6-IE8, Web-Kit, and Mozilla based browsers.
My questions to you are:
What are the important rules you use before hand, when developing across multiple browsers to save you time?
How do you prevent yourself from writing incompatible tags?
What is the best way to avoid hacking your code?
Where do you find research on browser compatibility, do you use any tools?
Finally, when do you cross the line/where do you draw it?
I usually code against Firefox (or Safari) first. That usually produces the best results across browsers other than IE. I then hit IE8, IE7, then finally IE6.
Know what tags are going to cause you trouble and avoid using them at all costs. It's all about how familiar with each browser's issues.
Don't use hacks. Use IE conditional comments. By using conditional comments, you can load one stylesheet for all other browsers, one for IE8, one for IE7, and yet another for IE6 (if you need that kind of granularity to fix your issues). It will give you nice clean stylesheets with as little hack-i-ness as possible.
LitmusApp
There really aren't lines to cross. If you need compatibility, you need compatibility. You just whiddle down your issues as best as you can one at a time until you have something usable.
I would say to start with standards-compliant code. Always test in a standards-compliant browser first like Firefox, or Safari/Chrome. I prefer Firefox for the addons (such as Firebug, HTTPFox and the Web Development Bar). Then work your way DOWN (and by down, I mean all versions of Internet Explorer).
Try to stay away from temporary fixes per situation or site and generalize your code as much as possible. For example, as Justin Neesner said in his answer, using conditional comments and a general style sheet for IE6 , 7, and 8 will knock out most of your problems with layout and formatting, without using (too many) hacks. You can reuse the IE stylesheets, and just place the site-specific code in it.
Use a testing platform like browsershots, netrenderder or LitmusApp so you can see what your site is doing in as many versions of browsers out there. Studying browser compatibility deeply will make you pull your hair out, but any great resource like quirksmode.org can give you information on the little gnats of incompatibility, so you don't go crazy, and bald.
As far as when do I cross/draw the line, it's 99% Internet Explorer issues, and if it's close enough to looking like FF or Chrome/Safari, I'm done. Almost like art, it's not when you're finished adding, it's when you're done removing the crap you don't want to see; that's when you know it's done.
I say there is not that much you can do except sticking to the basics:
Code standards compliant HTML
Validate early, validate often
For Javascript, use a framework like JQuery, Prototype or Dojo
Pick one "main browser" you optimize for first.
in every project, there will be a number of issues, but if you stick to these points, not too many.
I find it extremely helpful to build 100% W3C valid code. Not because it matters - much of what the W3C validator complains about will not make any difference in real world browsers - but because being able to run a validation, and getting a green light and knowing that all is well on that end is very helpful.
To test multiple IE instances at once, you can use IETester. It's not perfect - conditional comments won't work in it for example - , but mostly usable in everyday development work.
use a doctype like html 4.1 transititional which makes ie6 render in standardsmode. You can also use a reset stylesheet.
Use strictly compliant HTML and CSS markup and do not use browser proprietary extensions to CSS.
IE 6 does not implement CSS correctly beginning with its absolute ignorance of the box model.
IE 8 on the other hand has a test suite to prove they implement every aspect of CSS 2.1 correctly (which no other browser does).
Develop for Firefox as stated above and make a decision about supporting IE 6 & 7 or not. Frankly, I no longer develop separate style sheets for those browsers. They don't have enough market share (at least on my site.)
Given the interest in HTML 5 and the lack of interest in XHTML 2, develop HTML 4.01 Strict and follow these practices: (which are recommended in HTML 4, and required in HTML 5 and XHTML 1.1)
all elements and attribute names must appear in lower case,
all attribute values must be quoted,
non-Empty Elements require a closing tag,
no attribute minimization is allowed,
In Strict mode, all inline elements must be contained in a block element.
Why to learn HTML 4.01 Strict with references.
Also see the CSS 2.1 Test Suite
So I have been running around for a while now, 26 days later I think I am ready to give some feedback to my findings.
Coding:
First of all, I found that column systems seem to cut down the amount of HTML and CSS written. They are also very cross-browser friendly. Although there are many of them, I found that the 960 Grid System works the best for me: http://960.gs
Next up I found that Ruby has a cool extension for CSS called, LESS. This has been ported over to .NET and can be found at: http://www.dotlesscss.com. It is easy to setup, and is very powerful when used right.
Javascript, can be tricky but I found out that avoiding certain selectors and shortcuts in languages like JQuery will not only speed up the performance of your application, but exhibit less awkward behavior.
Testing the browsers:
Here comes the interesting part. Without any software I found that testing my applications against Internet Explorer 6 and Safari at the same actually helped increase the speed of my development. Firebug and Firefox actually cause me to develop around the problems and this is what causes a lot of extra code. When developing simple code against IE6 and Safari I found that going back to Firefox and IE8 is incredibly easier. Most problems I have had were with border widths, which were easy fixes.
The best software solution I found that was accessible to me was Expression Web with Superpreview, if you ever wonder why Microsoft releases a bunch of version of IE, its probably so they can sell you tools like these.
Anyway, that's my 2 cents for right now.
I am a Web developer and in my projects I have noticed that my weakest point is not being good at the front-end design. Relying on other designers can be annoying if they are not able to produce as quickly as I want.
My perspective on HTML/CSS is that it is basically a big hack that amazingly works. There are too many CSS and browser specific bugs/quirks to learn and remember them all without spending extreme amounts of time trying to untangle everything. Is there a fast track route to getting CSS into my brain? I have looked at some CSS books, but to me they really read as long lists of how to render things correctly in IE6 and how to make corners rounded. (Seriously why does it require so many tricks to make a sharp corner round? On any platform but the Web this would be called a major oversight.)
Does there exist something that does the analogous to CSS that jQuery does for JavaScript? Using jQuery you don't need to know JavaScript well to make things that work.
I am not interested in learning why IE6 does things in weird ways because I don't care about supporting it at all. I am more interested in a method of learning how to use CSS to do what I want without spending hours and hours reading obscure blogs.
Pencil and paper to sketch out your ideas (think in boxes, not triangles or hexagons), then just break down all the little parts and learn how to do each one. No problem is too big that it can't be broken down. And, like always, TMTOWTDI!
Find examples and learn from it—at least that's how I started learning. Study the styles used and play around with them. When you find something that does what you like, create a mock-up and play around with it. Then test it for cross-browser compatibility.
If you get frustrated because something works in Firefox and Chrome, but not in IE (this will happen a lot), don't give up. I find cursing Bill Gates' name and all he stands for is a great stress reliever. :-)
A great tool I like to use is Firebug, a plugin for Firefox that allows you to, among a great many other things, edit CSS rules in-browser and see the results as soon as you do it.
I agree that CSS was kind of an afterthought in the web design world, but it's one hell of an invention and makes things so much easier and quicker to develop.
Yes, there are CSS frameworks that are the 'jQuery of CSS'. Some of the more popular ones include 960 and Blueprint. I personally use 960 and have found it takes a lot of the guesswork out of layout.
As others have said CSS is hard to learn by reading. It ends up being one of those things you just need to develop an instinct for through lots of experience (which typically means lots of trial, error, and frustration). It is, as you've highlighted, not an ideal situation, but it is what it is.
Another difficulty is that the methodologies or workflow that is employed can really differ between individuals. Some people do a mock-up in Photoshop first, then produce an exact pixel-by-pixel "rendering" with HTML/CSS. Others use Photoshop, Illustrator, or another tool to simply sketch out and idea, and then re-create it from scratch in HTML/CSS. And still others prefer to start directly with HTML/CSS and just a few thumbnail sketches. Figuring out which of these methods fits you best is anthoer important piece of the puzzle.
It pretty much takes time and practice. But you can save yourself a lot of trouble if you keep your html clean and straightforward. Here are a few rules I can think of that have helped me:
Use DOCTYPE in your html pages, start with transitional since it has the most lax rules, and validate your html. If you keep your page in standards mode rather than quirks mode, you will have significantly fewer problems across the board.
Pick what browsers you will support early on and support them in a logical order. For me, I develop in firefox, then make sure that things are solid on chrome / safari. IE can use a special kind of comment that lets you insert html visible only to IE. Use that to add on stylesheets for IE7, then IE6 to override styles and fix any display issues in those browsers. You should generally start with the best browser first and work your way backward.
Be careful with padding. That is one of the most problematic properties I've dealt with. When you can, opt for using a little sub-container element with a margin in place of padding. It's more markup but margin is handled much better across all browsers.
Absolute-positioned elements inside of relative-positioned elements. This solves a LOT. When you relative position an element, it stays in it's normal flow. When you absolute position elements inside of a parent that is relative, the absolute items work in reference to the location of the parent.
In this case I don't think books will help much. CSS is extremely easy to learn, and extremely difficult to master.
All I can suggest is learn as you go.. You need a lot of experience!
Or, you can drop support for IE7 and especially IE6. If you do that you'll find very very few and very very rare quirks :)
Take some classes in graphic design. No programming language will make you an artist, and artistry is required for good user-interface design.
[or you could find better graphic designers to work with]
Subscribe to css-discuss, play with the common problems and talk with other people about your progress. The wiki is a very useful resource too.
I build websites for a small-ish media company. Unfortunately, around 45-50% of our client base uses IE6, while the other half are pretty much equally split between Firefox and Webkit-based browsers, with a sprinkling of Opera users.
I start every one of my sites with a reset stylesheet similar to Eric Meyer's, with a few modificaions. I've been using the Blueprint CSS "framework" a lot recently, and it's made my life a lot easier, though I am not especially attached to it.
Roughly 60% of my development time is spent making sure the sites I create don't look incredibly different in each browser. I code for Firefox 3 then tweak from there.
Does anyone know of any stylesheets/frameworks out there that attempt to preemptively account for all of those stupid little browser quirks? I know that nothing out there can totally account for all the browser weirdness, but it would be nice to have something a little more solid to start with.
I'm working on creating my own, but it would be nice to have something to start with.
The Yahoo YUI library helps deal with a cross browser rendering issues. Namely, the Reset component (http://developer.yahoo.com/yui/reset/) will revert all browser specific rendering (margin and padding on certain elements for instance), creating a level playing field to start from when designing your site.
Take a look at YAML.
Read and inwardly digest Transcending CSS by Andy Clarke, Molly E. Holzschlag, Aaron Gustafson, and Mark Boulton.
It gives a set of techniques for dealing with those quirks you can deal with, and advice on making web sites accessible to older or less capable browsers, or those using other technologies, such as screen readers.
The fundamental thrust is on making sites that degrade gracefully.
It contains lots of links to resources that deal with these issues.
Dean Edwards' IE7 library copes with some of the Internet Explorer quirks.
Blueprint was one of the early appearances in this space, and is considered to be quite mature.
http://code.google.com/p/blueprintcss/
Here's a huge list of available frameworks:
http://www.cssnolanche.com.br/css-frameworks/
There was a lot of interesting debate in the web dev community about css frameworks at the time. Many were worried this violated some stucture/presentation seperation, and introduced non semantic class names and structure.
Some views:
http://jeffcroft.com/blog/2007/nov/17/whats-not-love-about-css-frameworks/
http://playgroundblues.com/posts/2007/aug/10/blueprints-are-not-final/
http://www.markboulton.co.uk/journal/comments/blueprint_a_css_framework/
http://peter.mapledesign.co.uk/weblog/archives/blueprint-semantics-markup-frameworks
Have you looked at the Yahoo YUI stuff? They have a cross-browser CSS Framework.