TW Blog :: Entries for CSS Design

Out of the crooked timber of humanity no straight thing can ever be made Immanuel Kant

Clean Up, Clean Out And Slants On The Side

Unfortunately I had to say goodbye to a few childhood memories today. My home has suffered a bit from damp the last few winters and I got a real shock when I opened my video/games cabinet last night to discover an entire culture had evolved, that even Mr Bellamy would have been proud of! So the day has been spent restoring my living area to a more habitable balance, paying the bus fare for my herd of woodlice to go and live elsewhere, and disposing of some now unrecognisable classic board games - Risk, Stratego and Dungeon Quest to name a few. Still I did rediscover a few old CDs slipped down the side of the cabinet, including Northern Exposure, which is now bringing back a few memories of those heady clubbing days in the hot Leeds sun of 1997.

Back to the engine now, and been toying around with Python and the transaction capabilities of the InnoDB on MySQL server. Oh and after reading this fun article on using CSS borders to create slants, here is a little herald I created last night (just for amusement). Mozilla and Firebird only for this one.

Posted on Jul 06, 2003 at 18:33:03. [Comments for Clean Up, Clean Out And Slants On The Side- 0]

The Fallacy Of Floating

This post does not relate to any other topics

Finally got round to downloading the Mozilla 1.4 CR build last night, and been playing around setting up as my default development browser today. I had rarely used the DOM inspector in older versions, but now realising what a handy inclusion it is for mapping out errors, especially when working with absolute positioning in CSS using the Box Dimensions.

I did get a bit of a shock to discover that the WWT rebuild I created last week was totally reluctant to display in the new browser. A quick run through Firebird confirmed this was a conflict between the CSS I had declared and the Mozilla browsers.

The original stylesheet positioned each column using the float:left property - I knew there were problems with cutting off text in IE6 when assigning float to div containers, but had not seen it in Moz before. The culprit was the relative declaration of the footnote, however I decided an alternative approach was called for. So a quick clean up operation!

Replaced
div {float:left}
with
div {position:absolute;left:0} and div {position:absolute;right:0}
for the left and right columns respectively. And, stripped the float from the central column, redeclaring the margins accordingly.
Since the page does not spread full screen, also had to declare the container as absolute to keep the columns together. This led to a further problem with the footnote element (in all browsers( which was only resolved by moving it inside the container as well.
The main affect on the document structure of this is that the right column must be placed above the central column in the document structure tree. But this is not detrimental to the logical flow in this particular instance.
Oh, and finally, I resolved some of the gap discrepancies in the sidebars by declaring the images as block level. Now the display is almost identical across all visual browsers.

Here is the result And I guess the the lesson is, Mick,

If you play with float you play with fire!

Posted on Jul 05, 2003 at 17:19:06. [Comments for The Fallacy Of Floating- 0]

Another Makeover For The RNIB

Also relates to Web Standards and Accessibility

I decided to join the games this evening and have a quick stab at rebuilding the RNIB home page. Admittedly, a lot of the work had already been done by Simon and the others, but I started with a blank slate to see if I would take the same approach. The final draft is a little and rough and ready - done at speed - but renders consistently across the Windows browsers. Once again I haven't been able to test it on other platforms - barely enough room for a single PC in my office! Since the RNIB serves a specific purpose I set specific structural and design goals for the rebuild

Readily resizable content (to at least two times) without breaking up the structure of the page.
Logical and accessible structure, that could render easily on an alternative browser (eg Braille or Speech in this case).
Keep the design as close to the original as possible (since RNIB had already invested the time in releasing a new front end design, and assuming they have done accessibility checks on the choice of colours). Actually I wasn't totally sure what the original design was intended to be as it looked so radically different across IE, Opera and Moz!

Much of the approach I took appears to be similar to the work already done, however a few areas of the build differ

Using Fahrner Image Replacement technique on the graphical parts of the page served no purpose in a non-visual environment. For example, the RNIB banner in the top left on screen I placed within the style rule for the top level header element - h1 {background: url('../g/rnib.gif') no-repeat top left;}. Then the text equivalent, cloaked from the screen in a span element, would be served for non-visual user agents, instead of the alt tag of the image.
I placed the banner at the bottom of the XHTML document, and positioned it absolutely. This way it serves as a reminder when a non-visual UA reaches the end of the page. Some would probably argue that by definition, a banner should be placed at the start of the document, but this is just my view of banners!
This also meant, there were four clear full width horizontal bars from the top of the page, and I started the main content (ie splitting the columns) below these four rows. Thus, by enclosing all three columns within a wrapper container, the background colour could be set to that of the two sides, to avoid the white space problem that would other arise with using position:absolute to place each column.
Rather than relying on the pipe divider, I put both the horizontal menus into inline lists using a combination class to extend the rules from one list to the other without impinging on the rules for the vertical lists.
The date seemed to sit in an odd place when the page was read through a text browser, so I pushed it to the bottom as well, and positioned it using negative relative placement.

That's most of it. I am sure there is a lot that could still be improved, IE does a vainishing trick sometimes over the inner floats, and, the CSS could certainly be improved if more advanced selectors could be used without compromising browser compatibility (good ol IE!?) Oh, and I only set a global selector to switch off borders, margins and padding at the outset since I wanted to do this quickly and working from a blank slate seemed the quicker way to go. Actually worked quite well, although it makes for hard work integrating Fahrner's keyword hack to support IE5.x safely. (I say 5 since @import was used to exclude version 4 browsers, which actually get a reasonable, if plain, styleless version). Finally, the filesize (15KB) is not representable since I removed much of the anchor code, and additional accessibility code would probably still need to be added, plus metadata.

Posted on Jul 05, 2003 at 01:24:39. [Comments for Another Makeover For The RNIB- 0]

Gecko Gaps

Also relates to Browsers

Following a quick browse of the Bible this evening (in the absence of Big Brother Eviction's - supper viewing only, honestly!) I resolved the gap issue in the Mozilla browsers with the Forest Adventure web site rebuild. It all boils down to the way Gecko (in true Standards Mode) interprets the position of inline images in relation to the baseline. That is they sit on the baseline allowing a gap for the descending curve of certain lowercase letters (eg g, y).

That is all fine and dandy, and JZ gives an obvious quick fix - to declare images as block level elements - img {display:block;}

However, while this works in the scenario of a Transitional page with navigation images still nested in tabular cells, it will not work in a Strict environment with a horizontal nav bar composed of images nested in inline list elements. The fix was no more strenuous all the same. Since the gap is based on the defined font size for the element regardless of the existence of text, simply down sizing the size of the font resolves the gap - ul {font-size: 1px;}

Zero is not an acceptable value, but a font size of 1px clearly does the job. Of course as a user increases the default screen font size (in Mozilla or Opera) there comes a point when the gap will reappear, but by this time, the font is so large on rest of the page, it has become pretty illegible and ugly anyway!

Posted on Jul 05, 2003 at 01:23:21. [Comments for Gecko Gaps- 0]

RNIB Free For All

Also relates to Web Standards and Accessibility

The new RNIB website has really kicked up a fuss in recent weeks. Afterall, the facelift is 100% a disaster! Here are three admirable rebuilds done so far…