Proper (meaning valid and semantic) Markup and CSS, Please.

nick1presta

That is what I planned to do, I just thought of mentioning that we could all chat about it first, had there been a need. *goes off and tweaks stuff*

SpookyET

Thank you nick1presta. Hopefully, it will show up right in Opera with your changes. If you can, stay away from absolutely positioned divs like like it is now. They are hard to style. Try to make it liquid.

nick1presta

Well, there isn't a use of background images on the default theme AKAIK (apart from the drop shadow to my left) so I don't see why it wouldn't be liquid for the default theme and any custom themes can be changed.

Ben

As I'm not an xhtml pedant or anything, just a humble designer. I regard <strong> and <em> as presentational tags rather than layout.

Bergamot

There is no such thing as a layout tag. The purpose of all tags is to communicate useful information about the content of a page to the user agent. Presentational information (the kind conveyed by <b> and <i>, for example) is useful for rendering content on a standard PC web browser, but not really good for anything else. <em> and <strong>, on the other hand, provide useful information of the *meaning* of the content inside (that it is more important than the content outside), and rely on stylesheets to map that meaning to the presentation.

SpookyET

nick1presta, please use em instead of px. make 1em = 10px on the html by doing font-size: 62.5%. You can use px for borders and padding, but not for widths, heights, fonts.

lech

Spooky, have you a good resource for em to px conversions and vice versa? I never really understood the conversions and pretty much used whatever rendered well on my screens here.

NickE

I believe 1 em is the width of a capital M in the current font size.

SpookyET

The default font for all browsers is 16px. html, body { font-size: 62.5% } <- this makes 1em equal 10px p { 1.2em } <- 12px

nick1presta

nick1presta, please use em instead of px. make 1em = 10px on the html by doing font-size: 62.5%. You can use px for borders and padding, but not for widths, heights, fonts.

I planned on doing that anyways.

Spooky, have you a good resource for em to px conversions and vice versa? I never really understood the conversions and pretty much used whatever rendered well on my screens here.

http://www.reeddesign.co.uk/test/points-pixels.html

Bergamot

The problem with using ems for fonts is that the percentages compound as elements are nested, making it very difficult to tell exactly what size a font needs to be.

lech

yeah, I think this is mainly what's been driving me away from using em in the first place. I understand the basics but the nested relative stuff boggles the mind.

Bergamot

It doesn't help that certain fonts look extremely ugly at certain sizes...

crazybat

If it helps, I would suggest the following when dealing with font sizes on a global scale; a) Remove all references to font sizes. Yes, you heard me right. Sometimes you are dealing with percentages within percentages within percentages and it's impossible to figure out. Remove them all and start from scratch. b) Set a base font size in the html, body selector to 100% In other words; Example; html, body { ... /* in addition to color, background, etc */ font: 100% [Whichever font(s) you are using], [Serif or sans-serif] } c) Set Global font sizes for your core elements like a, abbr, acronym, headings, horizontal rules, all list elements, paragraphs, etc. Example a { font-size: 0.8em; } This way, you know what you are dealing with right off the bat. d) Further refine your CSS into the IDs set up within the document. Usually when I build something, I look at your basic structure of a <div id="container">, then within this there can be a <div id="banner">, <div id="content">, <div id="footer">, etc. Basically, whatever makes sense on how to section the document up logically. So, once you've done this, you can further refine your CSS as so; Example: #banner h1 { ... } #banner h1 a { ... } #content h2 { ... } #content dl { ... } #footer h3 { ... } etc. From here, you can then know for sure that any font sizes (and other CSS properties) set in the CSS will be contained within the unique ID of the div you are working with. So, with the example of the 'banner h1' selector, you know that the CSS will only be applied to any heading 1 within the banner div block. Basically, minimizing the 'damage' you can cause. Sorry if this is long winded, but I've done this kind of stuff for years. So, I'll be happy to clarify if needed.

timberford

personally i wouldn't set the font size on an a tag because links often find themselves inside paragrahps and thus your nested font-size issue (assuming you set a font size on the p - which is surely a must). anyway, nick have you got a version going that you are working on yet?

lech

/me bookmarks this thread for later reference.

andy

lech, here's a cheat sheet for em to pixel sizing in the common sizes.

common em pixel sizing

I'm using the method outlined by clagnut here , basically setting the body font-size percentage to 62.5% so that 1em = 10px. but extending it so that i know how em sizes are affected by changing the size of the containing element.

As for the topic at hand, here's as far as I got the last time I tried this. Feel free to use it as a base, whoever wants to.

discussions
comments
zip of the whole deal

lech

cool, thanks andy!

AmbitiousLemon

Are the reasons for using ems versus pixels just those presented in the clagnut article? I had gotten the impression that there were more convincing arguments for their use than the hypothetical IE user who wants to resize the page's text.

Bergamot

Well using ems for page dimensions and using ems for text size are two completely different issues.

The main argument against pixels for text sizing is that the web is supposed to be device-independant.