Group items tagged resize - CSS Evangelist

shared by yc c on 14 Feb 07 - Cached

var rate87=new rateit(87, "26", "090%") rate87.displaytext("26") 4.5 CSS Gradient Shadow var rate74=new rateit(74, "72", "078%") rate74.displaytext("72") 3.9 CSS Thick Tabs var rate47=new rateit(47, "71", "080%") rate47.displaytext("71") 4 SuckerTree Vertical Menu (v1.1) var rate52=new rateit(52, "60", "074%") rate52.displaytext("60") 3.7 Overlapping horizontal tabs var rate51=new rateit(51, "128", "080%") rate51.displaytext("128") 4 Animated link underlines var rate50=new rateit(50, "78", "075%") rate50.displaytext("78") 3.8 SuckerTree Horizontal Menu <!-- <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xm
...

Cancel

shared by Frederik Van Zande on 14 May 08 - Cached

shared by Vernon Fowler on 10 Sep 12 - No Cached

The problem with em-based font sizing is that the font size compounds. A list within a list isn't 14px, it's 20px. Go another level deeper and it's 27px!
...

Cancel
The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that. html { font-size: 62.5%; } body { font-size: 1.4rem; } /* =14px */ h1 { font-size: 2.4rem; } /* =24px */
...

Cancel
We can specify the fall-back using px, if you don't mind users of older versions of Internet Explorer still being unable to resize the text (well, there's still page zoom in IE7 and IE8). To do so, we specify the font-size using px units first and then define it again using rem units. html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } /* =14px */ h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
...

Cancel
...3 more annotations...
I'm defining a base font-size of 62.5% to have the convenience of sizing rems in a way that is similar to using px.
...

Cancel
consistent and predictable sizing in all browsers, and resizable text in the current versions of all major browsers
...

Cancel
The compounding nature of em-based font-sizing can be frustrating so what else can we do?
...

Cancel

shared by Jonathan Mike on 30 Jun 10 - Cached

shared by Frederik Van Zande on 20 Jun 08 - Cached

Here is a quick summary for those of you who don't want to read the whole article: Always use strict doctype and standards-compliant HTML/CSS Always use a reset at the start of your css Use opacity:0.99 on text elements to clean up rendering in Safari Never resize images in the CSS or HTML Check font rendering in every browser. Don't use Lucida Size text as a % in the body, and as em's throughout All layout divs that are floated should include display:inline and overflow:hidden Containers should have overflow:auto and trigger hasLayout via a width or height Don't use any fancy CSS3 selectors Don't use transparent PNG's unless you have loaded the alpha
...

Cancel

shared by mikhail-miguel on 05 Mar 18 - No Cached

Group items tagged