How do you know which CSS properties apply to which selectors? I.e. given that I want to change the spacing around lists how do I find whether it's padding or margin (or border?) that I need to change and/or what the defaults are? Not to mention how to know whether it's the space below the heading above or the space above the list that needs reducing. Personally I think we should throw the whole lot in the bin and start again! After playing with this for quite a while and having looked at lots of templates and stylesheets they're all a total mess of the worst sort of unstructured 'code' - it's the equivalent of the worst excesses of spaghetti code in Basic. I don't think it's the fault of the writers of the code, it's inherent in the way that HTML and CSS work. It's almost invitable that the template and stylesheet will become a horrible interwoven mess of classes, IDs and so on. Not to mention - why is it that the default spacing of HTML headings, lists, etc. is so awful? The defaults are such that paragraphs and lists are spaced equally from the things above them and below them. Surely a heading (for example) should be closer to the text/list below it that it refers to and further from what's above it? I always have to go and play games with the spacing to get what looks to me a reasonable layout that I would expect to get by default. .... end of Friday rant! :-) -- Chris Green
On Friday 09 March 2007 16:04, Eur Ing Chris Green wrote:
How do you know which CSS properties apply to which selectors?
I.e. given that I want to change the spacing around lists how do I find whether it's padding or margin (or border?) that I need to change and/or what the defaults are? Not to mention how to know whether it's the space below the heading above or the space above the list that needs reducing.
Welcome to the wonderful world of HTML and CSS. There are standards for the syntax of both, and standards for the behaviour. But there are no standards or defaults for CSS property values. Every browser implements its own defaults for properties, not to mention interpretation of (or, in some cases, complete disregard for) the semantics and behaviour of HTML/CSS. To answer your question: you don't. All you can do is experiment. Have fun. Cheers, Richard -- -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Richard Lewis http://www.richard-lewis.me.uk/ JID: ironchicken@jabber.earth.li -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
On Fri, Mar 09, 2007 at 04:21:41PM +0000, Richard Lewis wrote:
On Friday 09 March 2007 16:04, Eur Ing Chris Green wrote:
How do you know which CSS properties apply to which selectors?
I.e. given that I want to change the spacing around lists how do I find whether it's padding or margin (or border?) that I need to change and/or what the defaults are? Not to mention how to know whether it's the space below the heading above or the space above the list that needs reducing.
Welcome to the wonderful world of HTML and CSS. There are standards for the syntax of both, and standards for the behaviour. But there are no standards or defaults for CSS property values. Every browser implements its own defaults for properties,
OK, so given that this is just for my own delectation and I'll be viewing it only using firefox are the firefox/mozilla defaults documented anywhere?
not to mention interpretation of (or, in some cases, complete disregard for) the semantics and behaviour of HTML/CSS.
To answer your question: you don't. All you can do is experiment.
Hence the existing mess! :-) -- Chris Green
Eur Ing Chris Green <cl@isbd.net> wrote:
How do you know which CSS properties apply to which selectors?
I.e. given that I want to change the spacing around lists how do I find whether it's padding or margin (or border?) that I need to change and/or what the defaults are? Not to mention how to know whether it's the space below the heading above or the space above the list that needs reducing.
There are three main ways IIRC: 1. the specs state which properties of which selectors get priority and what the defaults should be for most cases when it matters; 2. then there are some famous browser breakages (mostly IE, but there are a few others) to avoid; 3. and finally you can use temporary divs, borders, user stylesheets, CSS-altering javascripts and/or test copies of sites to debug strange results seen in a browser.
Personally I think we should throw the whole lot in the bin and start again! After playing with this for quite a while and having looked at lots of templates and stylesheets they're all a total mess of the worst sort of unstructured 'code' - it's the equivalent of the worst excesses of spaghetti code in Basic. I don't think it's the fault of the writers of the code, it's inherent in the way that HTML and CSS work. It's almost invitable that the template and stylesheet will become a horrible interwoven mess of classes, IDs and so on.
Unsurprisingly, I disagree. Classes and IDs need be no more interweaving between template and stylesheet than the tag names are interweaving. If they get too fiddly, the design probably needs a rethink. xhtml and CSS is a fairly good solution for what they aim to do and there's plenty of good advice out there from standards bodies and associations. Now, if only we could kick the worst bugs out of the browsers and weed out the non-web designers muddying the waters, life would become far easier. It's not that similar (actually, surprisingly different) to print page design or screen interface design and people who think they can waltz straight from one of those other fields into web design without learning new skills or heeding the good advice almost inevitably come a complete cropper. Sadly, many buyers seem to take a quick look at printed portfolio or single-browser-tweaked views and go for them, instead of looking at the work across a number of views, and I think that's why 93% of web sites are inaccessible crap, according to http://news.bbc.co.uk/1/hi/technology/6210068.stm Rescuing such sites is part of my bread and butter, but it's a hard sell sometimes ("I've spent X and my site looks no different to me" "but it does to many other people and computers") which I think has to be built on trust. I've often spoken out against the effects of search engines (rewarding spam, distracting from good cataloguing), but they seem to reward sites for being well-designed and that's making selling good web design easier, as do all the studies showing how easy-to-use means attractive-to-buy-from.
Not to mention - why is it that the default spacing of HTML headings, lists, etc. is so awful? [...]
Because they're legacy. Mistakes of the past. Like why FAT hard disks are so awful. Hope that helps, -- MJ Ray - see/vidu http://mjr.towers.org.uk/email.html Webmaster/web developer, statistician, sysadmin, online shop maker, developer of koha, debian, gobo, gnustep, various mail and web s/w. Workers co-op @ Weston-super-Mare, Somerset http://www.ttllp.co.uk/
Eur Ing Chris Green <cl@isbd.net> wrote:
How do you know which CSS properties apply to which selectors?
I.e. given that I want to change the spacing around lists how do I find whether it's padding or margin (or border?) that I need to change and/or what the defaults are? Not to mention how to know whether it's the space below the heading above or the space above the list that needs reducing.
If CSS is getting you down, I can't recommend enough the Web Developer toolbar for firefox (https://addons.mozilla.org/firefox/60/). Once installed, navigate to the offending web page, select the CSS dropdown and choose View Style Information, then select any element on the page and it shows you the styles applied to it. For bonus points, it even lets you play with the CSS locally and see the effects immediately. There are lots of other goodies in there too ... HTH Safe
On Fri, Mar 09, 2007 at 04:49:48PM -0000, Safe Hammad wrote:
Eur Ing Chris Green <cl@isbd.net> wrote:
How do you know which CSS properties apply to which selectors?
I.e. given that I want to change the spacing around lists how do I find whether it's padding or margin (or border?) that I need to change and/or what the defaults are? Not to mention how to know whether it's the space below the heading above or the space above the list that needs reducing.
If CSS is getting you down, I can't recommend enough the Web Developer toolbar for firefox (https://addons.mozilla.org/firefox/60/). Once installed, navigate to the offending web page, select the CSS dropdown and choose View Style Information, then select any element on the page and it shows you the styles applied to it.
For bonus points, it even lets you play with the CSS locally and see the effects immediately. There are lots of other goodies in there too ...
Now that *does* sound useful, thanks for the pointer. ... already installed it, the ease of doing things like this nowadays is impressive! Restarting firefox it even came back with all the same tabs open. -- Chris Green
On Fri, Mar 09, 2007 at 04:32:53PM +0000, MJ Ray wrote:
Eur Ing Chris Green <cl@isbd.net> wrote:
How do you know which CSS properties apply to which selectors?
I.e. given that I want to change the spacing around lists how do I find whether it's padding or margin (or border?) that I need to change and/or what the defaults are? Not to mention how to know whether it's the space below the heading above or the space above the list that needs reducing.
There are three main ways IIRC:
1. the specs state which properties of which selectors get priority and what the defaults should be for most cases when it matters;
Where? That's what I can't find. For example, say I have some <H4> headings with paragraphs underneath, what is the space in between and what are its default values? I don't even seem to be able to find a definitive list of what CSS properties I can use with, say, <H4>.
2. then there are some famous browser breakages (mostly IE, but there are a few others) to avoid;
Well I'm going to be basically mono-browser so that's not much of an issue for this particular case.
3. and finally you can use temporary divs, borders, user stylesheets, CSS-altering javascripts and/or test copies of sites to debug strange results seen in a browser.
Yes, I've been doing that as the only way to make any progress at all. -- Chris Green
Eur Ing Chris Green <cl@isbd.net> wrote:
On Fri, Mar 09, 2007 at 04:32:53PM +0000, MJ Ray wrote:
1. the specs state which properties of which selectors get priority and what the defaults should be for most cases when it matters;
Where? That's what I can't find.
There's a summary table in the CSS2 spec at http://www.w3.org/TR/1998/REC-CSS2-19980512/propidx.html while the xhtml spec DTDs will tell you the types of particular tags http://www.w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0-Strict
For example, say I have some <H4> headings with paragraphs underneath, what is the space in between and what are its default values? I don't even seem to be able to find a definitive list of what CSS properties I can use with, say, <H4>.
The DTD says h4 is a heading and so a block, a Block and a Flow and so on. So, anything in the CSS summary which applies to all or blocks should be applicable to it. If you're still using pre-2000 tags like H4, I think you're more likely to activate browser quirks modes and so have more problems controlling layout. Hope that helps, -- MJ Ray - see/vidu http://mjr.towers.org.uk/email.html Webmaster/web developer, statistician, sysadmin, online shop maker, developer of koha, debian, gobo, gnustep, various mail and web s/w. Workers co-op @ Weston-super-Mare, Somerset http://www.ttllp.co.uk/
On Fri, 2007-03-09 at 23:18 +0000, MJ Ray wrote:
If you're still using pre-2000 tags like H4, I think you're more likely to activate browser quirks modes and so have more problems controlling layout.
Hope that helps,
I thought most browsers used the !DOCTYPE to determine quirks/standards mode. The <h> tags certainly don't trigger it in Firefox when you're using xhtml 1.0 strict in the DTD.
participants (5)
-
Dave Crisp -
Eur Ing Chris Green -
MJ Ray -
Richard Lewis -
Safe Hammad