PX to EM Transition

[David]

I'm always willing to change the way I work if I think it's a good idea. In the past, I always designed my CSS text settings using PX (absolute pixel measurements), largely because all other measurements are specified in pixels. But it seems to me that there are a number of advantages in using EM (accessibility being only one). So, I have now implemented EM through CSS on the Website Architecture site. Try it, Ctrl Scroll away.

The change was not so simple though and simply replacing PX with EM caused havoc (well, it didn't look so good) with some text. However, it turns out that the havoc was caused by bad CSS (my fault!).

One lesson I've learned is that, when working with CSS, it's easy to "fix" a particular non-alignment problem with an extra class and lose sight of where the problem lies. Usually it lies further up the cascade chain. With CSS, you really need to think from the top down and consider all the inheritance from further up the cascade chain. in order to solve immediate problems.

In this respect, Dreamweaver MX 2004 scores brilliantly. The new "Relevant CSS" pane shows all the inherited characteristics for any given object. This pane is now permanently open on my Dreamweaver. It alone was worth the price of the upgrade.

What's interesting about Ctrl Scroll is the way in which the different browsers deal with it. I must admit I was impressed by the way Opera scalled the images to match the text until I realised that Opera didn't even care about CSS. Opera will scale any website using Ctrl Scroll, irrespective of CSS. Strangely, I couldn't get Mozilla to change the text size at all, even after making the relevant settings in Preferences. IE of course, just did what was expected.

I think I've just used my last PX definition for text but I'm not ready to give up tables just yet.

Something about old dogs and new tricks comes to mind... ;)

PS - Just worked out why Mozilla wasn't doing it. My fault again (or is it?). I hadn't set the preferences correctly. My question now is this: Why does Mozilla not enable Ctrl Scroll by default and why are the preference settings not intuitive?

[francis]

Where is that relevant CSS panel in MX2004? I use the property inspector to see what's going on, but that doesn't tell me everything. The CSS styles pallet is the only other one, but I don't use that at all.

Everyone touts EMs as the unit of measurement for scalabe fonts, but you can also use keywords (small, large etc), percentages and the like. I tend to use %s for my <Hn> elements, eg: body:0.84em;, h1:160%, h2:150%, h3:140% etc etc.

Moz does have some strange habits around the mouse wheel. What they have started to (slowly) move towards is making Firebird their main browser and having Thunderbird as their standalone mail client as opposed to Moz's combined build. We'll see.

Have you been to Mozdev (http://mozdev.org) yet? Lots of extensions for Moz including a copy of Opera's lovely paste and go (http://extensionroom.mozdev.org/extensionlist.php?app=Mozilla&category=misc#pasteandgo). Such a simple idea, but a brilliant one, a bit like tabbed browsing (http://multizilla.mozdev.org/) (if you install this extension read the instructions carefully or it will completely destroy Moz's nav bar. It is, however, well worth it)

[francis]

Agh - forgot to mention Moz and Opera's 'find as you type' thing. Have you tried that yet? It's a far, far better implementation of using CTRL+F to find text on a page. In Moz, pressing / and then typing will find anything that you type. So / then 'tabbed' (without the quotes) will find te word 'tabbed'. Pressing F3 will cycle through any more instances on a page and shift+F3 will reverse cycle. Pressing ' instead of / will find only links with your text, so ' then 'tabbed' will only find links on a page with the word 'tabbed' in.

I find this an excellent feature - it's far easier to use than CTRL+F which I find a bit temperamental

[David]

The "Relevant CSS" pane is a new tab on the "Tag" palette and it looks lile this:

http://www.websitearchitecture.co.uk/watson/postimages/relcss.gifhttp://www.websitearchitecture.co.uk/watson/postimages/stycss.gif

In this example I've clicked on some text and you can see that the heirarchy affecting the object (text) is <body> then <td> and finally

. You can use the upper part of the pane to select the controlling tag and in the lower part the definitions are displayed. You can move up and down through the CSS heirarchy and this makes it really easy to track down any conflicts. The red lines indicate where style definitions have been made but don't directly affect the current object.

Unlike Francis, I'm also a big fan of the "CSS Styles" pane - very useful if you're working with multiple style sheets and a quick way of viewing all your defined styles.

[francis]

Ooh, that is nice. This feature and their new code hinting for CSS virtually makes my copy of TopStyle (http://www.bradsoft.com/topstyle/index.asp) redudant. The only downfall of the relavent CSS panel is that it will update your CSS file, even if it isn't open, without warning, which is neither big or clever.

TopStyle, when it was just a CSS editor, was fantastic. It still has a great CSS feature set which Macromedia have taken large chunks of, but I find its XHTML side very poor. I'm off to find out what this new FeedDemon thing is about.

[David]

Originally posted by: francis
The only downfall of the relavent CSS panel is that it will update your CSS file, even if it isn't open, without warning, which is neither big or clever.

I disagree. Dreamweaver is an integrated design tool and you would expect to be able to make changes to your CSS on-the-fly. The logical extension of your view is that Dreamweaver shouldn't change your HTML code when you make changes in Design View.

I find Dreamweaver's CSS tools to be excellent. Although I still dip into the CSS file itself from time-to-time, for the most part I'm happy to let Dreamweaver add any new definitions I make using the CSS Style pane and any changes using the Relevant CSS pane.

[francis]

I choose to disagree with your disagreement! If I do a find and replace on multiple files that aren't open, DW will ask me if I'm sure that I want to do this. I feel that it should check to see if the CSS file is open. If it is, make the change. If it isn't, then it should make the change.

[David]

I guess we'll just have to agree to disagree. I think it's always hard for coders to move away from the coal face (as it were). I must admit I found the move from Homesite (a code only tool) to Dreamweaver quite traumatic and resisted it for some time. "Some program writing my code for me - outrageous!". Naturally, I still use Dreamweaver as a coding tool now that Homesite has been integrated but I am also learning to use Design view to er... Design.

Thinking even further back, I had the same sort of experience moving from DOS to Windows. Somehow it was like losing control, being one step removed from the essential tools.

It's an act of faith. Let Dreamweaver look after your CSS. It'll be OK, honest. :)

[James]

I use Dreamweaver in both Design and Code views. However I always finish the page by going through the DW-generated code looking for anything odd.

This method works best for me - I see it as best of both world.