CSS Compatibility and Internet Explorer The document is archived and information here might be outdated With each new release of Windows Internet Explorer, support for the World Wide Web Consortium (W3C) Cascading Style Sheets (CSS) standard has steadily improved. Internet Explorer 6 was the first fully CSS, Level 1-compliant version of Internet Explorer. Internet Explorer 8 is fully compliant with the CSS, Level 2 Revision 1 (CSS 2.1) specification and supports some features of CSS Level 3 (CSS3). Note It is important to remember that many CSS3 modules are still in the Working Draft or Last Call stages. If your Web site targets browsers that include earlier versions of Internet Explorer, you want to know the level of CSS compliance for those versions. Note CSS features that are new to Internet Explorer 8 will only work when your page is rendered in IE8 mode (or higher). This article's organization is loosely based on that of the CSS reference documentation on MSDN. Introduction At-rules Selectors Element Selectors Combinators
9 Most Common IE Bugs and How to Fix Them - Nettuts+ Internet Explorer - the bane of most web developers' existence. Up to 60% of your development can be wasted just trying to squash out IE specific bugs which isn't really a productive use of your time. In this tutorial, you are going to learn about the most common IE bugs and rendering disparities and how to easily squash them or deal with them. Interested? 1. Centering an element is probably something every web developer has to do while creating a layout. Consider the Following Code: The output you'd expect: But what IE actually gives you: This is mainly due to IE6 in quirks mode and below not recognizing the auto value we set to the margin property. The Fix The easiest and most reliable way to center content for IE6 and below is to apply text-align: center to the parent element and then apply text-align: left to the element to be centered to make sure the text within it is aligned properly. 2. Almost every web developer uses lists to create his navigation. And the IE screen shot: Fix #1 3.
The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible. Download this layout (25kb zip file). Percentage dimensions of the holy grail layout All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Vertical dimensions are not set so they stretch to the height of the content. Maximum column content widths To prevent wide content (like long URLs) from destroying the layout (long content can make the page scroll horizontally) the column content divs are set to overflow:hidden. 800 x 600 Left & right columns: 162 pixels Center page: 357 pixels 1024 x 768 Left & right columns: 210 pixels Center page: 459 pixels The nested div structure I've colour coded each div so it's easy to see: The header, colmask and footer divs are 100% wide and stacked vertically one after the other. No CSS hacks The CSS used for this layout is 100% valid and hack free. SEO friendly 2-1-3 column ordering Full length column background colours In this layout the background colours of each column will always stretch to the length of the longest column.
Internet Explorer box model is not a bug We often blame Microsoft and the team behind Internet Explorer for its lack of support (or misinterpretation) for standard CSS properties. However, there is at least one property that Microsoft interpreted correctly in my opinion and it’s the box model. Here’s a picture of the W3C box model compared to IE’s box model. This “misinterpretation” of the box model is considered to be a bug in IE. What’s wrong with W3C? Imagine you specify the width, padding and border of a particular DIV. With the standard box model (W3C): you have to reduce the width by 2 or 4 pixels (double the value because of each side) With IE’s box model: you don’t have to do anything, the DIV stays where you positioned it This will happen if you change the padding or the width of the borders. Why did W3C go with this model then? If it’s so bad then why did someone think it was a good idea? It may look alright in text, but practically it just doesn’t work. How can we use IE’s model?
HOW TO: Design & Program a Facebook Landing Page for Your Business Jonathan Goldford is a partner at Wired Impact, a web design company that builds websites for nonprofits. You can connect with Jonathan on Twitter and on the Wired Impact Facebook page. Right now Facebook Pages and custom landing pages are bigger than bottled water was on December 31, 1999. Michael Jackson, Lady Gaga, Starbucks, and the TV show House each have more than fifteen million "Likes" and are growing rapidly. While there are an enormous number of articles that talk vaguely about how to create a custom landing page, very few discuss the nuances of actually designing and programming one. Designing Your Company’s Facebook Page Actually designing a Facebook Page is very similar to designing any website, except for a few considerations: Design for a 520px Width — Facebook Pages must fit within a width of 520px. To take into account the 520px width and the distance for your Like button, you may want to take a screenshot. Programming Your Company’s Facebook Page facebook.html Regular HTML
Definitive Guide to Taming the IE6 Beast For years, Internet Explorer 6 (IE6) has been the bane of existence for web designers around the world. Designers and users alike have come to enjoy the increasingly predictable, standards-compliant behavior of great modern browsers like Firefox, Opera, and Safari. Meanwhile, IE6 continues to haunt our designs, lurking in dark places while dying a painfully slow, agonizing death. As we await that grand and glorious day when IE6 is as dead as Netscape 4, let us be mindful of the endagered species of users who, for whatever sad reason, continue to torture themselves with that terrible beast of a browser. So come now, let us celebrate these last days of IE6 with this definitive guide to taming the IE6 beast. In this comprehensive article, you’ll learn some of the best methods for supporting IE6, including proper targeting, specific hacks, image support, box models, floats, and everything in between. Use conditional comments to target IE6 <! Target and filter IE6 with “in-CSS” hacks max-width
How to Check Your Website with Multiple Browsers on a Single Machine (Cross-Browser Compatibility Checking) To Check Your Site for Cross-Browser Compatibility by Christopher Heng, thesitewizard.com We all know the importance of checking our web pages with multiple browsers, especially when we are designing a new layout for a website. This is the case even if we are writing validated standards-compliant code. The number of extant browsers we need to check with are enormous: Internet Explorer ("IE") 6 to 11, the current version of Firefox, the current version of Chrome (or Opera, which uses the same code), the current version of Safari, and so on. And then there are the different platforms: Windows, Macintosh (Mac), Linux, etc. Note that this article is written primarily from the point of view of a person using Windows (the majority of people reading this article), although it does address the issue of Mac browsers and Linux browsers as well. Firefox and Seamonkey It's possible for different versions of Firefox and Seamonkey to all co-exist on the same machine. And so on. Chrome, Opera and Safari
The IE box model and Doctype modes There are two things you should be aware of when developing CSS styled lists IE and the box model IE versions and Doctype modes IE and the box model Love it or hate it, Internet Explore for Windows is the main browser on the web at present. In simple terms this means that some versions of IE render the box model to a different width than other Standards browsers. The diagram below shows that if a content box is set to 200px wide with 20px of padding and a 20px wide border, the correct method of calculating the overall box width is: content (200px) + padding (20px+20px) + borders (20px+20px) = 280px. However, some versions of IE calculate the width as: content, padding and borders together = 200px. The solutions are to work around the problem using nested divs or use one of many box model hacks. IE versions and Doctype modes So, which IE browsers use the correct doctype and which do not? All HTML documents should start with the correct Doctype.
Home :: Dynamic Site Solutions How do you deal with Internet Explorer Video Screencasts #130: First Moments with Grunt There are all these tasks that we need to do as front end developers. Concatenate and compress our files. Run our preprocessors. #127: Basics of JavaScript Templating A template is a chunk of HTML that you need to inject onto the page. #126: Using Modernizr Should Modernizr be part of every modern web project? #124: A Modern Web Designer’s Workflow This is a presentation I gave at conferences in late 2012 and early 2013. It talks … #121: The Right CMS is a Customized One The perfect CMS to suite the needs of any non-trivial content-oriented website does not come out-of-the-box. #119: Let’s Answer Forum Posts! In this screencast we live answer more forums posts with no planning whatsoever. #117: Let’s Attempt To Do a “Pull Request” I’ve never in my life submitted a “Pull Request” on GitHub. #115: Don’t Overthink It Grids Even if the layout of a site is simple as a main content area on the left and a sidebar on the right, that’s a grid.
Web browser hacks, Css hacks - ie, firefox, chrome, safri, Opera CSS hacks take advantage of browser bugs for hiding CssRules from specific web browsers. Listed below are the hacks for major browsers like ie6, ie7, firefox2, firefox3, Google chrome, safari and opera. Inline Hack for IE* (star) can be used as the inline hack for both ie6 and ie7. IE6 browser inline Hack _ (underscore) can be using only for ie6 Firefox inline stylecontent:"\"/*" can be used for firefox only where IE cannot recognize it. Internal StyleUse * html for ie6 and *+html hack for ie7 IE7 and Firefox browser HackUse html>body hack for ie7 and firefox. Mordern browser Hack or Firefox HackUse html>/**/body {} hack which will support only in both firefox2 and firefox3. Hope this information will be useful for you. Labels: css hacks, firefox 3.5, google chrome, ie, opera, safari, web browser hacks
loadaverageZero - the design is in the Code