Content with Style - Comments on A CSS Framework

Content with Style - Comment #1 on A CSS Framework

Sat, 21 May 2005 23:27:10 +0000

wow, thanks for this write up, I have been in the process of building a css toolbox library and this is exactly what the doctor ordered….

Content with Style - Comment #2 on A CSS Framework

Sun, 22 May 2005 06:07:24 +0000

I’m a bit late discovering this article, but nice going Mike. It’s in the same vein as something I tried to flesh out last year that I called the CSS Sandwich, although my focus was more on a best practice for managing CSS hacks. I wonder whether it might be worth expanding to include sidebars on the left and right hand side too. Combined with Malarkey’s semantic naming conventions, it would be great if every site that fell into these categories followed this structure. Can you imagine how easy that would be for maintaining someone else’s code!

Content with Style - Comment #3 on A CSS Framework

Sun, 22 May 2005 09:01:55 +0000

Matty:

Allright, but never forget that you want to keep your job!
Therefore write unmaintainable code !

Content with Style - Comment #4 on A CSS Framework

Mon, 23 May 2005 16:59:03 +0000

Excellent… I’ve been thinking about this exact thing recently! I’ve been wanting to gather tried and true code to create this very thing. You’ve gone ahead and simplified this for me. Problem was I wasn’t aware of these great solutions that you mentioned above. How do the layouts hold up against the array of broswers out there (directed at the problematic IE)?

A CSS Framework… Brilliant!

Content with Style - Comment #5 on A CSS Framework

Mon, 23 May 2005 17:05:50 +0000

Only 3 comments over one month? Why? This is huge! Isn’t it?

Content with Style - Comment #6 on A CSS Framework

Mon, 23 May 2005 18:33:01 +0000

sureley everyone created their own when they started learning, i know i did…

Content with Style - Comment #7 on A CSS Framework

Mon, 23 May 2005 19:43:03 +0000

Thanks Tinus! We wrote the articles right back at the beginning of the year but real life got in the way of actually getting CwS live until Thursday last week. That’s why the articles look quiet…

Content with Style - Comment #8 on A CSS Framework

Mon, 23 May 2005 22:40:14 +0000

can you make each style sheet easily downloadable?
a set of links will do

Content with Style - Comment #9 on A CSS Framework

Mon, 23 May 2005 22:57:50 +0000

Nice job :-)
And quite usefull!!
I just noticed that on “my” firefox (ubuntu) the navigation seems to be longer than header so the “Contact” link is on the 2nd line. Anyway, I already had to tackle that problem once. I just used a container for the horizontal navigation bar – with a fixed size (100% or in px I do not remember) for that container.





links…

link to page

Content with Style - Comment #10 on A CSS Framework

Tue, 24 May 2005 02:54:03 +0000

Very nice! The modular approach is quite powerful.

I don’t see any usage terms with these stylesheets. Is the intention for readers to be able to use these stylesheets directly to build from, or are you just sharing the techniques?

(In the US, at least, you really can’t assume anything is available for any particular use unless it’s spelled out in front of you…)

Content with Style - Comment #11 on A CSS Framework

Tue, 24 May 2005 14:44:07 +0000

Now all you need to do is automate the process with a scripting language and you have a tool to instanly build web sites. Like this;

content -> html framework -> CSS applied -> Go live

Users could interface with a form on the web, upload their content, the HTML framework would get populated, the CSS sheet applied, and their web host would display the finished file. Automatic! Then the designer would just create new cool stylesheets, or be put out of work.

Content with Style - Comment #12 on A CSS Framework

Tue, 24 May 2005 14:49:17 +0000

How can I download the used css files?

Content with Style - Comment #13 on A CSS Framework

Tue, 24 May 2005 15:35:42 +0000

Try this technique

To sort out your css problems:

Error: The stylesheet http://www.contentwithstyle.co.uk/css/sifr-screen.css was not loaded because its MIME type, "text/html", is not "text/css".

Content with Style - Comment #14 on A CSS Framework

Tue, 24 May 2005 15:44:42 +0000

Chris and Dutch: I’ll sort out a zip for the whole lot later on today.

Kevin: As for terms of use, you can pretty much do what you like. I’d appreciate a credit somewhere (a reference in the source is enough) and I’d be very interested to see what you manage to do with them so drop me a mail.

Jeremiah: That sort of thing would work really well for hosted blogging or the like, I reckon… Top idea!

I’ve been using a similar workflow for my small freelance projects. For these I get given the design and I just pick the right layout sheet and start tweaking.

Josh Heyer has suggested putting this framework up with a layout repository that people can contribute to. I’ve registered a domain, now I just need the time to sort out a site… Watch this space.

Content with Style - Comment #15 on A CSS Framework

Tue, 24 May 2005 15:46:35 +0000

George: Where did you find that error? I thought I’d unplugged the sIFR stuff… We launched in a hurry though so it might still be lurking in there somewhere.

Content with Style - Comment #16 on A CSS Framework

Tue, 24 May 2005 16:43:57 +0000

Goerge:
Thanks for flagging it up. We start with edges and corners, but we get it running smooth soon …

Content with Style - Comment #17 on A CSS Framework

Tue, 24 May 2005 20:20:41 +0000

Now that’s good stuff.

This is something I’ve wanted to look into for a long time now. I’m one of those people who always manages to have to recreate basic layouts before continuing on to a more customized one, so this type of thinking should save me some work.

Hopefully you’ll be posting more on this train of thought in the future. Thanks for the start though!

Content with Style - Comment #18 on A CSS Framework

Wed, 25 May 2005 00:35:45 +0000

Thanks for a most thoughtful and practical article on CSS for real world work.

As browser support becomes more frequent it’s easier to wean myself from tables-based formats.

I’ve just spent a day exploring its features and learnt a lot.

My only stumbling point is that I’m not sure how to recreate it locally without having the PHP server side scripting language.

Is it possible to get the horizontal navigation and masthead to work without the PHP?

Thanks

Content with Style - Comment #19 on A CSS Framework

Wed, 25 May 2005 01:32:20 +0000

Wonderful article!
I want to play around with the files on my own. however… I think there is some mistake in the link of the zip file. It just goes to the same place as the other demo link, Could you provide a link to the zip file?
Thanks again for a great article

Content with Style - Comment #20 on A CSS Framework

Wed, 25 May 2005 08:31:23 +0000

Nice write up. A very useful library of layouts.

Content with Style - Comment #21 on A CSS Framework

Wed, 25 May 2005 11:16:20 +0000

The link to the zip file should be working now…

Content with Style - Comment #22 on A CSS Framework

Wed, 25 May 2005 13:13:58 +0000

A great idea, well thought through. Everyone works differently, of course, but even so this is an excellent starting point for the majority of layouts.

Content with Style - Comment #23 on A CSS Framework

Wed, 25 May 2005 15:17:52 +0000

Great work Mike!
Only one question: in
link to page
I see that the Header is larger then the navigation menu. Isn’t it nicer if both are the same length? Or u did this way to have buttons on the navigation menu all the same length to look nicer?

Sorry, maybe this is a newbie question
Cesidio

Content with Style - Comment #24 on A CSS Framework

Wed, 25 May 2005 16:11:01 +0000

Cesidio: The nav bar is the same width as the content area – it’s just the way I decided to do it! It could be the same width as the header bar if you wanted…

Content with Style - Comment #25 on A CSS Framework

Wed, 25 May 2005 16:42:02 +0000

Cesidio again: Actually, it’s just occurred to me what you mean. The demo pages aren’t intended as ‘designs’ – they’re just examples of the concept highlighted in the article. The point is that if you keep your HTML source consistent you can write and reuse modular layout sheets for the components of your websites. For example, if you write a horizontal nav bar then you can reuse it next time you need one, instead of starting from scratch. Hope that explains things a little better.

Content with Style - Comment #26 on A CSS Framework

Wed, 25 May 2005 22:21:53 +0000

This is such a great article—thanks so much for putting it out there.

I’m about to start another side project and the thought of beginning from scratch with the code is always daunting. I am definitely going to build my own library of page layouts and components. You have completely inspired me.

This is a software engineer’s approach to CSS design. Modular, reusable code based on common patterns. You never have to reinvent the wheel, and all your energy can be used towards innovation. Brilliant!

Thanks again!

Content with Style - Comment #27 on A CSS Framework

Thu, 26 May 2005 03:59:19 +0000

I’m gettin a pesky horizontal scrollbar in every layout…
what up with that?
(using both Firefox & Exploder6, BTW).

Other than that, this is an excellent idea…

Content with Style - Comment #28 on A CSS Framework

Thu, 26 May 2005 10:29:17 +0000

This is the first example of swapping multiple layouts whilst making CSS only modifications that I have seen. So after all it is possible in practice also …

Content with Style - Comment #29 on A CSS Framework

Thu, 26 May 2005 11:58:49 +0000

Steve: What platform/resolution? All’s fine on SP2…

Content with Style - Comment #30 on A CSS Framework

Thu, 26 May 2005 16:20:04 +0000

This is Great!!! I’ve been thinking of this for a while… men this is amazing…. I was very busy to do this for at least 2 or 3 months.. thanks.

Brilliant work.

Content with Style - Comment #31 on A CSS Framework

Thu, 26 May 2005 23:19:52 +0000

Mike,

Re: The pesky horizontal scrollbar…
My screen res is 800×600.

To eliminate the horiz scroller,
I actually have to grab a corner of the
web browser and drag it right…

With anything LESS than 780 pixels for the
INSIDE window width, the horiz scroller appears.

Here are some screenshots:

1) Firefox – No horiz scrollbar – inside width >= 780 pixels
http://img131.echo.cx/my.php?image=firefoxnoscroll4hv.jpg

2) Firefox – fugly horiz scrollbar – inside width < 780 pixels
http://img131.echo.cx/my.php?image=firefoxscroll2wo.jpg

3) IE6 – No horiz scrollbar – inside width >= 780 pixels
http://img131.echo.cx/my.php?image=ie6noscroll3fw.jpg

4) IE6 – fugly horiz scrollbar – inside width < 780 pixels
http://img131.echo.cx/my.php?image=ie6withscroll1iu.jpg

Hope this helps….

Content with Style - Comment #32 on A CSS Framework

Fri, 27 May 2005 01:49:18 +0000

You can buy books about CSS, learn about stuff you’ll never use & it’s gonna cost you $.
Or, you can browse the internet and find Gems like this for FREE.
Thanks, this I am gonna use!

Content with Style - Comment #33 on A CSS Framework

Fri, 27 May 2005 14:41:28 +0000

Thanks Steve – it’s my bad. Those layouts are all fixed-width and on anything less than 800×600 maximised you’ll get the fugly bars. I ought to add a fluid or flexed layout really. Luckily for me, Jeremy doesn’t seem to reading or I’d have had hate mail by now for not including any! I only did those layouts to illustrate the article’s concepts and I figured a few would be enough to give everyone a good idea of what I was on about. When I have time I’m going to revisit this and put together some ‘proper’ layouts, hopefully with some help from you guys…

Content with Style - Comment #34 on A CSS Framework

Fri, 27 May 2005 23:44:24 +0000

Excellent work, Mike. This is just what I was looking for. One question from a CSS/HTML newbie: How does one get a “sub navigation” bar working? I see the ul.subnav class (?) in layout.css. How can I implement this?

Thanks again for the great resource!

Content with Style - Comment #35 on A CSS Framework

Sat, 28 May 2005 17:44:14 +0000

are these pages for layouts available in ENGLISH.. all i ever get when i look is pages in Danish.. HELP

Content with Style - Comment #36 on A CSS Framework

Sun, 29 May 2005 13:36:12 +0000

Um, the pages contain dummy lorem ipsum text, which is Latin. Is that what you mean? The page content isn’t important; it’s the concept of separating your layout from your presentation into reusable modules that counts…

Content with Style - Comment #37 on A CSS Framework

Mon, 30 May 2005 15:48:50 +0000

javascript error in Firefox with
display: inline-block;

I think you can use display: table-cell;

But it’s an excellent work!! Congratulations!!

Content with Style - Comment #38 on A CSS Framework

Tue, 31 May 2005 01:28:05 +0000

Javascript error in Firefox for a CSS property?! That’s a little crazy… Exactly which page are you seeing that on?

Content with Style - Comment #39 on A CSS Framework

Tue, 31 May 2005 05:09:06 +0000

Great Article, I think it was said best when clint said “it’s just what the doctor ordered”. I too was looking for a way to structure templates so that they can easily change with the swapping of stylesheets.

I would like to point out thought that there is a mispelled word in The Ideal Structure section of the page second paragraph. The word “having” is mispelled to read “ahving”.

Content with Style - Comment #40 on A CSS Framework

Tue, 31 May 2005 07:58:50 +0000

this page http://www.contentwithstyle.co.uk/Articles/17/a-css-framework

I have this message in the javascript console
Error: Error in parsing value for property ‘display’. Declaration dropped.
Source File: http://www.contentwithstyle.co.uk/css/tools.css
Line: 19

Content with Style - Comment #41 on A CSS Framework

Tue, 31 May 2005 08:04:40 +0000

Another problem with Internet Explorer :

With the layout-navtop-1col.css :

When you move the cursor over the last item of the menu (at the bottom of the page), a blank line appears. The footer seems to move. It’s only under IE, there isn’t this problem with Firefox.

Don’t worry I haven’t noticed another problem. :-)

Content with Style - Comment #42 on A CSS Framework

Tue, 31 May 2005 12:52:50 +0000

Ploufy: Hmmmmm. I can’t replicate your ‘display’ problem… What version of FF are you on? I can’t think why the javascript console would care what CSS properties I use…

That IE bug is a classic. I’ll sort it out later. Ron: Thanks for the correction too – one of these days I’ll learn to type properly!

Content with Style - Comment #43 on A CSS Framework

Tue, 31 May 2005 15:50:32 +0000

I see a tiny problem with what’s posted on this page. The XHTML inside the grey box is missing a closing DIV for div#content. The linked pages, though, are absolute gold. This is a big help.

Content with Style - Comment #44 on A CSS Framework

Wed, 01 Jun 2005 09:34:03 +0000

It’s ok for FF Mike. I upgraded it and I don’t have the ‘display’ problem.
My last version was 1.0+, and today I use FF 1.0.4

Content with Style - Comment #45 on A CSS Framework

Wed, 01 Jun 2005 21:27:56 +0000

I love these frameworks. Thank you. Quick question: is anyone else having a render problem when they open the files in dreamweaver MX 2004? I get all black on the display page.

Thanks again.

Content with Style - Comment #46 on A CSS Framework

Sat, 04 Jun 2005 15:54:42 +0000

Dreamweaver does some pretty weird stuff with CSS rendering generally. As part of a contract I was on a couple of years ago I had to research what it supported… I found that it had serious trouble with nested floats and paid no attention to properties that hide elements, like list-style: none and display: none. I wouldn’t recommend using DW for CSS development – by all means use it as an editor but use a proper browser for previewing your work…

Content with Style - Comment #47 on A CSS Framework

Mon, 06 Jun 2005 19:54:17 +0000

I get errors in konqueror 3.1.4. #footer gets positioned over the content on about all the styles. I would make some screenshots, but I think you are better off checking as you debug. Great though, I’m doing the same right now with PHP includes. I’m thinking about maybe generate the fundation CSS in PHP(mentioned in , then keep the static CSS and make changes to it, that way it won’t need to genereate the CSS each time.

Content with Style - Comment #48 on A CSS Framework

Sun, 12 Jun 2005 09:50:46 +0000

Hey guys,

on this page:
http://www.contentwithstyle.co.uk/resources/css-framework/index.php?css=layout-navleft-1col.css

There is a blank space at the bottom of the page, below the bottom navigation…I’m just wondering, how do I get rid of that?

I’m still getting used to the spread of files and having trouble correcting that

thanks for any advice.

PS: This is a great collection of cross-browser CSS templates, very much appreciated

Content with Style - Comment #49 on A CSS Framework

Sun, 12 Jun 2005 17:18:25 +0000

Ash: You probably want to take the 20px margin-bottom off div#content in layout-navleft-1col.css.

div#content {
position: relative;
width: 780px;

margin: 0 auto [HERE ->] 20px auto;
padding: 0;

text-align: left;
}

Otherwise, got a URL?

Content with Style - Comment #50 on A CSS Framework

Mon, 13 Jun 2005 19:46:22 +0000

Hey Mike

thanks for the reply.

It turns out that didnt fix it. I’ve tried a few things here and there…none worked obviously.

Site is live because less than 1% use firefox to access it.

btw, i forgot to mention that the extra space below the footer only appears in mozilla [mac and pc] and safari

here’s a link: www.sajlawyers.com/areas_of_practice.php

scroll to the bottom

thanks for your help btw.

also, have you ever thought of integrating a footer than sits at the bottom of the page, regardless of pagelength?

you know, the
css: #ieclear {clear:both}
stuff like that.

just a thought :)

Content with Style - Comment #51 on A CSS Framework

Mon, 13 Jun 2005 19:48:12 +0000

typing it again..since the browser messed it up:

you know, the div id=”clear-ie”
css: #ieclear {clear:both}
stuff like that.

Content with Style - Comment #52 on A CSS Framework

Tue, 14 Jun 2005 01:42:24 +0000

The footer does sit at the bottom of the page, regardless of content length. It’s working fine on your site, for example… I’m using Tony Aslett’s clearfix method to avoid structural clearing elements because I’m a bit of a semantic purist. Comes from my accessibility roots.

Incidentally, you will want to avoid using an id for your clearing elements since you’re likely to want to reuse them. Ids can only occur once on a page but classes can turn up as many times as you want.

Content with Style - Comment #53 on A CSS Framework

Tue, 14 Jun 2005 23:09:30 +0000

actually, I meant having the footer sit at the bottom of the page, not content.

see this page:

http://www.sajlawyers.com/template.php

Content with Style - Comment #54 on A CSS Framework

Wed, 15 Jun 2005 00:43:37 +0000

Oh, I see what you mean. No I generally don’t go for that… Positioning elements to the bottom of other things is tough.

To sort your background problem I’d put the repeating faux-column gif on div#page instead of body. To get the shadow to show through you’ll probably need to put about 5px right padding on #page too. Then use one of the extra divs to put a bottom shadow under your page to tie it all together.

Your site’s looking nice, by the way.

Content with Style - Comment #55 on A CSS Framework

Fri, 17 Jun 2005 00:16:07 +0000

Thanks for the suggestions and comments. Very appreciated.

Once again, great job on the css compilation. You’ve got yourself another regular visitor to your website now :)

Content with Style - Comment #56 on A CSS Framework

Tue, 21 Jun 2005 14:28:55 +0000

Really like the css framework.

I have one question.

How do I get the right column’s background colour to extend all the way down the page? The colour of the main section and sub section are different. I want them to have the same height.

I have tried the Faux Columns solution, I seam to be going wrong somewhere.

thanks for any advice

Content with Style - Comment #57 on A CSS Framework

Tue, 21 Jun 2005 17:58:13 +0000

You’re putting your faux columns background on div#content? If you’re not in a hurry post a URL but if you need a quick response I HIGHLY recommend the CSS-D mailing list.

Content with Style - Comment #58 on A CSS Framework

Fri, 01 Jul 2005 14:37:02 +0000

There may be some issues with the order of the markup on these ‘templates’ in terms of practical usability. I completely agree that in an ideal world and with one eye on SEO, it makes perfect sense to place content as high up the markup as possible.

However, when an organisation with vast experience in user testing looked at this type of markup order, they felt that, precisely because it not an order practiced on most sites, it could cause significant confusion amongst some users – especially screen reader users who may navigate a page not only in a very different manner to a sighted user but far faster.

They suggested that a markup order that deliberately placed Main Navigation as the first major element in markup might well have the benefit of being ‘familiar’ and thus increase overall usability.

I’m not arguing against the markup order suggested above. I’m not convinced that there is a Right or Wrong here. I’m merely pointing out that what works in theory may not always translate well into practice – especially when trying to accomodate the learnt behaviours of site users.

Content with Style - Comment #59 on A CSS Framework

Sat, 02 Jul 2005 21:35:43 +0000

And this is the joy of using floats with negative margins for vertical layouts – i.e. with the three column vertical layout, the markup for the left column (navigation) could be placed before the main content without needing to change a single line of CSS, keeping both camps happy :)

Similarly, the right and left columns could also be switched in the markup. The only constraint being the right column cannot preceede the central column (using a negative left margin on the central column).

Incidentally Mike, I have used a similar technique based on a negative right margin for quite a while. Provides the flexibility described above flipped the other way – constraints on left column :

#main {
float: left;
width: 340px;
margin-right: -560px;
margin-left: 220px;
}

/ * / * html #main {display:inline;} /* */

div#sub {
float: right;
width: 200px;
}

div#nav {
float: left;
width: 200px;
}

Generally I use this with either liquid or elastic layouts and works a charm on all modern browsers/platforms. Negative margins is a great technique with considerable flexibility and minimal constraints on markup that can help extend usability and accessibility [IMO].

Plus the user can choose the order of the prinicple content and navigation without needing to touch the CSS – very nice :)))

[PS. always late to the debate me!!!]

Content with Style - Comment #60 on A CSS Framework

Mon, 11 Jul 2005 17:02:33 +0000

Mel: Very interesting comment!

Content organised in the order I’ve suggested here is, in my opinion, the most sensible. It’s only potentially confusing because few sites have the option of considering source order – it requires quite a large mental shift for the developers to both CSS and semantic coding, but I don’t think that should count against it. Coupled with a proper heading structure (that’ll allow JAWS to construct a document outline) it ought to be ‘better’ for all non-visual users. I include PDAs in that as well as search engine robots…

That said, when testing with screen readers, the most annoying thing for me is having to continually skip through massive navigations to get to the meat of the page because I always end up over-shooting. I tend to skip to the end of the page and then work backwards… That behaviour would be interrupted by my front-loading approach.

Hmmmm, it might be worth passing this one on to Bob Easton for discussion…

Content with Style - Comment #61 on A CSS Framework

Mon, 11 Jul 2005 17:05:02 +0000

Tom: Thanks for that! When I get time I’m planning on setting up a mini site for layouts based on this framework and your CSS’d be a healthy addition, especially for people sharing Mel’s concerns.

Content with Style - Comment #62 on A CSS Framework

Mon, 01 Aug 2005 20:17:46 +0000

You are welcome Mike, good to finally be able to share and discuss the code and ideas behind these techniques. My first blog on negative margins last summer has a few liquid/elastic examples – (although the rounding unit discussed in article is no longer required on the main crop of browsers – was predominantly for a bug in older Mozilla’s that is now fixed).
The elastic fantastic is a good demo also making use of unobtrusive javascript for the visuals rather than faux or other techniques. Feel free to share any of these techniques in your framework / forthcoming site :)

Content with Style - Comment #63 on A CSS Framework

Tue, 16 Aug 2005 13:26:30 +0000

With blogs there is the single column layout like Garret Dimon has his blog.

And what is meant with sub content? Things like blog roll, ads, news ?

Content with Style - Comment #64 on A CSS Framework

Tue, 16 Aug 2005 18:22:24 +0000

A great resource, but I’m curious as to why you didn’t separate color styles into a separate “skin” stylesheet as outlined in your “Modular CSS” article?

Content with Style - Comment #65 on A CSS Framework

Tue, 16 Aug 2005 22:24:44 +0000

My bad. On closer inspection I see that all the colors are black, white, or gray. I didn’t see a “skin.css” file so I thought you had decided on a different approach.

Content with Style - Comment #66 on A CSS Framework

Tue, 23 Aug 2005 09:32:18 +0000

beza1e1: By ‘sub’ I mean sub content. Anything that falls outside of the main focus of the site. That could be a blogroll, ads or news, as you correctly suggest. That Garret Dimon site is one of my favourites, actually. Beautifully simple. If I were laying out his site I’d wrap his ‘recently’ section in ‘nav’ and use a variation of the one content column layout but rewrite the navigation sheet…

Andrew: If these were proper designs I’d have skin.css in there but they’re all dead simple so I didn’t bother. With hindsight I probably should have put one in for consistency!

Content with Style - Comment #67 on A CSS Framework

Thu, 25 Aug 2005 08:41:27 +0000

Hi Mike

All I can say is to echo what others have said, “wow”! This is the sort of thing I might dream of undertaking but never seem to have the time, energy or skill. This is brilliant.

Thank you so much for all you have done. The thing I find even more amazing is the simple black and white design you’ve done them all in. Even that is brilliant.

Thanks once again.

Rich

Content with Style - Comment #68 on A CSS Framework

Thu, 25 Aug 2005 11:16:34 +0000

Oh, thanks! [blush].

Content with Style - Comment #69 on A CSS Framework

Fri, 26 Aug 2005 08:45:13 +0000

Great work, Mike!

I got 2 questions regarding classes in tools.css:

1) What do you use replace class for in final work?

2) Can you explain further the way you used the clearfix method? You used display:inline-block; property which is to stop IE/Mac to widen widthless floats to full width. But then you add width:100%; property. What is that selector * html>body .clearfix Looks like a combo of StarHtmlHack with BeNiceToOpera5?

Your code differs from original method, you linked to. What’s the point?

Content with Style - Comment #70 on A CSS Framework

Tue, 30 Aug 2005 07:38:40 +0000

1) tools.css is assorted rules that I reuse on every project. replace is for image replacement, but isn’t relevent here. Replace it with your own favourite IR CSS, if you like. In case you’re interested, what’s there would be used in the HTML like this:

Some heading

2) * html>body .clearfix will feed the rule to IE/Mac only, since it obeys descendent selectors (way ahead of its time) but also follows the StarHtml filter, being the IE engine. It looks like the PIE article has been refined since I first grabbed the clearfix code but here’s the reasoning…

IE/Mac can’t be forced to clear with the Holly Hack – it obeys height, unlike it’s PC counterparts, so it requires a different hack. Inline-blocks apparently expand vertically to contain their floats (like table cells, if I remember rightly), but we don’t want to shrink-wrap the block or it’ll cause the contained floats to stack vertically, hence the 100% width.

Am I making sense?!

Content with Style - Comment #71 on A CSS Framework

Thu, 01 Sep 2005 07:31:54 +0000

1) That’s what I was guessing :). However I’m using another IR CSS.

2) I tested this selector with Win/IE and it didn’t work. That made me think of it being a Mac/IE hack. However I haven’t seen it before and I don’t have Mac to test it myslef, thus the question. Is this selector (being in fact Mac/IE hack) described somwhere in detail?

Your explanation of inline-block property seems to make sense. Again, no chance for me to test it.

Thanks for reply. Your article sped up my workflow. I was already thinking about something of that kind on my own but why not to use a proven one.

Content with Style - Comment #72 on A CSS Framework

Mon, 05 Sep 2005 11:06:09 +0000

My usual sources don’t seem to have any documentation on * html>body filter. You can piece it together yourself from this list of browser shortcomings though: http://www.dithered.com/css_filters/css_only/index.php

I don’t have to worry too much about IE5/Mac these days but every now and again it comes in handy. I am a bit worried that a future version of IE/PC will start supporting descendant selectors but retain the * html bug so just be aware…

Glad to hear the article has been of use to you!

Content with Style - Comment #73 on A CSS Framework

Tue, 20 Sep 2005 09:40:42 +0000

Coming back to the clearfix method:

* html .clearfix {
/* Hides from IE-mac */
height: 1%;
/* End hide from IE-mac */
}

This can cause serious problems, since the page might be very high, so in IE you might suddenly have 30px gaps in there. I recommend to replace that with 1px

Content with Style - Comment #74 on A CSS Framework

Thu, 22 Sep 2005 02:50:12 +0000

I like the base idea,

but i think, it can not work for all Project’s like that. When i remember how long i was trying to tell IE how to center something, when the Content is dynamic. uuuu awfull…

Ever tried to generate a dynamic CSS File ?

I’am just working on something like that, where you have a Database and choose which parts you would like to re-use for a particular page.

Still, i like that Article very much!

Cheers,

Tom

Content with Style - Comment #75 on A CSS Framework

Thu, 22 Sep 2005 06:40:27 +0000

Pascal: Yep, I’ve come across that as well. Bit of a bugger. For anyone who doesn’t know, it’s a shortcoming of the otherwise wonderful Holly Hack. If the page is very long then 1% can cause the element to which you’ve applied the Holly Hack to stretch. I’ve seen this manifest in a horizontal nav bar…

Content with Style - Comment #76 on A CSS Framework

Fri, 23 Sep 2005 12:09:40 +0000

cool

Content with Style - Comment #77 on A CSS Framework

Sun, 09 Oct 2005 13:33:09 +0000

Hi Mike,
Modular css and your css framework are great! But can someone help me in understanding the benefits of placing your navigation last in the mark-up?

It seams to me that being able to navigate a website is more important than eliminating the ‘skip navigation’ link. When the main nav is in the bottom of the markup, it seems to me that finding the content that one wants to read becomes really difficult. Maybe not for a blog I guess. But even in a blog there should be a good means of navigating the archived information. I feel that finding the information one looks for is the hard part about using the internet.

So I have always assumed that placing navigation items at the top of the page is the only logical way to structure ones markup. How many selections do people make before reaching a content item they want to read or hear? More than enough to make up for a “skip navigation” link IMHO.

But I would love to hear that I am wrong. Because if I am wrong, I will use your css framework and make my life easy. :-)

thanks again,
bill

Content with Style - Comment #78 on A CSS Framework

Mon, 10 Oct 2005 07:19:05 +0000

Actually, the core point of the article was to highlight the advantages of establishing a source template from which you can generate the majority of site designs. If you disagree with my source order then just switch it around! The only parts of the framework you’d have to change are the layout sheets, which are only a couple of dozen lines each…

I think that your rationale for souce code order holds very well for a landing page – where people are likely to need navigation first and foremost, but once in browsing mode a nav-at-the-top order forces either repetitive reading of the navigation or reliance on skip links. People come to websites for their content and I want to make access to that as easy as possible.

Have a read of ‘The Ideal Structure’ section of the article and this reply to Mel further up in the comments.

I’d be interested to hear what you decide to do about your source order – I’m open to suggestions too!

Content with Style - Comment #79 on A CSS Framework

Mon, 10 Oct 2005 11:50:32 +0000

Hi Mike,
Thanks for your reply!
I have read your article many times (along with it’s growing list of comments). And Mel’s comment suggests that the navigation might be better at the top because of ‘familiarness’. But I just wonder how much time is spent navigating one website and how much time is spent navigating the vast internet for meaningful content. Will users without sight find content on a web site that they want to read/hear if the navigation follows the content (even in a ‘perfect world’)? I just don’t know myself and that is the only reason I asked.

Maybe it depends on the nature of the site. Sites with a broad range of topics may benefit from a navigation-first approach. And smaller sites with a more focused subject matter might be better off with the content first.

At any rate, in the framework that I’ve made to speed up my own work (which has nothing to do with css apart from being able to slap new css files into it and linking to them in the db) I print the navigation first. Your wonderful article has made me think about turning my framework into a little tableless-layout CMS by including css files that cover the layouts you’ve mentioned in your article.

Any way it was inspiring to read and I thank you!
And you hit an important nail on the head. Clear as a bell. And I hope Im not off-topic in my questioning your markup.

I think, though, that I will probably keep the navigation at the top of the markup.

I can see. But I also don’t have a scroll-wheel on my mouse. And I would surely be put off by a site that could fit all its content on my screen in order to save me having to ever scroll down the page constantly to read it, by putting the navigation at the bottom of the page.

Hope that wasn’t too long a comment.

Have a good one,
bill

Content with Style - Comment #80 on A CSS Framework

Mon, 17 Oct 2005 09:10:41 +0000

‘But I just wonder how much time is spent navigating one website and how much time is spent navigating the vast internet for meaningful content.’

That’s a fair point actually, although I use the same argument to justify placing my navigation at the bottom… If someone’s on my site they probably came through Google or from an inbound link so they are likely to be after my content, not my navigation. Thinking about it, I suppose that what I’m advocating is a kind of Embrace Your Bottom for screenreaders!

I think you’re right about the nature of the site mattering though, and I like your no-mouse-wheel analogy – it’s a really interesting way of thinking of it. Anyway, it sounds like you’ve put plenty of thought into how you’re structuring your HTML and, for me anyway, that’s the most important thing.

Thanks very much for your reply – it was really interesting!

Content with Style - Comment #81 on A CSS Framework

Wed, 02 Nov 2005 15:16:56 +0000

Hi

The power of CSS is amazing. I’ve seen a few sites like this one where i’ve been blown away by what you can do. Alot of DHTML and other funkiness can be avoided if your clever with your stylesheet.

I want to manage a stick up footer on the website for IE 5.0 +. with CSS As you can see 1 on bmw.co.uk

thanks

Imran

Content with Style - Comment #82 on A CSS Framework

Thu, 03 Nov 2005 06:04:44 +0000

Imran:

I did something similar to that for a recent site using a mixture of CSS and DOM scripting: Guildhall School of Music and Drama.

The bar at the bottom is pinned there regardless of content height.

Content with Style - Comment #83 on A CSS Framework

Tue, 08 Nov 2005 10:42:00 +0000

Nice!

I think you could cut down on a few “display:inline” and “text-align” declarations though ;-)

I’d say that links inside containers in these examples as well as some script to allow a switch of column length would be helpful. They could demonstrate real life behavior or bug. For example, the negative margin 3 column layout demo on ALA fails to show issues with NN6 and Opera 6.

I’ve done something a bit similar, but with fluid layouts:
Liquid Layouts

And I’ve used the negative margin technique the “other way around”:
3 column Fluid Layout

FWIW, all these solutions are hack free.

Content with Style - Comment #84 on A CSS Framework

Thu, 10 Nov 2005 07:18:38 +0000

Thierry, this hack free issue comes along with the price of extra markup, i.e. clearing divs. We actually have the same discussion in the other comments.

Content with Style - Comment #85 on A CSS Framework

Wed, 16 Nov 2005 10:34:28 +0000

Very good stuff. A small problem, I’ve tried adding the suckerfish dropdowns to the layout-navtop-localleft layout without any success. The dropdowns seem to get jammed up and go sideways under the mainmenu instead of down. Anybody implemented this? Links would be greatly appreciated.

Thanks. DRE

Content with Style - Comment #86 on A CSS Framework

Wed, 16 Nov 2005 23:12:41 +0000

Pascal,
When I say hack free, I mean CSS filters and structural hack.
The 8 layouts are based on the exact same markup; check them out, you won’t find any clearing DIV in there :-)

Content with Style - Comment #87 on A CSS Framework

Mon, 21 Nov 2005 01:34:45 +0000

Thierry: Well done!
On a sidenote: Your solution comes along with negative margins… personally I rate that as kind of a a hack. And again, what is so bad about overwriting rules with html>body? And what is the benefit of a hack-free (validating) CSS file?

Content with Style - Comment #88 on A CSS Framework

Tue, 22 Nov 2005 00:18:10 +0000

Pascal,
Not all these solutions rely on negative margins, but I must say they are very handy when the content comes first in the markup. I don’t know why you consider them as a hack though…

Your question regarding the “be nice to Opera hack” contains my answer. I don’t like to “fork” inside a stylesheet to overwrite values.
Make it red, no make it yellow, no make is red again… That does not make sense to me (without mentioning that most CSS filters rely on parsing bugs).

IMHO, many more people would use CSS layouts today if – instead of wasting time “talking hacks” – discussions were about how elements flow and how to construct the box to avoid box model issues…
;-)

Content with Style - Comment #89 on A CSS Framework

Wed, 23 Nov 2005 08:44:01 +0000

Thanks Thierry, let me try to find an answer to that:

Negative margins are as much a hack as using selectors for overwriting values. They’re not really invalid, but they’re not intended to be used for this kindo stuff if U ask me. Especially if you consider that reading “margin-left: -200px” is as confusing as ’”red, ehrm… no, green … no red”, to me at least.

And sure, I don’t LIKE to apply hacks like StarHtml or html>body, but then again if it saves me the clearing divs you’re using in your 3-col layout I’ll do it, sinde it’ll keep presentational stuff where it belongs: inside of the CSS.
Same goes for hacks in favour of Mac IE compatibility or any backwards compatible rendering.

You might argue that IF everything worked fine everyone would … but that is not much more but bla bla since:
a) various browsers have bugs that need to be dealt with
b) you have to deal with designers that have their own ideas about how the site should look like, so you cannot design the layout around the markup
c) you need as much research to get a good layout going hack-free and browser compatible as you would need to apply clearfix and such things. and they don’t make your html any better.

I acknowledge what you’re trying to say, fo the the reasons above I tend to dismiss the last point you were trying to argue.

Content with Style - Comment #90 on A CSS Framework

Mon, 28 Nov 2005 16:25:54 +0000

Except it, I think same!

Content with Style - Comment #91 on A CSS Framework

Tue, 29 Nov 2005 21:59:48 +0000

Pascal,
You mentionned structural hacks in a previous comment, and you use it again here as an “excuse” for using CSS filters, but my layouts [1] [2] do not use presentational hacks.
And IMHO, browsers bugs should not be an excuse either [3].
;-)

[1] no hacks
[2] still no hacks
[3] still good browsers support

Content with Style - Comment #92 on A CSS Framework

Wed, 30 Nov 2005 06:38:45 +0000

Thierry … Just to summarize: Given that you don’t want to add structural markup you have two ways open which are CSS filters or negative margin based layouts … both in my eyes are hacks, in your eyes the filters are worse than the negative margins. I think we call that a day now since we’ve been going on about it for a while.
Thanks for your input.

Content with Style - Comment #93 on A CSS Framework

Thu, 01 Dec 2005 11:29:36 +0000

Good article, thanks.

Content with Style - Comment #94 on A CSS Framework

Wed, 11 Jan 2006 08:25:34 +0000

Thanks Mike, your framework is great. It helps me not to reinvent the wheel each time I develop a new web site.

By the way, I’m trying unsuccessfuly to make the design fluid. Right now I work on the 3col with horizontal nav design.

Do you have any ideas?

Thanks!

Drew

Content with Style - Comment #95 on A CSS Framework

Fri, 20 Jan 2006 13:42:05 +0000

I had bookmarked this page a while ago to come back to, and I’m glad I did. Nice work. I’ll be playing around with this idea on my next project. Thanks.

Content with Style - Comment #96 on A CSS Framework

Sun, 22 Jan 2006 18:05:31 +0000

I have been using the framework idea (seperating css files) for a while and have notices that occasionally when a page loads it skips a few css files randomly so you end up with an undesirable page.

Ive noticed this in FF and IE it rarely happens and all you have to do is reload the page and the rest will get there but it does happen – so on that rare occasion someone will end up with a shocker page.

Is this a problem with @import? or the browser skipping over files to speedup loading?

Has anyone else come across this problem? Id rather not have to resort to putting all the css styles in 1 file.

Content with Style - Comment #97 on A CSS Framework

Mon, 23 Jan 2006 07:57:30 +0000

Nope, never seen that myself. I’ve been splitting my files up in some form or another for about 3 years and I don’t remember even Netscape 4 doing that!

Do you have a URL? I’d be interested to see it happen…

Content with Style - Comment #98 on A CSS Framework

Fri, 03 Mar 2006 19:26:30 +0000

I’m doing a theme design contest for this framework – more details at the following URL:

http://raibledesigns.com/page/rd?entry=css_framework_design_contest

Content with Style - Comment #99 on A CSS Framework

Sat, 04 Mar 2006 16:59:16 +0000

It’s time consuming to find the ‘right’ CSS, just too many good layouts out there on the net. Doing a CSS contest is, but why not doing a browser contest first!

Content with Style - Comment #100 on A CSS Framework

Tue, 11 Apr 2006 05:49:02 +0000

Nice ideas, re-writing my website this way now :)