CSS Radial Backgrounds

CSS3 allows you to make radial gradients fairly easily. Unfortunately, you need six lines to cover all the browsers that support CSS3, but luckily all but the old webkit syntax are very similar.

http://www.impressivewebs.com/css3-radial-gradient-syntax/

Full Screen Background Image with CSS

Since the height attribute doesn't work so well in CSS backgrounds (100% will not actually cause your background image to scale to the full height of the window, for example), if you want a full screen background you'll have to go another route. Luckily, this solution is written up cleanly:

http://paulmason.name/blog/item/full-screen-background-image-pure-css-code

Simply copy #full-screen-background-image and you're good to go. The styling also works for DIVs.

CSS Selectors

I was trying to do some "advanced" CSS and needed a suitable guide (most of the ones out there are very basic). Here it is:
http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/

Using styles from a CSS stylesheet in BIRT 2.3+

In BIRT 2.2, I would import a stylesheet and then apply the styles to my report. Unfortunately, this isn't very maintainable. Luckily Ben has found a solution to load styles from an external CSS file though there are contraints:

• You must use BIRT 2.3+
• Tag styling won't work-- for example, tr { color:red } will throw an error-- you have to give the style a name like .myrow { color:red }
• The stylesheet must be in the same Eclipse project (project references are not good enough) at design time-- you can load from another location after deploying the report
• Your style names must be all lowercase-- BIRT saves the names in your report as lower case even if they have uppercase characters and then they won't work once deployed
  

Here is the procedure:

1. Upgrade Eclipse BIRT report designer to version 2.3.1
2. If fixing an existing report, delete all currently used styles
3. Right-click on "styles" in the outline, and choose "Use CSS file..."
4. Choose your css file
5. Check the box for "Include CSS file at view time" and enter
   /path/when/deployed/your.css as the URI (note: this option is missing in BIRT 2.2; if you tried to upgrade 2.2 to 2.3 read my other blog entry about how this is basically impossible)
   
6. There will be some errors if your css defines styles for tag names because BIRT doesn't like that. It only accepts class names. Just ignore it.
7. Format the report by right-clicking and applying styles from your css
8. Deploy the report

IE6 Quirks When Sizing HTML Elements

IE6 rolls with another party foul at the HTML kegger.

You can set the height and width of elements in Mozilla browsers to be 100%, or some percentage thereof.

Guess what.

In IE6 these elements will not appear. It doesn't seem to be enough to then use JavaScript to set the element width and height to a fixed value. They've got to start fixed.

IE6 actually allows a percentage width, but the height had better start out absolute or your element will just disappear-- in fact it will have a height of 0px, no matter what the IE debugger tells you.

Dynamically Adding Styles via JavaScript

This one is straight forward but then IE has to go and spoil the party. The idea is to create a style element and then append a text node containing your style information to it; then append the style element to the head of the page. Trouble is, IE blows up when you try to run createElement("style"). So you have to use MS' proprietary function. I won't bore you more, here is the code (replace YOURCSSTEXT):

var ss = null;
        if(document.createStyleSheet) // IE
        {
                ss = document.createStyleSheet();
                ss.cssText=YOURCSSTEXT;
        } else {  // All other browsers
                ss = document.createElement("style");
                ss.type="text/css";                ss.appendChild(document.createTextNode(YOURCSSTEXT));
                document.getElementsByTagName("head")[0].appendChild(ss);
        }

Browser Development Tools

Firefox

• Venkman - JavaScript debugger. Bit of a head scratcher at first-- you need to navigate to your source, set a breakpoint, and then load the page in FireFox. Execution will stop when the breakpoint is reached (note this means you also can't look up other webpages will debugging)
  
• DOM Inspector - allows you to navigate the DOM of a page loaded in Firefox. Just press Ctrl-Shift-I to load the Inspector
• Developer Toolbar - really handy tool bar that outlines elements and shows all sorts of other handy info; also allows editing of source and CSS in real time
  

Interner Explorer

• Script debugger - IE6 only - very buggy debugger. Crashes often. But it's the only way to see into IE's crazy mind.
  
• Fiddler and Fiddler 2 - plug-in that intercepts communications between IE and sites and logs it. You can inspect all sorts of data and edit it. I found Fiddler to be more stable, but Fiddler 2 has some limited support for HTTPS.
• IE Developer Toolbar - IE6 only - kind of like the DOM inspector for Firefox but in a toolbar
  

More CSS Styling

the format for styling elements is

element.class { property: value; property: value /* comment */ }

either element or class can be blank, but one of them has to be present, and if class is missing omit the period. this applies the properties and values you list inside the curly braces to all HTML elements which have class attribute set equal to the class you put after the period (if class is omitted, then it applies to all elements of that type).

For example

tr.poo { ... }

applies to all table rows which have class="poo" attribute on them.

tr { ... }

applies to all table rows, regardless of the class you set. Many CSS stylesheets you inherit style all elements of a certain type. You should be able to override the default (you probably don't want to screw with the default because it will screw up the rest of the stylesheet) by creating your own classes of elements.

There's one other variation on the element.class { .. } which is you can use a pound sign (#)

element.class#id { .. }

(you can even omit element.class and just have #id)

This applies the style to just elements with an attribute id equal to the name you put after the # sign

so tr id="fun" ... /tr (sorry I can't put the greater than or less than since it will be interpreted as html) could be styled with #fun { color: #775544 }

Look up w3schools on google to get a list of all the css properties. Common ones I use are:
font-size, font-face, font (this one combines all the font-... properties into one, the syntax is hard to remember though), padding (sets padding around a whole box), padding-left, padding-right..., margin, border (border: Xpx linestyle color), color (sets foreground text color format is hexadecimal #rrggbb), background-color and background (the one gotcha with background is if you want a background image, use the function url(...) but don't enclose the argument to url in quotes), width, height

if you want to understand padding, margin and border look up css box model. I believe padding is the space between the border and content inside a box; margin the area between the border and any neighboring content; border is just like word, you can set the thickness and dashed, solid, etc.

One other thing different from old school html is DIV and SPAN elements; a DIV is a box that can contain anything, a SPAN is an inline element, meaning its primarily intended for styling sections of text (like if you wanted to make the first few words of a paragraph bigger span style="font-size:20pt; color:grey" In the beginning /span there was nothing, OR, another handy one is to put an indent in a paragraph, use a span with a padding-left of like 15px that contains just some whitespace); a lot of the properties don't apply to SPAN. My products template mostly uses tables though because they are a lot easier to work with but I think the spans are really handy.

That's pretty much all I know. you can access the CSS properties using JavaScript via document.getElementById('

idofyourelement').style.propertyname

Simple CSS Styling

create a .css file
for example
stylesheets/forms.css

include in it data with the following format:

prototype for an HTML object:

//TEXTAREA
//{
// FONT-FAMILY: Tahoma, Arial;
// FONT-SIZE: 10pt;
//}

-or-

custom style:

//.textareaBig
//{
// FONT-FAMILY: Tahoma, Arial;
// FONT-SIZE: 10pt;
// WIDTH: 400px;
// HEIGHT: 185px
//}

in your object you can use class="stylename" with the leading period dropped, for example: (replace curly braces with > and <)

{textarea class="textareaBig"}blah{/textarea}

Style properties are beyond the scope of this blog...