Post #519

Solving CSS problems for Mozilla Europe

21st November 2004, lunch time | Comments (42)

Note: I’ve found out how to do two new CSS-things, but I don’t have time to write up detailed explanations of them. Instead I’m going to point you to two sets of demos, briefly describe what’s going on, and then let you folks figure out the rest.

Background

I recently had the pleasure of working with the mozilla-europe.org team, helping them swap from their old, red look, to the nice mozilla.org look that the lads at Silver Orange knocked up.

One of the more interesting aspects of the project was that with the exception of each page’s header and footer, I wasn’t allowed to alter any of the XHTML on the site. CSS-advocates are always saying how easy it is to change the look of a site without touching the structural or semantic markup, but I must admit I’ve never actually had to do it: this was to be my first attempt.

So, how did it go? Well, as it turns out, it wasn’t too bad. I had a couple of sticky moments where I felt sure I’d have to compromise the design, or force Mozilla Europe to change their mark-up, but in both cases I found some interesting solutions to the problems. The final product was, I think, really rather good.

Let’s take a look at what I came up with…

Demo 1: Absolutely positioned navigation

The problem:

On mozilla.org the <ul> containing the navigation is marked-up inside the header <div> (div#header) at the top of the document. On mozilla-europe.org the navigation <ul> was marked-up outside the header <div> and appeared near the end of the document. How could I visually place the navigation, with pixel-precision, inside the header <div> and still ensure the design worked with variable font sizes?

The solution

http://demo.1976design.com/bottom-nav/

I’m pretty chuffed with this. I managed to use CSS to move the navigation <ul> from the end of the document (just above the footer) to the top of the document, and insert it precisely into the blue header <div>. That’s not clever in itself, but what is sweet is the fact that it copes perfectly with increases or decreases in font size, which, when you think about it, is pretty darn cool.

Things to note 1: the first reason this works is because as the text size changes, the header (div#header) and content (div#container-inner) <div>s move up and down the page. Because the navigation is positioned relative to its parent (div#container-inner) it also moves up and down by the same amount.

That’s nice, but it’s not enough. When positioning using position: absolute; top: ##px; we specify a Y co-ordinate for the top-left corner of a box. What I needed to do was position the bottom-left corner of the <ul> box so the list-items sat perfectly along the bottom edge of the blue header.

Let me say that once again for clarity: somehow I needed to make position: absolute; top: ##px; target the bottom-left corner of the <ul> box… but that’s not possible, is it?…

Things to note 2: the second reason this works is because the contents of the navigation <ul> are all floated right, causing the <ul> to collapse down to 0px in height, and allowing its content to stick up, out the top. When I absolutely positioned the navigation <ul> I actually positioned its top-left corner, but since it’s 0px high, its top-left corner is, to all intents and purposes, the same as its bottom-left corner. This allowed me to precisely position the bottom edge of the <li> items, something I normally couldn’t do.

Groovy, eh?

I think this is something which has a lot of potential for layouts.

Demo 2: Round-cornered boxes

The problem

When the chaps at Silver Orange created mozilla.org they did what we all do: they figured out the visual style of certain elements, and then added in a series of <div>s (with IDs and classes) around those elements on which to ‘hook’ their styles.

I wasn’t allowed to alter the XHTML code of mozilla-europe.org, and yet I somehow had to copy the visual styling of mozilla.org. How could I do that when mozilla-europe.org had no such <div>s? On what could I hang my styles?

One section in particular proved troublesome. Silver Orange had styled it up using a div called ‘key-point’, to create a blue box with curved edges. It looked like this:

Screen shot
Example of the visual style and code structure for <div class='key-point'>

Unfortunately the Mozilla Europe XHTML had no such encompassing <div> around those four elements, so how could I make it work?…

The solution

http://demo.1976design.com/boxless-boxes/

I solved this problem by using some non-IE CSS selectors and a liberal dose of :before and :after. It’s quite specific to the XHTML on the Products page, but since the Mozilla Europe webmaster is in charge of both the CSS and the content, that’s not a problem.

The key thing to look out for here is this section of CSS:

  1. /* before the final paragraph */
  2. body h2.prod+p+p.download+p:before {
  3.  
  4. /* create a blank space */
  5. content: " ";
  6.  
  7. /* clear it left, so it clears the floated <p class="download"> */
  8. clear: left;
  9.  
  10. /* display block */
  11. display: block;
  12.  
  13. /*set a small height */
  14. height: .5em;
  15. }
  16. Download this code: 519a.txt

That’s what finally enables the whole thing to come together.

Summary

Sorry for the rushed post, but I hope I’ve explained things sufficiently for those two techniques to be useful for someone. They’re certainly ideas I’ll be using again in the future.

Jump up to the start of the post


Comments (42)

Jump down to the comment form ↓

  1. Mark Wubben:

    I'm afraid the rushed post takes some elegance off the solution. I certainly have no time right now to look through the CSS in order to figure out what you did exactly.

    Nonetheless, I'm sure you'll write it up in more details later.

    (But what about IE in the second example then?)

    Posted 46 minutes after the fact
    Inspired: ↓ Dunstan, ↓ Anne
  2. Dunstan:

    I'm not writing it up again: if you're really interested, you'll figure it out!

    As for IE, it gets no fancy box styling so the heading and paragraphs will look the same as all the others. There's really nothing that can be done without breaking out JavaScript, or altering the XHTML.

    IE just doesn't have the selector-foo needed for the job.

    Posted 1 hour, 1 minute after the fact
    Inspired by: ↑ Mark Wubben
  3. Rob Mientjes:

    Besides the crap IE makes of it, nice job Dunstan. I've been working with selectors a lot of late, trying to style pure markup. Stay tuned to my blog for that.

    I love your styled (un)box, that's really some sweet selector-foo. Besides the fact that your write-up is minimal, the demos explain a lot. You're right - if people want to know how it works, they'll figure it out anyway. If they don't, they're just bum lazy.

    Posted 1 hour, 17 minutes after the fact
  4. Gabriel Mihalache:

    Is there any way for us to see the old Mozilla-Europe look? I'd be nice to be able to compare, element to element, the design changes.

    I think that adding DIVs should have been allowed, since this was not an exercise, but a real life site under your control, and because DIVs don't modify the semantics of the document. I would have imagined that the site's main goal was to visually seduce IE users to switch, rather than be an example of standards in action, but hey, if we can have both... to bad for those cornered boxes.

    Posted 1 hour, 49 minutes after the fact
    Inspired: ↓ Dunstan
  5. Dunstan:

    I looked for an archived copy of the 'red version' of http://mozilla-europe.org, but I couldn't find one. I imagine the guys at Moz-EU have a copy, but short of getting that and hosting it myself I can't find a way to show you.

    As for the lack of XHTML mark-up change, that wasn't a casual decision, but one based on work load. The european site is translated into quite a few different languages, and any changes to the mark-up would involve updating the files held by all the translators and then getting them to check things still worked properly. It took me quite a while to understand how much work that would involve, and how much of a pain it would be for what I think are a group of volunteers. In the end the decision was made to use more advanced CSS than to annoy the translators.

    I think it's one of those business decisions that are hard to understand without full knowledge of the situation.

    Posted 1 hour, 58 minutes after the fact
    Inspired by: ↑ Gabriel Mihalache
    Inspired: ↓ Turnip, ↓ Craig C
  6. Turnip:

    Can they not use a template system (like __() and _e() in WordPress) so that the translators translate strings rather than pages? That would seem more sensible to me...

    Posted 2 hours, 5 minutes after the fact
    Inspired by: ↑ Dunstan
    Inspired: ↓ Dunstan
  7. Dunstan:

    I don't know, Turnip, as I say, it's hard to make judgments on other people's decisions unless you know what's happened to lead them to this point.

    But let's stop that branch of the discussion here: it's not my place to talk about Mozilla's internal policies and I don't want to get into trouble with them by doing so.

    Let's just talk about the stuff I posted here, okay? :o)

    Posted 2 hours, 22 minutes after the fact
    Inspired by: ↑ Turnip
  8. Jeff:

    I think one of the most important jobs of this particular site is for IE users to switch. If it doesn't look good to them, they won't. I think it's vital that this looks just as good in IE, or they won't switch.

    Just my two cents.

    Posted 2 hours, 38 minutes after the fact
  9. Anne:

    Mark, if you read closely, you can read the solution. Thanks for doing this by the way, mozilla-europe.org could really use this makeover.

    Posted 3 hours, 5 minutes after the fact
    Inspired by: ↑ Mark Wubben
  10. Simon Willison:

    Jeff: how are IE users going to know that the site "doesn't look as good" in their browser? If all that's missing is a curved edge effect on a box they'll be completely unaware that they are missing anything until they've installed Firefox - and even then, it's unlikely they'll notice the difference.

    Posted 3 hours, 13 minutes after the fact
  11. Philippe:

    That round-corner box is just lovely.

    But IE/Mac users will have a bad experience with your main navigation (shouldn't be to difficult to fix, though).

    Posted 3 hours, 34 minutes after the fact
    Inspired: ↓ Dunstan
  12. Dunstan:

    In IE/Mac if you resize the page once it's loaded, then the menu kicks perfectly into place, Philippe.

    I have no idea why IE/Mac does that, but since it wasn't a target browser, I didn't bother to investigate.

    Posted 3 hours, 50 minutes after the fact
    Inspired by: ↑ Philippe
    Inspired: ↓ Philippe
  13. Dante Evans:

    It saddens me that someone as smart as you would do something as stupid as not even check to see if the site works in Opera. In Opera 7.23/Win, the nav items stack vertically. What is wrong with you people not caring about Opera??

    Posted 6 hours, 9 minutes after the fact
    Inspired: ↓ Chris Neale, ↓ Dunstan, ↓ Scott Johnson
  14. Chris Neale:

    Well in Opera/7.50 Linux it looks fine.

    Posted 6 hours, 29 minutes after the fact
    Inspired by: ↑ Dante Evans
  15. Paul Haine:

    It looks perfect in Opera 7.54 on Windows as well. I'm a complete Opera fanboy, but even I will only check my sites in the most current version of Opera, mainly because I assume most other Opera users upgrade as often as Firefox users do.

    Out of interest, Dante, do you use version 7.23 as your regular browser, or just as a test browser? If the former, how come you're not using the latest?

    Posted 6 hours, 51 minutes after the fact
  16. Dunstan:

    It's perfect in Opera 7.52 on the Mac, and as Paul and Chris said, it works on the later versions of Opera on Windows and Linux.

    I can't go testing every version of every browser on every platform, Dante.

    Posted 7 hours, 16 minutes after the fact
    Inspired by: ↑ Dante Evans
  17. AkaXakA:

    Ah, so you're the one that took away the lovely red moz-eu look and replaced it with the colder, business-type look of silverorange? Argh!

    I can understand the reasoning behind having one design for all moz sites, but the original red look does look a whole lot better than the blue 'official' one, as I remember it anyway.

    Anyway, enough of my babble about my tastes.

    That solution to the navigation problem sure is genius Dunstan, I've got to remember that one.

    Posted 8 hours, 27 minutes after the fact
  18. Scott Johnson:

    Dunstan has already stated that IE/Mac was not a target browser. That implies that there were target browsers. Perhaps Opera simply was not one of them.

    Posted 10 hours, 47 minutes after the fact
    Inspired by: ↑ Dante Evans
  19. Jonathan Fenocchi:

    Nice job on the absolute navigation, I'll be sure to study this technique more in-depth. Thanks!

    Posted 11 hours, 40 minutes after the fact
  20. Dante Evans:

    I understand that Dunstan. But I think a windows version of a browser just *might* be more important than a mac version. After all, there are a lot more Windows users than Macs (which many people find unfortunate).

    Oh and by the way, I forgot to mention: good job, the site looks nice (except in Opera 7.23/Win).

    Posted 13 hours, 10 minutes after the fact
    Inspired: ↓ Tim
  21. Will:

    Re: "Let me say that once again for clarity: somehow I needed to make position: absolute; top: ##px; target the bottom-left corner of the <ul> box… but that’s not possible, is it?…"

    What about this:

    selector {
    position: absolute;
    bottom: 0px;
    right: 0px;
    }

    Or something along those lines? I sort of skimmed your post, so maybe I missed something. (Maybe I shouldn't be commenting if I don't take the time to understand it)

    Posted 14 hours, 13 minutes after the fact
    Inspired: ↓ Dunstan
  22. Jaime:

    Nice job. I am now a fanboy of that collapsed <ul> trick... *smacks* head. How come I didn't think of that. It would have come in handy for more than a couple of sites I've done.

    There's only one small little issue in Konqueror 3.3.1. The green download arrow thingie is collapsed for some reason - as if the padding or margins aren't holding up. The arrow gets chopped. Not a biggie, but just case anybody cares.

    Posted 15 hours, 35 minutes after the fact
  23. Indranil:

    Very nicely done, Dunstan.
    Let IE go to hell.

    Posted 16 hours, 41 minutes after the fact
  24. Tim:

    Dante,

    *One* Windows browser in particular is a lot more important in terms of getting people to switch (clue: it's not Opera). It's not about Windows vs Mac; it's about individual browsers. Some are behind-the-curve enough to ignore. Opera 7.23 and IE/Mac both fell into that category, and there comes a point beyond which it's just *not worth* wasting any more time for such a small number of users of browsers with known issues when it comes to rendering HTML & CSS.

    Posted 21 hours, 10 minutes after the fact
    Inspired by: ↑ Dante Evans
  25. Chris Hester:

    The rounded corners demo is excellent. The only difference between the top version (using a container div) and the bottom version is that the green download paragraph doesn't stretch to fit the width of the div, but the content. (Although Opera 7.54 on Windows XP has a space before the arrow graphic for some reason.)

    Posted 21 hours, 18 minutes after the fact
  26. Philippe:

    Dunstan, the IE mac problem is a width issue (or rather the lack thereof). I have some code on my IE Mac bug pages (http://www.l-c-n.com/IE5tests/phantom-links/) working. It can easily be adapted to your navigation. I even have it working locally, just need to clean up a bit, but client issues are pressing right now.

    Posted 1 day, 1 hour after the fact
    Inspired by: ↑ Dunstan
  27. Dunstan:

    Will, thanks for your suggestion but the point is that I needed to use 'top' not bottom' because I had to position the <ul> relative to the _top_ of its parent div. If I'd used 'bottom' then it would have appeared at the bottom of its parent div.

    Posted 1 day, 1 hour after the fact
    Inspired by: ↑ Will
    Inspired: ↓ Will
  28. Will:

    I knew I wasn't paying enough attention... now (after looking at the source of the demo) I understand your situation. You've got a very nice solution here.

    Posted 1 day, 2 hours after the fact
    Inspired by: ↑ Dunstan
  29. Paul D:

    Wow, this is like my inspiration for today. I use CSS almost every day, but I didn't know you could chain together block elements with the plus sign to make virtual boxes like that. Neato!

    And just one more reason IE sucks!

    Posted 1 day, 10 hours after the fact
  30. Dante Evans:

    Tim: good point. I apologize for yelling; I wasn't aware that Dunstan at least had it checked in one browser. It's better than nothing.

    Indranil: I second that!

    Posted 1 day, 11 hours after the fact
  31. Gavin:

    Hi Dunstan
    Sweet and inspired!

    The collapsing box has always been more of a hurdle. Thanks for making it an asset.

    I think that in the spirit of others naming techniques (FIR, sliding doors, suckerfish, etc) we should call this
    something like "Dunstan's bottom position method". The acronym rolls off the toungue -- DBP -- and the name sounds vaguely lewd. Sure to be a hit with the kids!
    Anyone else have any ideas?

    BTW: I do think that Jeff has a point... how do we get IE users to know what they are missing out on?

    Posted 1 day, 11 hours after the fact
    Inspired: ↓ Barry Allison
  32. Anon:
    Posted 3 days after the fact
  33. Stuart:

    Hi Dunstan,

    Great stuff! That's exactly the challenge I set myself for my site at http://www.stuarthomfray.co.uk/ - attempting a restyle without altering the markup (although on a MUCH smaller scale than Mozilla Europe). I haven't added the new style sheet yet as I'm just setting up the style-switcher (so there will be just that LITTLE bit of extra markup!)

    I had the same issue with my navigation (near the bottom of the source code but needing to be positioned at the top), but I chose an easier solution than you by setting a height in pixels for the menu, then, absolutely positioning at the bottom of the header, MINUS the height of the menu. Your solution, utilising the 0px high floated <ul> contents, is cute and I COMPLETELY missed that fact - nice one!! :)

    Posted 3 days, 3 hours after the fact
  34. Barry Allison:

    Given Dunstan's previous postings about underpants research I think "Dunstan's bottom position method" is completely appropriate!

    Posted 3 days, 21 hours after the fact
    Inspired by: ↑ Gavin
  35. Sian:

    It definitely gets my vote of approval. I've looked at it using Firefox, Opera 7.54 and IE 6 and whilst IE doesn't show the nice rounded box edges it's still a winsome design in my eyes.

    Posted 4 days, 9 hours after the fact
  36. Anon:

    Is it me or should nav-access be hidden via CSS?

    Posted 6 days, 19 hours after the fact
    Inspired: ↓ Dunstan
  37. Dunstan:

    It's just you. The access navigation is useful for everyone.

    Posted 6 days, 21 hours after the fact
    Inspired by: ↑ Anon
  38. David Schontzler:

    I know this is Mozilla-only for the time being, but using -moz-border-radius may have been a better option for rounded corners. I'm not sure if Safari supports border-radius yet, but I'd wager that it'll be in there in time for OS X Tiger's Dashboard.

    Posted 3 weeks, 4 days after the fact
  39. Ashley Portman:

    Keep up the good work. It looks fine in Opera 7.50 on Windows.

    Posted 3 weeks, 6 days after the fact
  40. Jigar Panchal:

    Absolutely Fantastic Stuff ! I keep wandering around the web to see nice Java Script and CSS interaction, this is the best i've found so far...! Bravo to the Father of this Cute baby !
    NICE JOB !

    Posted 2 months after the fact
  41. Craig C:

    To see older versions, try taking a ride on the wayback machine:

    http://web.archive.org/web/*/http://mozilla-europe.org

    Posted 8 months, 2 weeks after the fact
    Inspired by: ↑ Dunstan
  42. Jon Wright:

    Without doubt one of the nicest layouts ive seen for a blog. I love it:-) Well done!!

    Posted 1 year, 3 months after the fact

Jump up to the start of the post


Add your comment

I'm sorry, but comments can no longer be posted to this blog.