Skip to main content

Home/ Web Development, Design & Programming/ Group items tagged reference

Rss Feed Group items tagged

Soul Book

A List Apart: Articles: How to Size Text in CSS - 0 views

  •  
    "When pixels failed before, we turned to ems. Repeating the logic gives us the following styles: body { font-size:100%; line-height:1.125em; /* 16×1.125=18 */ } .bodytext p { font-size:0.875em; } .sidenote { font-size:0.75em; }"
Soul Book

CSS techniques I use all the time - 0 views

  • EM calculations Sizing text is always an important part of making a usable design. I start all my CSS files with the following rules: html { font-size:100.01%; } body { font-size:1em; } The explanation for this comes from "CSS: Getting Into Good Coding Habits:" This odd 100.01% value for the font size compensates for several browser bugs. First, setting a default body font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. The current "best" suggestion is to use the 100.01% value for this property.
  • I used the following calculation: 14px/16px = .875, 18px/16px = 1.125. So my default text at 1 em would translate to 16px for most users, and my small text I sized at .875em which I can trust to result in 14px for most users, while my large text I sized at 1.125em which I can trust to result in 18px
  • Safe Fluid-width Columns I work with hybrid fluid layouts all the time, usually with max-width set at anywhere from 900 to 1000px. I usually have floated columns with percentage widths, and browsers will calculate these percentage widths to whole pixel values when rendering the columns.
  • ...3 more annotations...
  • A typical problem is the following: when a user has the viewport at a size that makes the outer container 999 pixels wide, if the first column is 60% and the second is 40%, IE 6 will always calculate the two columns as 600 and 400 pixels and as a result, the two will not fit (600+400 = 1 more than 999) and it will drop the second column. This is obviously not intended behavior, and in a world where we still have to use floats for columns (I can't wait for display:table support across all browsers), it's important to work around this problem. I used to give my last column 1 less percent (in this example, it would have 39% instead of 40%, but this would usually result in columns that don't quite fill up the container. Of late I have been giving the last column .4 less percent (in this example, 39.6%), which seems to work perfectly. Browsers will calculate this width and round up, but it will still fit even with an odd container width like 999px and I won't have to worry about dropped columns.
  • Filtering for Old Browsers To be honest, I barely support IE 6 nowadays. If there is something special about my layout that doesn't work in IE 6, I will simply filter it out of the CSS that IE 6 understands
  • Because old browsers like IE 6 don't support the "first child" selector (right caret >), I can do the following to make sure that IE 6 only gets the basic setting and all the new-fangled browsers get the right result: div#container { width:900px; } html>body div#container { width:auto; max-width:900px; } /* This overrides the previous declaration in new browsers only, IE 6 simply ignores it. */
  •  
    Excellent simple collection of CSS tips that are easy to remember and implement. It's an old article, but i think everything is still relevant
Herb Tucker

The Linux Cookbook: Tips and Techniques for Everyday Use - Table of Contents - 0 views

  •  
    Very good resource.
liza cainz

Efficient and Secured Computer Support - 1 views

Several months ago, I decided to change my Microsoft Windows support provider. The Microsoft help company I was using was not proficient in what they do. A friend of mine referred HelpGurus Compute...

support service Desktop computer technical services PC tech

started by liza cainz on 10 Feb 11 no follow-up yet
awqi zar

Python Tips, Tricks, and Hacks - Siafoo - 2 views

  •  
    Want to write shorter, cleaner code? Have an unfortunate situation where you need to fit as much as you can in one expression? Prefer a quick dose of hacks to spending the rest of your life reading the docs? You've come to the right place.
Jochen Burkhard

JavaScript Garden - 0 views

  •  
    JavaScript Garden is a growing collection of documentation about the most quirky parts of the JavaScript programming language. It gives advice to avoid common mistakes, subtle bugs, as well as performance issues and bad practices that non-expert JavaScript programmers may encounter on their endeavours into the depths of the language.
Gemma Weirs

W3C QA - Recommended list of Doctype declarations you can use in your Web document - 0 views

  •  
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
jdr santos

CSS Discuss - 9 views

  • This Wiki is dedicated to real-world (and ideally, browser-neutral) application of CSS (Cascading Style Sheets). Topics include: techniques for page-layout and special display-effects, testing and validation, workarounds for limitations and bugs, CSS code-editors, beginner and advanced tutorials, and to a lesser extent pure CSS theory, and pure CSS power-demonstrations. Discourse on (X)HTML, DOM, and other webpage- technology areas is not forbidden, but keeping it associated with CSS is encouraged.
  •  
    This Wiki is dedicated to real-world (and ideally, browser-neutral) application of CSS (Cascading Style Sheets). Topics include: techniques for page-layout and special display-effects, testing and validation, workarounds for limitations and bugs, CSS code-editors, beginner and advanced tutorials, and to a lesser extent pure CSS theory, and pure CSS power-demonstrations. Discourse on (X)HTML, DOM, and other webpage- technology areas is not forbidden, but keeping it associated with CSS is encouraged.
« First ‹ Previous 101 - 120 of 190 Next › Last »
Showing 20 items per page