csshellandhowtodealwithit

How to reset CSS to sensible values

A conversation took place on the pyjamas-dev list in which Anthony advised the best practices for "resetting" CSS "standard" attributes back to sane and consistent cross-browser values. There is a discussion underway as to the best way to create default stylesheets (dynamically) for pyjamas apps, which may help out here. In the meantime, CSS is here to mess up your life. It's worth noting that this doesn't actually have anything specifically to do with pyjamas: you should really be using these CSS "reset" tricks for every single web application, and the fact that pyjamas uses web browsers and web browser engines makes it no different in that regard.

On Mon, Jun 28, 2010 at 5:37 PM, Giil wrote:
> Those are precious advises. I had a hell of a time with percentages in
> GWT.

yeah i struggled with it quite a bit at first too.  the tricks (and
these belong in the wiki, another TODO) are:

1) don't use a DOCTYPE at all.  we _want_ browsers to use quirks
mode... unfortunately standards mode pretty much makes 100% height
impossible (tables no longer respond to it).  GWT 2.0+ uses a
radically different layout system, and once we 'upgrade', the HTML5
doctype should be used.

2) use a minimal reset stylesheet.  reset sheets zero out/standardize
CSS attributes on every element so they behave consistently across
browsers.  build your needed CSS up from there.  i use this (slightly
modified meyerweb: http://meyerweb.com/eric/tools/css/reset/ ):

-------------------------------

/* reset/default styles */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    color: #444;

}

ol, ul { list-style: none; }
blockquote, q { quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;

}

:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }

table {
    border-collapse: collapse;
    border-spacing: 0;

}

/* pyjamas iframe hide */
iframe { position: absolute; }

-------------------------------

3) ensure the body/html elements consume the entire screen, always:

-------------------------------

html, body {
    width: 100%;
    height: 100%;
    min-height: 100%;

}

-------------------------------

4) make sure the font size on body is 1em, and font-size is 100% on
everything (IE bug).  default font size on all browsers is 16px.  by
normalizing to that, and using ems for everything, your containers
will scale with the font, an 'elastic' layout.  the 100% font-size
keeps IE from jumping huge amounts when users increase font-size (the
100% definition is in the reset sheet):

-------------------------------

body {
    line-height: 1em;
    font-size: 1em;
    overflow: auto;

}

-------------------------------

5) prevent ScrollPanels (interior scrolling) from pushing the layout
past 100% height.  this one is a little hacky, but it has the benefit
of being cross browser and CSS only (no onWindowResize hooks).  when
you want to use it, assign the .scrollpanel StyleName to the widget.
if that has problems, (IE only, inside StackPanel for some reason...)
assign both class names to the widget:

-------------------------------

.scrollpanel {
   margin-bottom: -10000px;

}

.iescrollpanelfix {
   position: relative;
   top: 100%;
   margin-bottom: -10000px;

}

/* undo part of the above (non-IE) */
html>body .iescrollpanelfix { position: static; }

-------------------------------

there are a couple other little gotchas, (mainly understanding the W3C
box model, and how different browsers behave [again IE sucks here])
but for the most part the above will get you 95% of the way to a
layout that always fills the screen, never exceeds the screen (unless
the window is very small or font-size is very large), and supports
interior scrolling.

C Anthony

IE7 tricks

i havent tried it w/pyjamas [yet], but i've have success with it in the past:

http://code.google.com/p/ie7-js/
http://ie7-js.googlecode.com/svn/test/index.html

it makes IE* more W3C compliant via javascript... since pyjamas
depends on JS anyway it should be a nice fit.  it enables you to use
position: fixed, along with many other improvements.

let me know how it goes if you try it out.