Jeffrey Zeldman Presents /* Position Is Everything */ — Modern browser bugs explained in detail! A library of DHTML and AJAX scripts - DHTMLgoodies.com Bugs and Workarounds css/edge Please note that none of the demonstrations in css/edge are intended to work in Navigator 4.x. I say this not to denigrate that browser, but instead to spare you any frustration you might otherwise feel. This site exists to explore the cutting edge of HTML+CSS design, and Navigator 4.x is, at four years and counting, just too old to keep up with most things that will be done here. Again, there's nothing wrong with Navigator 4.x, but you probably don't want to use it in this area. Consider it a friendly warning. Welcome to the edge What is this? Expanding our horizons For the last seven years, we've been pushing Web design further and further down the same path. Like tables, there is another highly limiting structure that's composed of rows and cells: a prison. css/edge is intended, first and foremost, to be as relentlessly creative with CSS as we have been practical all these years. Inclusion Criteria Copyright
The Tan Box Model Hack Set for printing When breaking out of using tables and moving toward using Cascading Style Sheets (CSS) positioning for laying out elements on a page, it is important to become familiar with the W3C Box Model. At first, the box model may be confusing, but it is a necessary concept to grasp. Unfortunately, simply understanding the W3C box model is not the only thing you need to make your web pages look similar in different browsers. Come along as we explore the Box Model, the browsers that get it wrong, and what to do about them. Note: While layout editors are very good at tabled layouts, and applying CSS to those layouts, the current state of browser development leaves much to be desired when attempting CSS positioning. This article is intended for people familiar with with CSS syntax and usage. A table structure consists of rectangular cells within a rectangle. If the box has no given dimensions, it is called "fluid" or "liquid." Let's make a simple box and see how it works.
Complex Spiral Consulting: Publications A collection of articles, white papers, and other material that is of general interest and freely available to all visitors. Many of these were written to address commonly encountered problems in standards-based design, and based on situations we've encountered while working on client projects. Uncollapsing Margins Although margin collapsing usually does what authors want, even if they don't realize it, there are cases where authors will want to effectively disable collapsing. Find out how you can do this when it's necessary. (3 November 2004) Containing Floats You may have stumbled across a situation where a floated element sticks out of its parent element, causing mayhem. Rounding Tab Corners When creating a "navbar" across the top of a page, an author might want to make the links look like folder tabs. Elsewhere Going To Print — Explore the ins and outs of creating a print stylesheet for an existing Web site; in this case, the famous A List Apart.
Most used CSS tricks Earlier before I have written an article about current best CSS hacks which you can see here And now here’s the list of today’s most used CSS tricks – tips. I have added image examples for most of them because of critics on CSS hacks article. If you think I have missed any please let me know 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12.
CSS Positioning Review the W3C CSS standard recommendation. To use CSS for layout effectively, it helps to know how it's used to position page content. This article gives an overview of the methods and rules that govern visual rendering in the CSS2 specification. Although the specification applies to any device for displaying web pages, this article focuses on how it works in browsers. It's important to remember that a given browser may not support a given feature or may even implement it incorrectly. The Box Model To understand positioning in CSS you must first understand the box model. content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content margin border padding content Margins are always transparent. Box Types There are two basic types of boxes, block and inline. Normal Flow
The Box Model Problem IE5 Set for printing Let's take the code for the example box above and apply the Tan hack to it. Don't panic! This is really easy, trust me. First, look closely at the hack. See the star at the beginning of the selector? Well, "html" is supposed to be the root element. However, all other browsers see "html" as the true "root" element, and so the star can't refer to any real element. In this way we have gotten IE's sole attention, and now the task is to feed that "width: 130px;" to IE5.x/win and not to IE6 or IE5/mac. Tip: In the hack selector, the star and "html" parts are required, but the div I gave as an example would, in practice, be replaced by the element to be targeted. Now, let's look at the hack again: The "width" for standard browsers has already been given in the main (non-hack) code block, and all IE browsers now see and apply "width: 130px". Most important is the placement of the escape. Note: using an <? Look at the top comment. Page 2 of 2 Previous 1 2 Download Support Files