My university has a brand style that requires a wide border and a logo that ties in with it but with a couple of angles (or 'dog-legs') to surround it. The image on the left will show you what I mean. For the departments that I am responsible for, I had originally achieved the results with a mixture of fixed blocks and tables. This seemed to be the only way to get something reasonable in Netscape 4 (a requirement 2 years ago). Now, we can be free of Netscape 4's limits and move to a more compliant structure without the use of nested tables at all. This has not been easy, but if you want to learn from my experience then read on. Also, please let me know if you see any errors on a browser where you are.
Here is a sample page for the project
Friday, October 14, 2005
I have a really good system for events now running on the Brookes site. The events are categorised and delivered all together (in date order - future events as well as past) or separated by their categories.
You can Check this out here.
Next challenge is to only show the following week’s events .....
Sunday, September 25, 2005
The wonderful Opera is now free of all banner ads and is completely Free. I was suitably impressed when I noticed this and it prompted me to apply a fresh mind to the problem described here.
A little bit of lateral thinking and a removal of the right padding on the body, added back to the inner content area, removed from the IE hack - and hey presto - got it!
I Feel Fine.
Thursday, September 08, 2005
I fixed a problem with Netscape 6 and now it seems to be busted in Opera. I needed to make the block that contains the school name positioned absolutely for Netscape 6. This causes a 30px gap on the right to appear in Opera. This seems to be because Opera positions the block from the right margin (30px) that is set on the body rather than from the window edge.
I am now looking for a way to deliver CSS to Opera in isolation or Netscape 6 in isolation. Solutions tried so far seem to deliver the CSS to more browsers than need it!
Monday, August 08, 2005
Achieving transparency on all the basic components fro the branded border has enabled an easy way to deliver different backgrounds for different sections.
Of background images can be tiled, so if you know that the design works with a repeat then fine. That saves bandwidth. I have a different idea. I want something to soften the design and something that fits with the character of the section of the site.
In this example I use a collage made up from an engraving of the Gutenberg Press, some text from Robinson Crusoe and a subtle use of other letterforms.
By using the fixed attribute of the background-attachment rule, then the image stays put when the text is scrolled.
The important thing about backgrounds is to be brave enough to make them really low key and pale, so that text can be read over them.
Wednesday, July 20, 2005
I have (finally) achieved full transparency over the whole content area (within the borders). This means that I can give the body a colour and see this through everything - even the logo!
There had to be a compromise. The logo background and the small tab had to have a solid colour to match the brand colour. This may present problems on 16 bit color displays - I need to check.
By making this change there is potential to change the background colour by applying a rule to the body. We can also add a background image. More on this to follow.
Monday, July 18, 2005
We need a special stylesheet that can be used for the printing and this is fairly straightforward. All of the fixed elements are hidden. The logo block has its background removed and in its stead is a fine gray line to the right. Luckily, some browsers (Safari 2, Internet Explorer 6) have a preview mode so that we don’t need to print half a tree just for testing purposes.
The stylesheet is delivered (after all other external stylsheets) with this:
<link rel='stylesheet' type='text/css'
media='print' href='includes/print.css' />
Sadly, after all the hardwork in resolving Internet Explorer problems, there are still some other hostile browser environments to tackle. Dealt with in this posting are Netscape 6, Internet Explorer for MAC and Opera (only partially).
Sunday, July 17, 2005
Getting this working on good browsers such as FireFox is good fun and very satisfactory. Internet Explorer is a whole different ball-game but the problems can be resolved.
The most significant issue is with IE’s lack of support for ‘position: fixed’. This can only be resolved by using ‘position: absolute’ instead. Basically we need to add an artificial ‘body’ element to the page and set the normal HTML body element to have its overflowing content to be hidden. In other words Internet Explorer is happy to think of ‘absolute’ as ‘fixed’ but only in respect of the containing block (as long as it is NOT the body). Further information on this can be found on Eric Bednarz’s ‘TagSoup’ site.
AHRA Conference for Dep. of Architecture
Brookes eJournal of Learning and Teaching
Institute for Historical and Cultural Research
Medicine Publishing gone over to Elsevier
Borrowing a DVD from the Library
AHRA Conference Version 2 of the Prototype