I've done a little bit of playing around with the new HTML5 tags and read up on all the new ones at W3cschools, etc. and I'm a little confused.
If I create an HTML page that uses "areas", "sections", "asides", etc. Nothing happens? I have to manually style them - which is FINE, but am I missing something? What's the point of declaring a tag an "aside" if I have to make it ASIDE (common css: float:right;width:30%, sorta thing)?
Why not just stay with DIV tags and style them?
I also noticed new attributes, such as "draggable", but, surprise-surprise, it doesn't drag! I have to code it to drag too (javascript/jquery??) ? What's the point of declaring it draggable? I can create a div tag and drag it using JQuery, so someone please enlighten me as to what's so "whoopty doo" about html5?
This is how the web changes in respect to HTML.
First new tags are created by browser makers for advanced users to try out.
Then they are added to the standard
Then they actually get implemented in the various browsers and devices.
Then they become widespread and useful.
Then they become universal and are implemented by 99.9% of devices.
For the tags mentioned they are probably between steps 2 and 3
It may not be "whoopty doo" but this is how changes occurs in this system
Developers who accept, embrace and use this pattern of evolution help move this process along.
It's a bit zen-like.
Additionally, as Aaron points out in his comment above (+1), these particular tags are semantic tags for organizational/outlining and search engines, screen readers and the like. So you yourself may not see much up front for them.
Might not be the case but at least I know for me I make this mistake every now and then. Don't forget to include at the top <!DOCTYPE html>. Furthermore, not all browsers support HTML5 yet I believe so make sure the browser version you are using supports it (most of them should support it nowadays though).
I want to make this page look the same across all browsers. Specifically, I want the wrapping point of the text to be exactly the same on all browsers so I can create a PDF version with 100% accuracy. Check this out in FF vs. Chrome, for example.
http://santaspencil.com/desktop/embedded-test/embedded-fonts-test.php
Questions:
- Can it be done?
- Are there alternatives that don't require the user to download a plugin?
You should consider embedding the font file into your CSS. But as usual stone-age IE can not do this as you will need to include an EOT font file on your server.
http://base64fonts.com will convert your font files to base64 and then produce a css code for you to copy and paste in your html. this will help with insuring your font loads across browsers (except IE).
Good luck
... I want the wrapping point of the text to be exactly the same on all browsers ...
Bang head here (sign on brick wall). Web technology doesn't even try to do this. If you figure out a way to provide your own font -such as embedded webfonts- you can SORTA make it work. But if 100% is your goal, you might as well give up sleeping.
One of the neat things about browsers is their "liquid layout" capabitity, automatically rendering a page differently on a tablet than on a desktop to fill the different screen sizes for example. One of the prices you pay for this infinite rerenderability though is inability to specify the appearance exactly. Besides, edge cases will always arise and bite. For example if the available line is 0-73 units and the text you want to put in it is 74 units long, does it "fit" or not??? (i.e. does zero count? and is using up the very last unit a "fit" or an indication of the need to "wrap"?)
The only way to have browsers render your exact appearance is to give them what appears to them to be an image. Displaying the text on your screen, taking a screenshot of it, and making that screenshot into a *.GIF is one way.
A PDF file works too, as it appears to a browser to be a "funny" image with its own rendering engine. Most rendering engines are probably the same (i.e. the ones from Adobe) even if the browsers aren't the same, so it's much more likely to work. Providing PDF documents on the web works pretty well and is pretty widely supported. If a URL looks like http://yoursys.yourdomain/yourpath/yourfile.pdf most browsers will fetch it and start their PDF rendering tool and display it directly ...usually INside the browser window so the user isn't even aware of a different application having been used.
As to the last part of your question, it's the wrong question. It should be "solutions that don't require a plugin THE USER DOESN'T ALREADY HAVE". The advantage of a PDF plugin is the vast majority of users already have it. Not all plugins are evil/inconvenient ...just the less common ones (or the Flash plugin if your target is iPhones where users aren't even allowed to download it:-).
good luck!
This is probably way too late, but I did not know this until today. There is something called a non-breaking space, represented by in HTML, you can use to prevent unwanted line breaks or other such thing. Wikipedia has a pretty good writeup on it.
http://en.wikipedia.org/wiki/Non-breaking_space
Generally, what's the best way to tackle a layout bug in IE6? What are the most common bugs or problems that one should look for when trying to figure out why your page suddenly looks like a monkey coded it?
First Things First
Get yourself the Internet Explorer Developer Toolbar. It's a life saver and works great with IE6 and/or IE7. It's no replacement for Web Developer Toolbar or Firebug for Firefox, but it's better than nothing.
Know Thy Enemy
Read up on the quirks of IE — particularly hasLayout and overflow and the like. There are also many CSS niceties that you'll have to either do without or find alternatives. Look into how many of the popular JavaScript toolkits/frameworks/libraries get around different issues.
Rome Wasn't Built in a Day
The more you have to work with it, the more you'll remember off hand and won't have to lookup as often. There's just no replacement for experience in this. As several have pointed out, though, there are great resources out there on the net. Position Is Everything is certainly up there.
http://www.positioniseverything.net/ will certainly address your problem.
It provides comprehensive and in-depth descriptions of browser bugs along with options to work around them. A must read, in my opinion,
One good way to start learning about how IE happens to be mangling the page is to turn on red borders on different elements with CSS (border: 1px solid red;). This will immediately tell you whether it's a margin problem or a padding problem, how wide the element really is, etc.
The box model is usually the culprit. Basically what this means is that any div you are trying to position and use unsupported CSS with will cause this problem.
You may find it happens if you are using min-{width,height} or max-{width,height}.
this provides a great reference for checking compadibility with different versions.
http://www.aptana.com/reference/html/api/CSS.index.html
Noticed that Marc's post is at a -2 =D. He's only saying "resort to tables" even though they blow, because in sucky browsers like IE6, some of the broken CSS commands work in tables only (who know's why... dam you Bill Gates!!!). Here's a good reference to see what works and doesn't work as far as CSS goes. http://www.quirksmode.org/css/contents.html . It's a great reference to check on what cool effects work/don't work with various, widely used browsers. Also, always have a go-to plan for users who browse with IE6 (even though it's just about as old as mechanical dirt) as many businesses still use older browsers (including non-profits/3rd world countries etc.) So by all means, create the bugged out drop-down menu that looks WAY better than a standard horizontal menu, but create a secondary one specifically for IE6 that becomes the default when the page receives a request from an IE6 browser.
how do you define layout bug? the most frustrating layout implementation (i don't know if this should be defined as bug) in IE is we need to always specify style="display:inline" in the HTML <form> tag so that a blank line won't appear to disturb the form layout.
This question I believe has far too much scope.
Validate your code, and if pain persists, well, good luck.
The only real solutions, as with any other ballpark bug type are to google for a solution, or ask somebody who knows, ( ie: give the exact problem to us here at stackoverflow ).
You can use the IE Dev toolbar to glean an Idea, but many of the bugs are random, inexplicable, and esoteric. IE: the guillotine bug, the random item duplication bug, etc etc, the list goes on, and you can spend hours literally goofing with stupid variables everywhere and achieve nothing.
I have a simple strategy that works every time.
First, I develop the site using commonly accepted CSS to look good in Safari and Firefox 3. See w3schools.com for details on browser support.
Then, I go into IE6 and IE7 and alter the CSS using conditional includes.
This is hack free and lets you handle different browsers (IE6 and IE7 have separate issues).
Most of the issues you'll find come from unsupported features in IE (like min-width), errors in the box model (IE adds unseen extra padding (3px) to some boxes), or positioning issues. Go for those first as they are often the issue.
A common problem is padding not getting added to the width of a block element. So for layout div's, avoid using padding and instead use elements within them to define the padding.
I use Rafel Lima's Browser Selector when I need to tweak differences between IE/Standards browsers. It greatly reduces using "hacks" in your HTML to solve common problems.
You can target CSS statements for different browsers, or even different versions of browsers (Hello IE 6). It's very simple to implement, but requires the user has JavaScript turned on (most do).
.thing { ....}
.ie .thing { ....}
.ie6 .thing { ....}
We had a floating div issue that was only evident in a particular version of IE6. It was fixed by downloading the latest service pack.
In theory, use CSS compatible with IE6 layout bugs, utilise only well known workarounds (css and html filters) and code for them in a way that wont break forward compatibility, test for quirks/strict mode.
In reality, resort to tables.
Making a web page display correctly im all major browsers today is a very time consuming task.
Is there a easy way to make a CSS style that looks identical in every browser?
Or at least do you have some tips to make this work easier?
I agree with all the "reset" suggestions and the "grid" framework suggestions, but I did want to add a bit of advice: The goal of identical in every browser is, in practical terms, unachievable because you cannot control the client. Case in point: fonts.
You declare your font styles in CSS but some Linux machines, some Macs, some mobile browsers -- will not have the font you specified. This variation leads to differing text lengths and wrapping. Then there's the variance of browser versions and operating systems running each; how different browsers implement zoom features; and the text size can be adjusted by the end user. Identical rendering is simply an unachievable goal.
But take heart! This is the "art" part of CSS: Being able to be flexible in your design such that variances between browsers, operating systems, and end-user adjustments are handled elegantly. Don't strive for identical rendering -- you should strive for brand consistency + appropriate experience + flexibility.
try using a css reset like the eric meyer reset or the YUI reset. will help but no easy or perfect way to make things look identical in every browser
Organize your work flow in the following way and it'll reduce a lot of time wasting.
Make sure you declare a doc-type.
Use one of the reset methods others have mentioned here.
Work on your structure
Avoid using width and padding on the same element where you can.
Always think of reducing unneeded HTML and css rather than adding all the time.
Try not to use margin left and right when floating elements.
If you stick to those items, a lot of the most common issues will not appear.
PS One item I forgot to mention was make use of the validators over at W3.
I've always created a basic CSS style sheet which works in W3C Fully compliant browsers like firefox and then created alternative browser specific style sheets to fix any styling issues in other browsers, i.e. IE6, IE7 etc.
You can use the following code within the HTML to select appropriate IE style sheets.
<!--[if lte IE 6]>
<link href="/css/eqtr_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
You can also use online websites such as browsershots to view your site in different browsers.
It is time consuming at first, especially if you are stilling learning the ropes of DIV+CSS. However after you've done enough practice and met enough of problems and got them all solved, you will have the knowledge of what WORKS and what DOESN'T WORK.
It is then you know how to write the most compatible style possible in the first place, thus saving all the time in degugging and rarely have any problems with any of the major modern browsers: IE6, IE7, FF2, FF3, Opera 9, Safari 3 Win / Mac.
Yes, it is possible and as easy as it can get. Practice and conquer them one by one, then you know how to do things right in the first attempt.
Well the only baffling monster should be IE6 I guess. It's inbrowser. Other than that, ff2, ff3, opera 9, safari win / mac, ie7, ie8 are relatively similar in the rendering engine, at least with much less bugs than it has with IE6.
I have a few best practices for you (one who has just begun their trip in CSS) in coding to get the max CSS compatibility:
Use a reset first. It clears your mind and makes sure each step of your job.
Don't use padding (left and right) and width on the same element unless you know well how that'll work out.
If an element is floated, give its parent overflow:hidden and height: 1% if the parent does not already have a height.
Don't give an element both margin-top or margin-bottom but only margin-top or margin-bottom. Because margins of adjacent elements collapse into one another, making the positioning somewhat unpredictable for novices.
If an element is floated, give it display:inline.
Don't rely on z-index unless your scripting needs it.
If anything weird happens in IE6, use height:1% on that element.
According to my experiences, these are things that will really really help you in solving potential problems. Use them and they eliminate your chances of stumbling upon any time consuming problem by 80%. Actually there are more trivial tips than these when dealing with specific tags but let's call it a day.
The Yahoo css foundation will help. To standardise formatting you will want reset and base.
Make sure to include the proper DOCTYPE.
I still see people regularly coping with box model issues because they forgot to include a doctype. Without the proper doctype Internet Explorer renders in "quirks mode", and so do other browsers to a lesser extent. If you include the proper doctype, browsers switch to "standard mode" and behave very similar to eachother.
Other then that, if you do this for a living you will rapidly pick up and remember those subtle corner cases where IE interprets things slightly different from Firefox, etc. With some experience it is entirely possible to design the entire page in your favourite browser and only make very tiny tweaks to the CSS to make it render almost pixel perfect in other browsers.
First of all you could try a reset, like some other people mentioned here, you can do a quick margin and padding reset with this piece of css:
*{margin: 0; padding: 0}
When you design your css make sure you're using a modern, standars compliant browser (personally I would recommend firefox 3 which has an excellent web developer toolbar, with which you can edit css from within your browser). Doing this will certainly make your site look ok in all the new browsers.
Most of the layout problems you'll have will probably be caused by Internet Explorer's wrong interpretation of the box model, you can avoid this by never setting a width and margin or padding at the same time. This might seem annoying but it's not, just apply the padding or margin to the content which is inside your element which has a width set.
Of course more problems exist but this is probably the most common and annoying one, for more specific issues you can always try google. Also, lately I'm considering to ignore IE6 and older browsers if my site's audience allows it, on a web design site you'll never find anyone using IE6, right? Of course this is not possible often since many (crazy ;)) people are still using IE6.
Also, if you need to test your site browsershots is a free way to do it quickly.
Test your CSS on all the browsers as you go. It's awful to get it pixel perfect in your pet browser only to find that it's way off in other browsers.
Taking this approach will ease you into an understanding of what will work on all the major browsers.
I've had success using the Eric Meyer CSS reset available here. It basically overrides a bunch of browser CSS styles that are default. Having said that, there are still a lot of differences (probably some of the ones that are troubling you like box model differences, etc. In that case, it might be better to use Blueprint to handle most of your css.
Using CSS Reset will give everything the same starting point, but won't do much to help with the changes you make beyond that starting point. I can't say there's really any easy way. One solution is to stick to a limited set of CSS that you know works well in all browser you want to support. You may not be able to do a lot of the fancier CSS stuff, but your CSS debugging time should come down considerably.
You might also look at a framework for css like Blueprint or css-boilerplate or the yui grids framework. Usually, these frameworks set you up with a standard set of css class definitions that you can apply to elements to lay them out in a specific and defined way.
If it needs to be pixel-perfect, then you'll need to use px in your stylesheets. Use a css reset stylesheet, then size everything based on pixels.
To ensure that your css is rendering correctly in different browsers, you might find a service like BrowserShots useful, however, I think you'll find it very difficult to get absolute consistency across all browsers.
My personal preference is to use correct markup and css, leave out any browserhacks, and design layouts to degrade gracefully.
Conforming to a strict doctype will take care of many of the differences as well. Also, I generally add a <div> tag to encase everything within the body, because I've noticed a difference in how firefox vs ie handle the body tag as a top level element.
I like developing against Firefox first, often using Yahoo's YUI for reset (and grids for basic structure of the page), and using IE conditional directives to override formats that IE, in all its–a-hem–wisdom, handles differently.
index.html
<head>
<link rel="stylesheet" type="text/css" media="all" href="styles/yui/grids/base-min.css" />
<link rel="stylesheet" type="text/css" media="all" href="styles/yui/grids/grids.css" />
<link rel="stylesheet" type="text/css" media="all" href="styles/screen.foo.css" />
<link rel="stylesheet" type="text/css" media="print" href="styles/print.foo.css" />
<!--[if gt IE 5]> <link rel="stylesheet" type="text/css" href="styles/ie.screen.foo.css" /> <![endif]-->
</head>
Develop for Firefox first. You can test in other browsers but don't worry about fixes until it works just how you want it in Firefox. Then move on to the other standards-based browsers, namely Safari and Opera. If you've written good HTML and CSS it shouldn't require much work in these browsers.
Then move on to the beast of the lot, IE. Use conditional comments to target specific IE versions. IE 7 should be fairly easy, for IE 6 you may find you have to sacrifice certain parts of the design to get it to work easily. This is OK, IE 6 is on the way out so don't worry if you don't fully support it. Transparent PNGs are usually the biggest problem, AlphaImageLoader just doesn't do the trick in every situation.
As previously mentioned, a CSS reset like Eric Meyer's is a good starting point, use it to build your own reset based on your needs. Other than that the answer is simple: there is no silver bullet.
Do websites need to look exactly the same in every browser?
Apart from that, I guess practice makes perfect. And read about everything you can find about the potential issues you can stumble upon. Using reset-files, correct doctypes, validators and frameworks might help you to a certain extent, but in the end you are in control of the code and only you know exactly what you want it to look like. The code might be valid and the browser might do exactly what you've told it to, and it still does not look like what you want it to.
The more you use CSS for layout purposes, the more problems you'll encounter, the more problems you'll find a way around and the more you'll learn. After quite a few years of making layouts entirely with structured, semantic HTML and neat'n'tidy CSS I seldom have to spend a lot of time correcting flaws in one or another browser.
Use a reset snippet
Develop with web standards
Validate your markup and CSS
Don't use margin and padding on the same parts of an element
Use IE conditionals
Test in all the browsers you want to support
Understand that nothings going to be perfect, but you can get pretty close.
The Yahoo User Interface (YUI) has a CSS Reset implementation which seeks to form a common baseline across all browsers. This should get you pretty close.
This is really a hard question to answer -- all browsers? Does this mean all versions? Mobile browsers? Just the "mainline" ones (opera, firefox, ie and safari)?
You won't find even full compliance on CSS level 1 stuff, so there are going to be some tweaks you're going to have to make. In my experience opera, firefox and safari all behave similarly when it comes to basic stuff (positioning, floats, divs, etc) and it's just IE you'll have to tweak for.
You could also use a tested CSS library or framework like yahoo grids (http://developer.yahoo.com/yui/grids/) or a programmatic interface like google's web toolkit (http://code.google.com/webtoolkit/).
I tend to find that identical looking CSS comes about if I use floats to layout the page in boxes. The flow model works as you think it should, and they're faithfully rendered in all major browsers.
I know some would tell me that the use of a lot of floats is wrong, but it works surprisingly well.
At the basis there is no guarantee that such a thing will ever work perfectly. As long as the browser developers find ways to do their own thing rather than the 'standard' way of doing things, you will have differences.
I've had positive results using the Yahoo User Interface Base CSS, but in the end even that couldn't cope with the more complex items that should be possible with CSS.
In the end I went for a less-than-perfect solution and simply made my framework check if I had set up browser-specific stylesheets.
Here's a PHP snippet to illustrate. Sorry for the language-specific solution, but I guess the idea is clear enough to implement in different languages:
$sHTML .= "\t\t<LINK rel=\"stylesheet\" type=\"text/css\" href=\"".$sURLCSS.$sStyle."\" />\n";
if (file_exists($sPathCSS.$sFileStyle."_".BROWSER_AGENT.".".$sExtension))
$sHTML .= "\t\t<LINK rel=\"stylesheet\" type=\"text/css\" href=\"".$sURLCSS.$sFileStyle."_".BROWSER_AGENT.".".$sExtension."\" />\n";
if (file_exists($sPathCSS.$sFileStyle."_".BROWSER_AGENT."_".BROWSER_VERSION.".".$sExtension))
$sHTML .= "\t\t<LINK rel=\"stylesheet\" type=\"text/css\" href=\"".$sURLCSS.$sFileStyle."_".BROWSER_AGENT."_".BROWSER_VERSION.".".$sExtension."\" />\n";
With no missing files, no unrecognized tags or other code that might choke some browsers, the pages from the framework render as we want them to render in all browsers requested by our clients. More importantly, they do so without producing errors (i.e. an empty Error Console in FireFox) which makes debugging when you actually do run into an error a lot easier.
I'd recommend taking a look at Blueprint and 960 Grid System.
Besides doing resets and including CSS fixes for Internet Explorer, they'll both give you an easy to work with design grid that will take care of a lot of the tedious tweaking when building CSS-based layouts.
I usually develop against the W3C CSS validator, then verify things look the way I want them to in the respective browsers. Validating goes a long way toward consistent behavior.
Sometimes I'll strip the page down to only styles that validate and show properly in the major browsers I'm targeting, sometimes I'll supplement it with browser-specific tweaks as other posters have mentioned.
css frameworks certainly help, although they can easily be heavy due to a heap of styles that you won't need or use.
check out
Targeting IE Using Conditional Comments and Just One Stylesheet over at Position is Everything for a great technique to feed IE version-specific styles without using CSS hacks; this allows you to keep style rules together by selector rather than by browser.
You're asking the wrong question, because here's the only way to answer that:
<!DOCTYPE html>
<html>
<head>
<style>* { background: #fff }</style>
</head>
<body></body>
</html>
Not much of an answer, is it? :)
Everyone else is right here - make your CSS work in every browser, don't try to make it look the same. You can't.
Applying the Design Tinfoil Hat
CSS:
*{display:none}