background preloader

CSS Hacks

CSS Hacks
Dealing with browser inconsistencies often makes up a majority of the work for a web designer. Sometimes there is no reasonable way to accomplish a desired layout in all major web browsers without the use of some special exception rules for certain layout engines. Hacks necessarily lead to potential complications and should be avoided whenever possible, but when the circumstances require hacks to be used, it's best to know what your options are and weigh the consequences appropriately. In-CSS hacks Up One of the drawbacks of conditional comments is that they require changes to the HTML source. Easy selectors Most in-CSS hacks deal with selector bugs. IE 6 and below * html {} IE 7 and below *:first-child+html {} * html {} IE 7 only *:first-child+html {} IE 7 and modern browsers only html>body {} Modern browsers only (not IE 7) Recent Opera versions 9 and below html:first-child {} Note that the hack for IE 7 and below is actually two separate selectors: one for IE 7 and one for IE 6 and below. <! ! ! !

30 Incredibly Useful WordPress Hacks WordPress is without doubt one of the best publishing platforms available and it’s functionality and flexibility mean we have the ability to completely customize our installation and theme. However sometimes a plugin isn’t enough to give us the functionality we need, that’s where ‘hacks’ come in. This is a compilation of some of the best Hacks available to help unleash the full power of WordPress. 40+ Most Wanted WordPress Tricks and Hacks 14 WordPress bloggers share the hacks and plugins they are really looking for to enhance their blog in any aspect. 63 Essential WordPress Hacks, Tutorials, Help Files and Cheats A comprehensive list of the Best WordPress Tutorials, Hacks, Help Files and Cheat Sheets to make life easier and to help you expand WordPresses functionality. Excellent WordPress Theme Hacks Selection of WordPress tricks on how to make a better WordPress theme, focusing more on the frontend development. 10 Useful WordPress Hook Hacks 9 WordPress Hacks to Encourage User Interactivity

Clearance I recently revisited Alex Robinson’s One True Layout while preparing for an upcoming speaking gig for AIGA Baltimore. After playing with Any Order Columns I was still disappointed by the fragile nature of float-dependent layouts. One text size increase too far or an image too wide and bam! there goes the neighborhood. I’ve never been completely satisfied with my method of clearing absolutely positioned elements either though. Rethinking the Problem Absolute positioning is by far the most reliable way to position something with CSS. Regarding IE Win It’s worth noting that IE Win can act unreliably when the positioning context is a certain element (usually inline elements). Gotchas Unfortunately once we position those elements absolutely, they are taken out of the flow of the document and the containing element collapses. We can avoid this pitfall by positioning the tallest contained element relatively (using the same top and left coordinates). Absolutely Final (For Now) Some example usage:

55+ Most Wanted WordPress Tips, Tricks, and Hacks There are times when you come across a feature in a blog, and you just start thinking to yourself: How can I get this in my WordPress blog/site as well. Everybody have experienced this feeling. Sometimes you know you want it, and don’t know where to look for, or even what to look for. In this article we will be sharing some of the most wanted WordPress Tips, Tricks, and Hacks that you will definitely find useful. These tutorials are classified under various skills level. WordPress Theme Cheat Sheet for Beginners 1. This is one of the most wanted hacks that users want to know how to accomplish. You can change the template name. Once you have published this page go to Settings » Reading in your admin panel. And select your page to be the homepage. 2. Have you ever been to a site and saw this cool feature? You would need to follow the trick #1 in this article to create a custom page template. We have a Quick Reading Page on our site as well, so you can see this trick in action. 3. 4. 5. 6.

On having layout — the concept of hasLayout in IE/Win A work in progress. This version: Rev. 8 2008–11–16 Changelog Translations Table of contents Introduction A lot of Internet Explorer's rendering inconsistencies can be fixed by giving an element “layout.” hasLayout — A Definition “Layout” is an IE/Win proprietary concept that determines how elements draw and bound their content, interact with and relate to other elements, and react on and transmit application/user events. This quality can be irreversibly triggered by some CSS properties. Microsoft developers decided that elements should be able to acquire a “property” (in an object-oriented programming sense) they referred to as hasLayout, which is set to true when this rendering concept takes effect. Nomenclature We speak of an element “gaining layout” or say that an element “has layout” when the Microsoft-proprietary property hasLayout is set to true for it. In “non-layout” elements, hasLayout is not triggered, i.e. a pure div without a dimension can be a “non-layout ancestor”. Properties Lists

10 Useful WordPress Loop Hacks - Smashing Magazine The loop is a very important aspect of WordPress blogs. In fact, the loop is what allows you to get posts from your WordPress database and print them on the screen. A set of useful and user-friendly functions, the loop is incredibly powerful. With it, you can get a single post, a list of posts ordered by date, title or category, a list of posts written by a specific author and much more. In this article, we’ll show you 10 useful things you can do with the WordPress loop to make your blog even more powerful than it is right now. You may be interested in the following related posts: 1. Image source: Shutterstock The problem. The solution. <? Code explanation. As a result, the “WHERE” clause contained in the filter_where() function is added to the end of the SQL query contained in the post_where() function, which means that the loop will return posts published only between the two dates specified in the filter_where() function. Source 2. The problem. The solution. Code explanation. 3. <? 4. 5. <?

CSS Browser Hacks For Firefox, Opera, Safari & IE While I strongly advise using hacks at a minimum especially when it comes to CSS there is a time and a place for them, especially when you need a quick way to target a browser other than Internet Explorer. CSS Hacks: The Problem Most standards favoring browsers (Firefox, Opera & Safari) have no method of targeting CSS to the specific browser while Internet Explorer, the buggiest browser, has a completely safe and easy method of serving CSS/HTML to only IE. The Setup To show that the hacks are working correctly I created 6 paragraphs with their specific browser/version identifier within them. This will let you know that the hack is working correctly <p id="opera">Opera 7.2 - 9.5</p><p id="safari">Safari</p><p id="firefox">Firefox</p><p id="firefox12">Firefox 1 - 2 </p><p id="ie7">IE 7</p><p id="ie6">IE 6</p> Next I automatically hid all P tags: Targeting Internet Explorer With CSS Using Conditional Comments The easiest way to target IE is with conditional comments. Targeting Firefox With CSS

10 Fixes That Solve IE6 Problems We know IE is likely to be around for some time, but can we still support the browser and avoid hacks and conditional CSS? Here are 10 fixes to solve the majority of IE6 problems with valid HTML and CSS code… 1. Use a DOCTYPE You should always place a DOCTYPE at the top of every HTML page and a strict version is recommended, i.e. or, for XHTML: The last thing you need is IE6 going into quirks mode – it’s quirky enough already. 2. 3. 4. The easiest way to set hasLayout is to set a CSS height or width (zoom can also be used, but that is not part of the CSS standard). 5. ensure all floated elements use display:inline;use a margin-right:-3px; on the last floated elementuse a conditional comment as the last item in the floated element, i.e. <! See positioniseverything.net for a full description of the problem. 6. You should also use them for controls within JavaScript-powered widgets so they remain keyboard navigable. 7. Another option is to use advanced selectors, e.g. 8. 9. 10.

DD_belatedPNG 2011/4/8: This is no longer an actively maintained project. I apologize, I must move on with current events. This is a Javascript library that sandwiches PNG image support into IE6 without much fuss. You can use PNGs as the SRC of an <IMG/> element or as a background-image property in CSS. If you attempt the latter, you will find that, unlike with vanilla usage of AlphaImageLoader, background-position and background-repeat work as intended. As a bonus, "fixed" elements will respond to a commonly used set of Javascript style assignments, as well as the A:hover pseudo-class. Table of Contents Long story short, this uses Microsoft's implementation of VML instead of Microsoft's AlphaImageLoader filter. The intended implementation is pretty easy: Download a copy of the DD_belatedPNG Javascript file - please do not hotlink mine, I am on a shared host. Due to popular demand, here is some documentation for how to "fix" elements on a pick-and-choose basis. (Based on the normal usage approach)

ie6fixer Welcome to the IE6 CSS Fixer: starter kit page. A tool specifically designed to ease the pain of the ie6 css debugger. If you want to read up on all the specifics, I advise you to check the articles on the ideology, the specific fixes and the scope of this tool. It is extremely important to note that this tool is not a miracle solution. This tool was concieved to decrease the monkey work when starting an ie6 css fix file. Even though the status of this tool is still experimental, it has already proven its worth. 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). Internet Explorer 9 adds even more support for many CSS3 modules. 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). Introduction At-rules Selectors Element Selectors Attribute Selectors Combinators Pseudo-classes

/* Position Is Everything */

Related: