Related posts:

• CSS Sprites and a flickering problem in IE6
• Google Code Highlighter
• Cool typography tool & CSS Links

Related posts:

• Processingjs & Box2d Physics!
• Great HTML5 Canvas/ Chrome Demo sites
• Javascript Nintendo Emulator!!

Related posts:

• Javascript & CSS Minification
• Multiple domains to reduce site loading times
• JQueryUI

Well anyway, I’m just finishing off a fairly jQuery heavy site I’m building for my girlfriend as an online portfolio site and figured I’d minify the css and jQuery to reduce loading times (as all of my javascript includes combined come to around 100k)- found a really good java app writen by Yahoo(!) called the YUI Compressor – I combined all my javascript into one combined.js file then minified it nocking 30k off the file size.  Did the same with css only making a saving of 2-3 k, but every little helps!  Very easy to use, but it means you do have to install the java runtime

Related posts:

• JQuery Accordion Control links not working
• ASP.net update panel’s and jQuery
• Google Code Highlighter

Mastering CSS, Part 1: Styling Design Elements | CSS | Smashing Magazine.

Related posts:

• New site launch- natashahampshire.co.uk
• Flash backgrounds not showing in IE
• HTML5 & the Processing.js JavaScript library

* { outline: 2px dotted red }
 * * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }

No related posts.

Basically you download the zip file- unzip it and copy the javascripts and css files over, then add a few lines of code to the head of your page;

</p> <link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link> <script language="javascript" src="js/shCore.js"></script><br /> <script language="javascript" src="js/shBrushCSharp.js"></script><br /> <script language="javascript" src="js/shBrushXml.js"></script><br /> <script language="javascript"> dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code'); </script><br />

You then put your code in-between >pre< tags and set a name attribute to “code” and set the class to whatever syntax you have- it has support for a whole bunch of languages including c#, vb, php, javascript, css, sql and a whole bunch of others. You can grab this plug-in from here

The install was easy- but a couple of bits did catch me out- the code sample above was the example they give you in the install page. So I blindly copied over this code to the head of my blog, and copied all the files from the zip file over to my sites js and css folders. I found that html highlighting worked fine and so did c# but vb and sql weren’t happening… It eventually clicked that you need to add the references to the additional syntax types you need as the example only has a line for the CS and XML/HTML “brush” libraries. So I popped those lines in and it worked fine.

The other problem that I had, and indeed still have until I get home to actually edit the code, is compatibility with TinyMCE which is the editor used by default in BlogEngine. I found a couple of articles which might help with this but won’t know till tonight;

• TinyMCE Code highlighter Plugin to work with Google Syntaxt Highlighter
• TinyMCE configuration settings to help everything get along a little better

As mentioned on the Wiki pages there is also the issue that adding a name value to a pre tag, isn’t valid xhtml.

Related posts:

• Runaway Sharepoint 2003 Indexing!
• Flash backgrounds not showing in IE
• Google Font API

Spencer, over at youlove.us also showed me a really useful font matrix on the 24ways website, showing type face support across Windows and Mac platforms allowing you to expand which fonts you can confidently use on websites without having to resort to creating graphics or break out sIFR!

Related posts:

• CSS Sprites and a flickering problem in IE6
• Google Font API
• Google Code Highlighter

You can get round this by setting up a bunch of sub-domains, pointing to your site root, in exactly the same was as the www DNS record- just add these as additional host headers in IIS- we've got images.domain.co.uk, styles.domain.co.uk, etc etc as well as the standard www.domain.co.uk, then you just set your image tags to grab all your images as normal, but substitute the www's for "images"- like wise with your css- set your link tags to reference your css at styles.domain.co.u/css/screen.cssfor example.

Related posts:

• CSS Sprites and a flickering problem in IE6
• Google Code Highlighter
• New site launch- natashahampshire.co.uk

• sIFR
  This is a javascript/flash solution which allows you to use any font you want on a website.  It’s very simple to use- you simply add the javascript include to the top of your page, then add the sIFR css classes to the elements you want to be processed by sIFR.  You will also need to open the attached fla file and change the font in there and republish the SWF file.  At run time, the javascript then finds any elements using these classes, grabs their content, then substitutes it with a small flash SWF file, showing your title in your chosen font. 

  This is best used for page headings rather than large blocks of text (due to the processor time required to perform the conversion in real time) and, in my experience, can lead to some CSS based head aches (adding padding or margins where you dont expect it, or generally pushing other elements around) if you have a particuly tight design.

• CSS Sprites
  

  This solution isn’t as nice as sIFR, as you are still having to create a graphic for every button, and a graphic for every over state etc.  However with Sprites, you dramatically reduce the download times but putting all your button graphics and all their over states in a single image, and adjusting the offset of which part of the image you see on each button, using CSS.  An example sprite with just a single button can be seen in the image on the right.

  The benefits to this include significantly reduced download times as you don’t have a individual set of headers and footers for each of the individual images- you’re just downloading the one graphic.  This also eliminated the need for pre-loaders (which never seem to make much of a difference anyway!) because as soon as the graphic is loaded, you then have all the graphics for your navigation, and their over state’s in memory.

  So for each button on the site you set the same single image file, but when you set the background image, you also set an offset like so;

  #leftNav #btnHome a {
  	background-image:url(/graphics/leftnav_sprite.gif);
  	background-position:0px 0px;
  	}
  	#leftNav #btnHome a:hover {
  	background-position:0px -26px;
  	}
  

We went with the CSS Sprites solution in the end which went in very easily and immidiatly worked under firefox.  We did however see issues under IE6- as we roller over the buttons there seemed to be a lag before they actually redrew the normal images, as though it was downloading the graphic again; which apparently is exactly what was happening.  After a bit of googling around we found this article by Andrew Fledderjohann which had the solution we needed (as well as a few other fixes for apache etc)– a simple addition to the headers supplied by IIS when hosting the site.  In the properties for the site in IIS, add a new Custom HTTP Header called Cache-Control and set the value to

post-check=3600,pre-check=43200

This started working instantly for us totally eliminating the flicker.  You can see the results of this working up on www.franklinwatts.co.uk

Related posts:

• Cool typography tool & CSS Links
• Asp.net nested ListView control’s, with edit functionality- example
• Multiple domains to reduce site loading times