You’re reading all articles tagged 'webstandards'

Capability, not Popularity

10 Sep 2008

Bruce Lawson recently brought to our attention the UK government’s Browser Standards Draft 0.13. Basically, the draft recommends using browser popularity (2% or more usage), rather than capability, as the criteria for choosing which one to support. I really hope they rethink this for future drafts. As a user of ‘minority’ browsers (definitely plural) I hate being dictated to about what I should use – if my browser is capable, that should be enough.

It isn’t clear how the supported browser list would be enforced, but I’m concerned that this approach will encourage browser sniffing, a move that will exclude browsers like Omniweb, Shiira and iCab, simply because their name isn’t ‘Safari’. They share the exact same rendering engine, and therefore require no further testing. You can be more inclusive without spending any extra resources, just by taking a different approach – one that isn’t based on statistics. Inclusivity is very important for the public sector, the draft itself says so!

To me, Yahoo got it spot on with their Graded Browser Support guidelines. The draft links to that article, but seems to ignore it for the most part.

If you only support certain browsers, then your website statistics will only enforce that, and not tell the true story of people trying to use the sites concerned. After all if a site only supports IE for example, then the ‘statistics’ are bound to show that to be the dominant browser.

If you feel the same way, please send polite feedback. After all, we are being consulted on this, and hopefully will be listened to.


Opera Web Standards Curriculum

11 Jul 2008

wsc_468x60

Gawd Bless™ Chris MIlls and Gawd Bless™ Opera, for together with authors like Norm they have begat the Opera Web Standards Curriculum.

I linked to this in my sidenotes a couple of days ago, but really felt it deserved a bit more attention, considering the extraordinary amount of work that has gone into it.

Opera’s new Web Standards Curriculum, released in association with the Yahoo! Developer Network, is a complete course to teach you standards-based web development, including HTML, CSS, design principles and background theory, and JavaScript basics. It already has support from many organizations (including Yahoo! and the Web Standards Project) and universities. The first 23 articles are currently available, with about 30 more to be published between now and late September.

Finally, there is non-reference resource to point people to, where they can actually learn in stages what web standards mean, and how to adopt and use them to build a better web. Heartily slapped backs to all of the contributors!


Is 1024 OK?

25 Aug 2005

With all the hoo-hah over the launch of the new ALA, I read with interest the interview with Jason Santa Maria over at Malarkeys place. What strikes me about this redesign is that it has been so focussed on typography. Jason has spent a long time on the details, as well as the overall, and by god it shows.

Now, I’m going to have to be careful here, because Jason is a friend, but there was one thing in the interview that just didn’t sit right with me:

We don’t support 800 × 600 anymore, nor do we 640 × 480. Do you? People flipped when sites stopped supporting 640 × 480… now no one says a word. Things change. Trust me, you are going to see more sites stretching out their legs and putting their feet up.

As a designer (coming from a print design background) I’m with Jason. I would LOVE to think ‘to hell with 800×600’, and get that bigger canvas to work on. However, I also know that not everyone maximizes their window. They may have 1024, or much higher, but thats not to say that they don’t keep their browser windows at only 800px wide. For the record I have mine in a widescreen letterboxy format- full width, but leaving room so that I can see my Stattoo dock. Thats what its all about – everyone has their own preference.

What about future proofing? The ideal that’s touted when using web standards. Its always amusing to come across a site from the 90’s that was rigidly designed for 640×480. This tiny site sits up in the top left corner of the screen, with a large repeating background image (surely no ones going to see that?!) throughout the rest of the window. A fluid layout would mean that sites that we build have more chance of fitting the screens of tomorrow.

Now, I’m one of those people who’s gone for a ‘fixed 760px horizontally centred’ boring layout thats so common these days, but I’m Increasingly of the opinion that fluid – or at least fluid up to a point, is the way to go. I’ve been working on a fluid redesign for a while now – I just wish I had time to finish it!

This isn’t a post about fluid vs fixed though. Nor is it criticising Jason or anyone who decides to design for larger resolutions. Its about a dilemma I have – designer sensibilities vs user preference. Some may not see the two in opposition, and a lot of times they aren’t. However, I’d love to say ta-ta to 800×600, but a little nagging voice is telling me it isn’t that straightforward. Believe me, I’m not so far up my web-standards-arse that I wouldn’t just put up one big gif image for the page if I thought no one was looking.

Maybe I need to lighten up and not worry quite so much about pissing off ‘users’? ;o)


3D Box Model is now Creative Commons

25 Apr 2005

Since I posted the original 3D CSS Box Model diagram, I’ve had a lot of requests from people who want to re-use and/or adapt it. I always intended that it be free for the taking if someone found it useful, but people seem to like the security of a legal document. So its now released under a Creative Commons license to do with as you wish, and has been moved to a more permanent location at https://www.hicksdesign.co.uk/3dboxmodel.

Also, as Dunstan pointed out to me, the content is actually on top the of the border, rather than underneath it. You have to do some negative margin tom-foolery to see this, but I’ve updated the original diagram to take this into account.


Providing CSS for just Internet Explorer

20 Sep 2004

(Disclaimer – although this didn’t turn out to be the valid replacement for the underscore hack that I hoped it was, I thought I’d leave the post here as proof of what happens when you don’t check your facts thoroughly enough. Or more specifically, when you’re so tired, that you confuse a vaild HTML result to be valid CSS – hey ho!)

Today, I had one of those little CSS accidents, which led me to discover that an easy way to provide css for only IE (PC and Mac 5, 5.5 and 6) is to simply to add a comma after the the selector, but before the opening brace:

div, {
	width: 80%;
}

Mozilla, Opera and Safari ignore the rule. It validates too!). I hope this is useful to someone.

The fact that IE 5 Mac applies the rule as well, could reduce its usefulness. If you have time, please test it further and let me know your results.


Forcing scrollbars (now even better)

17 Aug 2004

The massive trend of centering content horizontally brings with it a small problem. When moving from pages with short to long content, a nasty shift happens in Opera, Mozilla and Safari as the window makes room for the scrollbars. The only way to avoid this is to force scrollbars to appear all the time.

Here are a few solutions, and as you would expect, they each have their own pros and cons:

html>body { height: 800px; }

For: Simple, and works in most situations. This is the one I tend to use. The First-child selector hides the rule from IE windows that always adds a vertical scrollbar gutter anyway.
Against: Doesn’t work on large resolution monitors. Also, where it does add scrollbars constantly, there may be no content to see. Possibly confusing for users.

html>body { overflow:scroll; }

For: This does a better job at being less confusing. In Safari, this just adds scrollbar gutters, in others it adds scrollbars, but with a very small overflow length. Therefore, doesn’t confuse users with scrollbars for no content.
Against: It looks damn ugly as it adds horizontal scrollbars as well as vertical.

#Content p.bstext {
        font-size:216px;
        font-weight:900;
        line-height:130px;
        letter-spacing:-69px;
        overflow:hidden;
        color:#FFF;
        background:transparent;
}

This technique was found at the Web Standards Awards. I haven’t tried this one out yet, but on the face of it, it looks like an over-complication.

Update

Thanks to Patrick Lauke who came up with this genius solution:

html { height: 100%; margin-bottom: 1px; }

This adds a tiny amount of vertical scroll (1px no less), so users won’t think that there is content that they’re missing. This will also work on any resolution screen. I’ve tested this in Safari, Omniweb 5, Firefox on OS X, and it works like a dream! The only browser I could find that had a problem with it was (guess!) IE 5 Mac.


IE Whitespace Bug

02 Aug 2004

Its been a sort of Holy Grail for me (well maybe a Holy Teacup) to find a solution the IE Whitespace bug. If you’re not familiar with this, then you probably haven’t applied display:block to links within an unordered list. Adding this CSS property creates a solid ‘button’ out of what would’ve been a humble inline link, one that can be sized and prettied up as you like. The trouble is, IE windows adds another line height between all these links – unless you remove every bit of whitespace from the HTML.

So, in effect, there is already a fix to this, but it’s not a convenient one. Editing a menu that’s all on one line isn’t my idea of an easy life. Each time I would have to take the file into BBEdit, reformat the code to be ‘Gentle Hierarchal”, make my edits, and then reformat as ‘compact’.

I’d tried various fixes, one that added a negative top margin (overruled for decent browsers by using a first-child selector) worked in 5 & 6, but not 5.5. Then I started dreaming up some php that would strip the whitespace at the server side, but that was too much for my small head.

Now, excuse me if I’m late to the party, and everyone has already discovered the solution to this, but its actually rather simple. Here’s a cut down example:

ul a {
	display: block;
	float: left;
	clear: left;
}

Suddenly, IE 5+ does what it should, and the ones that got it right in the first place just put up with it without a fuss apart from Mozilla. If you find that the menu items are all over the place, add something like this:

li>a {
	float: none;
}

The first-child selector means that IE won’t see this rule, but everyone else will.


Are web sites identical?

28 Jul 2004

François Briatte has wondered this, which led him to conduct a survey of 10 CSS designers web sites and their similarities. The results are really interesting reading. Eric Meyer made the suggestion that we explain our reasons for our choices, and there a few points where I feel I’m a bit lacking.

Here are the ones I wanted to briefly comment on:

Are links underlined?

No – I still uhm and ahh about this one. There are good basic usability reasons for underlining links, but I haven’t yet brought myself to do it. I don’t like seeing links underlined, it breaks up the text too much for me. I know precious visual sensibilities should take second place, and I might reconsider this one.

Are hovered links underlined?

No – although they could be. Add to the ‘to do list’.

Do visited links differentiate?

No – but this will be sorted in the new design (if it ever sees the light of day)

Is the main text on white background?

Yes – This is mainly because:

  1. I like white. White is crisp, clean and looks good. There’s not enough white in the world if you ask me.
  2. What doesn’t work on white? Just white (oh, and maybe pale yellow).
  3. My colorblindness can make me a bit unadventurous with colour.

Is the main text sans-serif?

Yes – I believe its easier to read body copy on-screen in sans-serif. Strangely, this is the opposite of print design.

Is the DOCTYPE Strict?

Yes – this was a exercise in smugness, dressed up as ‘learning about W3C specs’.

Do they use accesskeys?

No – I did originally have oodles of accesskeys, but recent thinking has made me shun them. Basically, there just aren’t enough spare keys around.

Do they use ‘Steal these’ buttons?

No Рbut as Fran̤ois pointed out, I did until recently. These little things are everywhere. I felt the time was right to make my own.

Is there a print style sheet?

No – Something else I haven’t got around to doing. Silly really, it wouldn’t take long to knock up a basic print stylesheet. Another one for the list.

Is there a 404 page?

No – although I did have one until recently. My move to Textpattern has meant that I needed to rethink how I made my 404 page. Another one for the list.

That concludes the case for the defense m’lud. One issue I’m particularly keen to know your opinions on, is whether links should be underlined? What do you expect when you see to denote a link? Let me know your thoughts…


3D CSS Box Model

20 May 2004

Here’s the thing. I’ve seen umpteen diagrams showing CSS beginners how padding, border and margin work together, but not the order in which elements such as background colour and image are stacked. To try and fill this hole, I’ve drawn a diagram. I’m not sure if this is of any use at all, but here it is anyway – the 3D CSS Box Model.

(Updated: 21.5.04): Added keylines to show ‘fitting’ and changed the background image to be more obvious. Others have now done their own versions, Tom has created a black & white printer friendly version and Douglas has created an interactive version – great work chaps.

There is now a French translation available here.


I laugh at your spacer gifs

06 Apr 2004

folder of spacer gifs

I’ve just been redoing a designer’s table-based layout as CSS. The code was a soup of table cells and spacer gifs. One thing I found interesting was that rather than use a 1×1 pixel gif and resize it everytime with HTML markup, they’d created a whole folder of spacers of varying sizes! Wow, this is old-school at its best!

Needless to say, the pages are now lighter and consistent, but you can be so blinkered in your minority ‘web standards world’ you can easily forget that there are still designers using these methods today.

Take heart: Whenever it frustrates you that you need to add css hacks, and the odd surplus <span> tag, to get a page to work, remember this folder of spacer gifs.


web standards awards

03 Mar 2004

I could hardly believe my eyes when I was told I was the latest recipient of a web standards award. I’ve been following the progress of the awards keenly, which has featured personal favourites Jason Santa Maria and Shaun Inman, but I never thought I’d ever be up there too. Thanks Andy, you’ve made my year.


Highlighting current page

25 Nov 2003

Just recently I’ve realised how useful adding an id to the body tag of page can be. I’d always wondered why others had done it, and now I know. It gives that extra bit of flexibility to layout a page and set variations in page style depending on its id. So, I’ve just added another wee article on how to highlight the current page with CSS in your navigation.


Highlighting current page with CSS

25 Nov 2003

With handy online resources such as List-o-Matic, its now easier than ever to use unordered lists to create navigation. As an extra help to users, why not highlight the current page in the navigation? A recent article on A List Apart called Keeping Navigation current, showed how to do this with PHP. Here’s an easy solution using CSS.

First we’ll set up our navigation list. I have chosen 4 sections for ease, and its best if navigation sections are kept short anyway:


<ul id="navlist">
	<li><a href="index.html" >Home</a></li>
	<li><a href="products.html">Products</a></li>
	<li><a href="faq.html">FAQ</a></li>
	<li><a href="contact.html">contact us</a></li>
</ul>

Next we need to add a unique class or id (doesn’t really matter which) to each of the section pages:


<ul id="navlist">
	<li><a href="index.html" id="homenav">Home</a></li>
	<li><a href="products.html" id="prodnav">Products</a></li>
	<li><a href="faq.html" id="faqnav">FAQ</a></li>
	<li><a href="contact.html" id="connav">contact us</a></li>
</ul>

Before we leave the HTML, on each of the section pages we need to add a unique id to the body tag:

<body id="home">

This allows us to specify the highlighted tab. After we’ve added the CSS styling for the menu, we add the css rules to highlight the correct tab. As all of these instances use the same rules, we can just list them all, seperated by commas, and the browser will apply the rules to every instance. These overrule the previous styles wherever <body id=“home”> is on the same page as <a id=“homenav”>.


body#home a#homenav,
body#products a#prodnav,
body#faq a#faqnav,
body#contact a#connav {
	color: #fff;
	background: #930;
}

I’ve set up some basic pages so that you can see the navigation in action. This allows the navigation to be put into an external include file for ease of updating. The ‘decisions’ as to which button or tab to highlight all happens in the CSS file. This can also be used to introduce different coloured sections. Handy if the layout positioning stays similar and all you want to do is change the colour theme.


Beware the CSS Hackers!

12 Nov 2003

If you haven’t already, go and read Peter Paul Koch’s article ‘Keep it Simple’ for Digital Web Magazine. I was left speechless, not sure whether this was a spoof or that he really thinks these things.

Basically, his assertion is that ‘CSS Hackers’ are actively spending time creating hacks just to feel superior and to dazzle, deceive and seduce ‘innocent newbies’. Tee hee! Or am I being naivé? Is there really an underlying conspiracy that I’m blissfully unaware of in my ‘happy and poppy’ world?

“Complicated CSS hacks are the modern equivalents of the frames and tables. Their use serves to give the Web author a feeling of mastery”

My feeling is that unlike frames and tables, CSS hacks do not alter the the content, make it inaccessible or difficult to navigate. I see CSS hacks as a real-world solution to the problem of crappy browsers, without changing the markup or content. Sure, I try and avoid hacks wherever possible, but if all I have to is add a 2 line hack to make sure a layout works in IE 5 WIn – I’m jolly well going to do it! I don’t do it to feel masterful, I do it to get something working.

If we follow his recommendations, I fear that CSS design would be left in the basic, boxy world that it has been derided for.

What do you think?


accessible drop downs

14 Oct 2003

For a recent website redesign, a client wanted to use a DHTML drop down menu. Originally I’d bunged in one of the many free javascript based menus that are ten a penny on the web. As the project developed, I wanted to replace this with a more accessible menu.

My criteria were:

Gazingus.org’s menu’s would’ve fitted the bill perfectly, but the site doesn’t seem to have been around for a while (does anyone what happened to this? I hope its not gone for good). Time was running out, and I was doing a late night/early morning to find something quick to make the deadline the next day.

Hooray for Netscape DevEdge, where I finally found their Hybrid-CSS JS menus which fulfilled all my needs. Also, through this article I came across another alternative at Brainjar’s. This uses event handlers, but is more flexible with its css and javascript.


zen garden #2

06 Oct 2003

I’ve finally finished off my second submission to the CSS Zen Garden, and its been accepted! I’ve been wanting to have another go, and do something more comtemporary, but I really felt the pressure after recent entries. Release One, sub:lime and si6 have all been beautiful examples of slick modern design.

One of the hardest things is coming up with a decent name. I originally wanted to call this one ‘Design Wankery’, but I settled for the more subdued ‘dusk’ instead. You’ll see what I mean.

Rather than sit down and plan this one, I spent a while getting the text in a position I liked, and then added the eye candy around it. It very slowly evolved over the space of a couple of months (whereas my last entry took 2 evenings). In the end I had to draw a line and decide not to tickle it any further. Because the page is marked up with lots of extra tags for flexibility, I had to fight the urge to try and do something ‘clever’ with all of them. That’s just not what the Zen Garden is all about.

Finally- here’s the honesty bit. The layout isn’t perfect in Opera 6. I’ve used overflow:auto to scroll the main text, which means that a height value must be declared. Opera 6 will display all the text without scrollbars, but still assumes that its still as high as you’ve declared it. This means that the links list doesn’t run on and appears on top of the main text.


gettin' all strict

01 Oct 2003

I’ve just changed the site from being XHTML Transitional to Strict, and I was surprised how little work was involved. What follows is a list of everything that didn’t validate, and had to be changed:

The last 2 were leftovers from the original Movable Type templates. In a matter of an hour the site was converted. The search and replace function within Movable Type meant I didn’t have to go through every entry individually.


Why bother? Well, apart from a chance to be even more anal, it was education. My reason for creating this site in the first place was to practice and try out new things. While it doesn’t mean I have a thorough understanding of all the nuances of the XHTML strict spec, I know more now than I did a few hours ago. (There may well be the odd entry page that doesn’t validate – let me know if you spot one.)


Compliant style

26 Sep 2003

Joe Clarks’ Fawny blog talks about a category of web design he’s noticed and labelled “The International Compliant Style” (IC-Style). He describes this as being “employed, though not necessarily through conscious decision, by the majority of developers and designers who are committed to following official specifications”. He mentions stopdesign as an example of someone subverting the rules of the style, but I thought that mezzoblue would be an even more radical example. Hicksdesign is one the of the sites that Joe lists as following the rules of IC-Style.

Joe gives some explanations, but I have my own reasons for using the colours that I do. Perhaps I’ll share a little secret with you (and risk losing any client that ever visits this site). You see, I’m colourblind, and more specifically, I have problems distinguishing between blue and purple, and green and brown. This is called ‘red/green colourblind’. I can see tones, but hold up a blue square and purple square, and I’ll probably just see 2 blue squares (handy that you had some coloured squares lying around though).

To test for this, you’re made to look through a book of what looks like random colour dots. Your ability to see the numbers or letters within the dots tells you what colours you are affected by. These can be really frustrating, and leave you crying “No I can’t see anything – its just dots!!”. Many teachers would tell me that I’d drawn “a very nice picture of a green monkey”.

Over the years I have ‘taught myself colour’ through print design and the CMYK palette. I know that 50% cyan and 100% yellow makes green for example. I’ve always had people I could ask as well (my wife gets the brunt of it). There’s also common knowledge. For instance, I know that grass is supposed to be green, therefore when I look at grass I say “hmm… green!”. However, in summer when grass dries up and goes brown, I actually see it as light green. Any concerned clients reading this might now need to reassure themselves that I have a double life as a wildlife illustrator, so I can get by.

What does make life hard are the tiny colour swatches in apps like Photoshop, Dreamweaver etc. When small, and all placed together in one large block, its very hard for me to distinguish colours. I now have a large printed(!) chart, with a good range of hex colours with the colours labelled. Choosing colours can still be a bit of ‘process’ though, and thats my reason for using grey a lot!


skip navigation links

23 Sep 2003

A recent article at The Web Standards Project alerted designers that ‘Skip Navigation’ links, traditionally hidden with the CSS property display:none, are invisible to screenreaders. This hadn’t occurred to me, even though I knew it was a problem with Fahner Image Replacement, which also uses display:none.

If you’ve got a long list of navigation links, skip links give users the option to go straight to the content, useful if you have a textbrowser, PDA or screenreader (doh!). It can be particularly painful to hear a screenreader speak al long list of links before finally getting to the content.

Put ‘em somewhere else

One way around this is to use a layout technique that allows navigation to be placed after the content, removing the need for the link. The Layout Reservoir at Blue Robot has useful examples on how this can be done. Navigation is positioned using position:absolute, which takes it out of the normal flow of the page, allowing it to go anywhere in your HTML. This won’t always be possible of course, and if you do, you’ll need to add a ‘skip to navigation’ link instead!

Hide ‘em

The following workaround was developed by Bob Easton, who wrote the original article on CSS Discuss, and works in the top 3 screenreaders – Jaws 4.51, Window-Eyes 4.5(beta) and IBM Home Page Reader 3.02.

<div class=“skiplink”><a href=”#content”>Skip Navigation</a> </div>

.skiplink { position: absolute; left: -1000px; width: 990px; font-size:1px; line-height:1; }

As you can see, it places the content off the screen to the left. Bob also added width, font-size and line-height to allow for extra information such as a menu of your accesskeys. The width rule is a failsafe, to make sure that div doesn’t become visible. If your link is a small simple affair, you can remove the width and font attributes. Tom Gilder extends this further , with a clever technique that makes the div visible when a user is tabbing through.

Don’t hide ‘em

However, Joe Clark argues the case for making these links visible. He lists several ways of doing this, and keeping it small, suggesting that just the word ‘skip’ would be acceptable.


skip links update

13 Sep 2003

The suggestion in my last post was kindly tested by Bob Easton, who wrote the original article on CSS Discuss. It only worked in 2 of the top 3 screenreaders. It works in Jaws 4.51 and IBM Home Page Reader 3.02, but failed in the number 2 – Window-Eyes 4.5(beta). However, Bob suggests the following, which he has tested and does work in all 3:

.hide {
	position: absolute;
	left: -1000px;
	width: 990px;
	font-size:1px; line-height:1;
	}

As you can see, it places the content off the screen to the left. He also added width, font-size and line-height to “allow placing very large blocks of assistive text over there in hidden space”. Great – at least we know of a tested way of working with all 3. Thanks Bob!

Dave Shea offers this more compact version:

.hide {
	position: absolute;
	left: -999px;
	width: 990px;
	}

You can even remove the width if you’ve just got a ‘skip navigation’ link, but Bob’s original suggestion allows you to add more than just a ‘skip navigation’ link, such as a menu of your accesskeys. Tom Gilder extends this further, with a clever technique that makes the div visible when a user is tabbing through.

Bob has also set up a test suite for screen readers, trying 7(!) different solutions in total, including some that were suggested in the comments of the last post. If you have a screenreader, head over and get testing.


skip navigation solutions

10 Sep 2003

I’ve just been reading on The Web Standards Project about the fact that ‘Skip Navigation’ links hidden with the CSS property display:none are invisible to screenreaders. This hadn’t occurred to me, even though I knew it was a problem with Fahner Image Replacement, which uses the same property.

Skip Navigation links give users the option to go straight to the content, useful if you use a textbrowser, PDA or screenreader (doh!). One way around this is to use a layout technique that allows navigation to be placed after the content, removing the need for the link. The Layout Reservoir at Blue Robot has useful examples on how this can be done. Navigation is positioned using position:absolute, which takes it out of the normal flow of the page, allowing it to go anywhere in your HTML. This won’t always be possible of course.

Another way is to use a similar technique to Seamus Leahy’s Image Replacement method at CSS Play, which is known to work with screenreaders. If your skip link looks like this:

&lt;div class="hide"&gt;&lt;a href="#content"&gt;Skip Navigation&lt;/a&gt;&lt;/div&gt;

Then your CSS would look like this:

.hide {
	height: 0;
	width: 0;
	overflow: hidden;
	position: absolute; /* for the benefit of IE5 Mac */
}

Like display:none, this won’t take up any ‘physical space’. The only browser I found that had a problem with this was IE5 Mac, but it behaved itself after adding position:absolute to the code.

Please note: This has since been tested in screenreaders, and it isn’t quite up to the job. See the next post.


vertical & horizontal centering 2

01 Sep 2003

I’ve been busy improving the way this site looks in smaller screen resolutions and windows. The technique I was using achieves vertical and horizontal centering by using absolute positioning and negative margins. If the window was too small for the content, it cut it off without giving you the option of scrolling to see it all.

So instead of using absolute positioning to center horizontally, I’ve now used the auto margin method. This is the best way, as it stops trying to centre the content when the window is too small. Originally when I’d tested this, it was still cutting of the the left side in Mozilla/Camino/Firebird, so I’d left it out as an option. I eventually discovered that all it needs is a ‘min-width’ value adding to the containing <div> to stop this. At last, most users can see the all content if they scroll.


Here’s the new CSS:
#horizon {
	background-color: transparent;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	margin-top: -200px;
	text-align: center;
	min-width: 900px; 
}
#wrapper {
	margin: 0px auto;
	background-color: #fff;
	position: relative;
	text-align: left;
	width: 900px;
	height: 380px;
	}

You’ll still need to use absolute positioning to get the vertical centering, and an outer <div> (#horizon in this case) in which to centre the content. (The position:relative in the #wrapper rule allows me to position everything inside it using position:absolute rather than floats). Min-width/max-width is one of those really useful CSS properties, that would help in designing fluid layouts – if only more browsers supported it.


I’ve also reduced the height of the main area so that it fits within most browsers at 800×600 with lots of browser chrome. All in all, its still not perfect, but its a lot better.

If you prefer, the other option is a ‘diet’ version of hicksdesign – a basic stylesheet, with larger type and a fluid layout (no scrolling DIV’s).

Finally, one thing I’ve discovered: To make it easier to edit lists where whitespace has to be removed to avoid extra line spacing (IE Win whitespace bug), use the ‘format’ utility in BBEdit. Switching between ‘gentle hierarchal’ (for editing) and ‘compact’ (when you’re ready to upload) has really helped me work with my large menu code where I use <ul> and <ol> to layout the navigation.


You've got to hide your styles away!

11 Aug 2003

No matter how you try and avoid it, you often get to the point where you need to hide CSS from a particular browser, because of a bug. Its 'not cricket' but they work, and they validate. So rather than being an article as such, what I've done here is gather all the various links for hiding CSS from browsers.

Please let me know if you find any more!


Instagram Hickstagram

  • 14 Jul 2018

    Stopping for a breather - hot day for hills

  • 13 Jul 2018

  • 09 Jul 2018

    Recent garden addition: Stargazer Lillies

  • 07 Jul 2018

    Well… we missed quite a few key acts, but have made it here before Interpol starts at least!

  • 07 Jul 2018

    On our way to BST in Hyde Park. Or… not 😞

  • 06 Jul 2018

    My favourites from this years On Form Sculpture exhibition. The whale was my absolute favourite, but was already sold (which is fine as I don’t have a spare £11,000)

  • 01 Jul 2018

  • 01 Jul 2018

    Not quite in height order. Sort it out

  • 01 Jul 2018

    Filth.

  • 30 Jun 2018

    Agapanthus about to burst forth

Contact us

Call Jon on +44 (0)7917 391536, email or tweet @hicksdesign.

Alternatively, pop in for tea and cake at the studio…

Hicks
Wenrisc House
Meadow Court
Witney, OX28 6ER
United Kingdom