That's life

Tips to help write flexible and robust sites with CSS

HTML and CSS isn’t new but there are still so many people out there that mis-understand it. So I’ve come up with my own list of tips to help develop more robust and flexible pages.

Use a reset stylesheet

All browsers have their own defaults for paddings, margins and all sorts of settings which can make your life harder. So level the playing field by using a reset stylesheet to bring them all as close to each other as possible before you even start. Just Google around to find the one you want to use.

Use the right tool for the job

I won’t go into this too much as it should be obvious, it basically means that you should use HTML as it was suppose to be used e.g. use a table for tabular data, fieldsets to group logical form fields, a label to describe a field’s purpose (Read up on it, you may not know as much as you think.)

Don’t abuse your HTML

Adding HTML to the page so that it is easier to style it is a no no! e.g. adding an empty item in a list or empty paragraphs. Not only is the added HTML irrelevant and useless but you are making more work for yourself. Why? Because you have just tied your stylesheet directly to your HTML, if you want to change your styles then it’s likely you will have to change that HTML too. CSS was created to be separate from HTML so that’s how you should use it.

Misunderstood rendering

I see so much unnecessary CSS in stylesheets because a developer doesn’t understand that a div will fill up the full width of its parent or that a standard hyperlink can’t have padding unless it is set to a block. Have a read of this article (which I just found) which does a good job of explaining how blocks and inline elements work. Also check this bad boy which may clear a few things up what can or can’t be which type of display setting.

Avoid floats and widths

Floats are great but often over used, this goes the same for widths. Try to think of ways to styling the page without using either. There is a good reason for limiting the use of these, for floats it simply limits the number of issues you will have because lots of bugs often relate to floats whether that is an un-cleared item within it or even numorous bugs found within in IE6 (which is still going to be here for a year or two trust me!) As far as widths are concerned you can often let elements fill out the parent container, it’s a natural thing to do so let it do it. The bonus side effect is that the fewer widths you have the easier it is to update a site when it changes dimensions as everything just fills to the parent’s new size.

Natural flow of the document

If you view your page without any styles it should be easy to read and in logical order. e.g. main navigation near the top, content and then any sub-content and navigation. Don’t organise it around your styling, this is the wrong way to think about it. If you really MUST move HTML somewhere different for styling purposes then do it with JavaScript afterwards as an enhancement not a requirement.

Hope the above helps.

500 error IIS7 with blank page

So I went to fix a bug in a clients site the other day, loaded up visual studio as usual and went into debug to see if I could find the problem.

However no matter what I did I was getting the error “Unable to start debugging on the web server” Now considering I thought I hadn’t touched anything for some time I was surprised to say the least.

Next I tried to just load the site in the usual manor (as it is a legacy application as a website not a web application). On doing this I just received a blank page, after loading Fiddler to try and get a better look I still got nothing to tell me what was going on but Fiddler said a 500 error was occuring.

Anyway, after uninstalling various pieces of .NET and lots of Google searches. I went to add the logging features of IIS7 to help me out (for some reason they weren’t installed). I can’t remember what exactly but I also had to add some error options on.

Once this was done I was told the actual error message, basically that I didn’t have permission to read the web.config. Simple fix and away we go.

One word to sum up the entire ordeal, ANNOYING.

Resolving types with Autofac using type without generics

It’s really simple once you know how but it took me ages to track down the informaion on how this is done. I first started by passing in a NameService with the fully qualified name of the type, this didn’t work. I then eventually found the TypeService which works exactly how I would want.

requestContainer.Resolve(new TypedService(type), new Parameter[0])

It’s all so easy once you know where to find the right information! :)

NHibernate QueryOver

It’s a small thing but I’m really looking forward to NHibernate 3.0 with QueryOver.

Oooooo I can’t wait until this is out RT @CrypticAlivet: This gave me chills: http://bit.ly/cyDtvI