I finally came across a situation where the ! important qualifier makes a difference.
Many's the time I've vainly added it to some CSS directive (as a sort of "pretty please") only to have the browser mock my efforts, but this time it did the trick.
Some readers may remember my "walks" page. I've just added the first "meeting point" map, using a service from the Ordnance Survey which provides maps in a DIV conveniently id'd ="map".
I simply couldn't get the thing to centre, using margin: 2px auto 24px auto.
When I created an identical DIV id="maptest", with the selectors applying the same CSS to both:
div#map,
div#maptest {
...
margin: 24px auto 24px auto;
...
}
..then the 'maptest' div was correctly centred, but the 'map' one was left-aligned in the viewport. Adding ! important to the margin directive did the trick, with consistent results in IE9, Chrome, Firefox and Safari. Presumably this now overrides something in the JavaScript provided by Ordnance Survey. I haven't gone through it (other deadlines beckon). This is the first time that the !important directive has solved a problem - I wonder how often this happens.
The OS maps are lovely, but you have to apply for a (free) key, and register the hosting domain with the OS to get the maps to work, so it's not that easy to provide a demo page which can be tinkered with.
--
> I finally came across a situation where the ! important qualifier makes > a difference.
> Many's the time I've vainly added it to some CSS directive (as a sort of > "pretty please") only to have the browser mock my efforts, but this time > it did the trick.
> Some readers may remember my "walks" page. I've just added the first > "meeting point" map, using a service from the Ordnance Survey which > provides maps in a DIV conveniently id'd ="map".
> I simply couldn't get the thing to centre, using > margin: 2px auto 24px auto.
> When I created an identical DIV id="maptest", with the selectors > applying the same CSS to both:
> ..then the 'maptest' div was correctly centred, but the 'map' one was > left-aligned in the viewport. Adding ! important to the margin > directive did the trick, with consistent results in IE9, Chrome, Firefox > and Safari. Presumably this now overrides something in the JavaScript > provided by Ordnance Survey. I haven't gone through it (other deadlines > beckon). This is the first time that the !important directive has > solved a problem - I wonder how often this happens.
> The OS maps are lovely, but you have to apply for a (free) key, and > register the hosting domain with the OS to get the maps to work, so it's > not that easy to provide a demo page which can be tinkered with.
Your important is more important than their important:
div.olMap {
...
...
margin: 0px!important;
...
}
<g>
I have on rare occasions thrown an !important in for testing and I don't blame you. Generally though, it niggles at me that I have not got to the fundamentals. In your case you might not have full control over someone else's code.
> In article <MPG.2973c1db6b2356c2989...@news.demon.co.uk>,
> Philip Herlihy <bounceb...@you.com> wrote:
> > I finally came across a situation where the ! important qualifier makes > > a difference.
> > Many's the time I've vainly added it to some CSS directive (as a sort of > > "pretty please") only to have the browser mock my efforts, but this time > > it did the trick.
> > Some readers may remember my "walks" page. I've just added the first > > "meeting point" map, using a service from the Ordnance Survey which > > provides maps in a DIV conveniently id'd ="map".
> > I simply couldn't get the thing to centre, using > > margin: 2px auto 24px auto.
> > When I created an identical DIV id="maptest", with the selectors > > applying the same CSS to both:
> > ..then the 'maptest' div was correctly centred, but the 'map' one was > > left-aligned in the viewport. Adding ! important to the margin > > directive did the trick, with consistent results in IE9, Chrome, Firefox > > and Safari. Presumably this now overrides something in the JavaScript > > provided by Ordnance Survey. I haven't gone through it (other deadlines > > beckon). This is the first time that the !important directive has > > solved a problem - I wonder how often this happens.
> > The OS maps are lovely, but you have to apply for a (free) key, and > > register the hosting domain with the OS to get the maps to work, so it's > > not that easy to provide a demo page which can be tinkered with.
> Your important is more important than their important:
> I have on rare occasions thrown an !important in for testing and > I don't blame you. Generally though, it niggles at me that I have > not got to the fundamentals. In your case you might not have full > control over someone else's code.
I'm impressed - where on earth can you find that? I've now skimmed all three JS files, and although I can see obscure references to 'CSS' I didn't pick up an external file link, nor the word "important". Are you simply inferring that some directive equivalent to the above must be there somewhere, or (quite likely) am I missing it?
You're right about not having control of someone else's code. I do rather distrust the "!important" directive. It reminds me of a joke language I dreamed up with a colleague which had the "come from" command (to replace the unsafe "go to" of course) and qualifiers "sometimes" and "usually".
> In article <dorayme-25832D.07571709012...@news.albasani.net>, > dora...@optusnet.com.au says...
> > In article <MPG.2973c1db6b2356c2989...@news.demon.co.uk>,
> > Philip Herlihy <bounceb...@you.com> wrote:
> > > I finally came across a situation where the ! important qualifier makes > > > a difference.
> > > Many's the time I've vainly added it to some CSS directive (as a sort of > > > "pretty please") only to have the browser mock my efforts, but this time > > > it did the trick.
... > > > The page concerned is:
> > > http://www.walthamsoft.com/foef/osmaps/2012-0114.htm ...
> > Your important is more important than their important:
> > I have on rare occasions thrown an !important in for testing and > > I don't blame you. Generally though, it niggles at me that I have > > not got to the fundamentals. In your case you might not have full > > control over someone else's code.
> I'm impressed - where on earth can you find that?
I would like to be able to say I mounted an operation for my men (I keep a team for difficult jobs) to get into the building where the server is kept, and that they got at it after hours. But, the unexciting truth is simply that in Firefox, using the Web Developer tools (you can download them and they are free), I perused under the Edit CSS menu and it was there under a sheet called "style.css" third along after "foef.css" and, presumably, your "maps.css".
> You're right about not having control of someone else's code. I do > rather distrust the "!important" directive. It reminds me of a joke > language I dreamed up with a colleague which had the "come from" command > (to replace the unsafe "go to" of course) and qualifiers "sometimes" and > "usually".
> > > I have on rare occasions thrown an !important in for testing and > > > I don't blame you. Generally though, it niggles at me that I have > > > not got to the fundamentals. In your case you might not have full > > > control over someone else's code.
> > I'm impressed - where on earth can you find that?
> I would like to be able to say I mounted an operation for my men > (I keep a team for difficult jobs) to get into the building where > the server is kept, and that they got at it after hours. But, the > unexciting truth is simply that in Firefox, using the Web > Developer tools (you can download them and they are free), I > perused under the Edit CSS menu and it was there under a sheet > called "style.css" third along after "foef.css" and, presumably, > your "maps.css".
> > You're right about not having control of someone else's code. I do > > rather distrust the "!important" directive. It reminds me of a joke > > language I dreamed up with a colleague which had the "come from" command > > (to replace the unsafe "go to" of course) and qualifiers "sometimes" and > > "usually".
> <g>
Well, I opened everything which the base html file had links to, including the 2,891 lines of the file ...openspace.js (which you may not be able to open without the right key, and on the right domain).
Embedded in some very long lines there is indeed a small number of references to "style.css", and the declarations you found are in there.
It just goes to show that there's always some tool (often already on your desktop) which can save a lot of work! IE9 has similar developer tools, and I'll pay them more attention in future!
I must say that this file confirms my view (as an old-school software engineer) that JavaScript is invariably written by folk who simply don't get that computers understand only binary, and everything else exists solely to facilitate understanding by human readers. Yuk! I once quickly solved a tricky data-merging problem with a couple of (long) lines of Unix shell script. The file that went into the source-code-
control library had almost 200 lines of comment explaining how the other two worked. Some time later I met another engineer who'd inherited my work, and he'd never seen a shell-script before, so he was glad of it.
I wonder how many lines of comment would be needed for an intermediate JS coder to understand 'openspace.js'?
> > The OS maps are lovely, but you have to apply for a (free) key, and > > register the hosting domain with the OS to get the maps to work
> They certainly are lovely. Well done on getting that working. I applied
> for the key once but never got around to doing anything with it.
It's actually quite simple to use. The key gets embedded in the code that the OS tool generates, so you don't need to 'deploy' it yourself.
You do have to register the domains you're going to use with OS.
Then follow the stages in the boxes on the right, and finally collect your code. I paste that into a file, and then graft the relevant bit (everything in the <head> except for the <title>) into the page on which I'm working. One tip is always to delete all markers first - or if anyone really zooms out they'll see markers left over from a previous editing session!
It's a great service, and it's great that a government department has decided to give away data (and these tools) as a public service.
Whatever next?
> rather than the px widths used. Gives users a control to get > quite big then.
> Or maybe a link to a whole page where there is just the map so > users can see the context bigger without the map details being > too small as a result.
Those are fixed dimensions taken from the sample page generated by the builder tool - it's clear from using it that there are only three sizes of map available. I think I'll leave well alone! (Coward...)
> > rather than the px widths used. Gives users a control to get > > quite big then.
> > Or maybe a link to a whole page where there is just the map so > > users can see the context bigger without the map details being > > too small as a result.
> Those are fixed dimensions taken from the sample page generated by the > builder tool - it's clear from using it that there are only three sizes > of map available. I think I'll leave well alone! (Coward...)
You might be surprised! By simply altering the div#map widths and heights, to even double the px that are there at the moment or changing to em, you can get a really nice big view of it. I tried it with above and also with
Not exactly. I mentioned px and ems, I always like to hold something back, a bit like the US Marshal in The Fugitive in the storm water tunnel, he lost one gun but had another strapped to his ankle which he brought out at the appropriate moment.
Width % is OK if you use em or px for height in this map case. You get nothing if you use % for both width and height, and nothing if you omit a height instruction altogether in map.css. So a little complexity is involved here.
> > > rather than the px widths used. Gives users a control to get > > > quite big then.
> > > Or maybe a link to a whole page where there is just the map so > > > users can see the context bigger without the map details being > > > too small as a result.
> > Those are fixed dimensions taken from the sample page generated by the > > builder tool - it's clear from using it that there are only three sizes > > of map available. I think I'll leave well alone! (Coward...)
> You might be surprised! By simply altering the div#map widths and > heights, to even double the px that are there at the moment or > changing to em, you can get a really nice big view of it. I tried > it with above and also with
Yes, I am surprised - it certainly works. I was rather uneasy that it might break the OS code (or conceivably the terms). I've tried it, but I think I prefer the original size, so I'll stick with that.
Curious to know how you're viewing it with these changes, as I thought the maps only rendered if served from my domain. Are you using a browser-based style-sheet? Having asked that, it does render on my development machine. My ISP gives its customers each a subdomain, and I may have registered that (can't remember - it's not the sort of thing you write down...).
> Not exactly. I mentioned px and ems, I always like to hold
> something back, a bit like the US Marshal in The Fugitive in the
> storm water tunnel, he lost one gun but had another strapped to
> his ankle which he brought out at the appropriate moment.
> Width % is OK if you use em or px for height in this map case.
> You get nothing if you use % for both width and height, and
> nothing if you omit a height instruction altogether in map.css.
> So a little complexity is involved here.
Right. I was thinking % for width only. I brought this up only to prevent horizontal scrolling with width:1080px;
> > > > rather than the px widths used. Gives users a control to get > > > > quite big then.
> > > > Or maybe a link to a whole page where there is just the map so > > > > users can see the context bigger without the map details being > > > > too small as a result.
> > > Those are fixed dimensions taken from the sample page generated by the > > > builder tool - it's clear from using it that there are only three sizes > > > of map available. I think I'll leave well alone! (Coward...)
> > You might be surprised! By simply altering the div#map widths and > > heights, to even double the px that are there at the moment or > > changing to em, you can get a really nice big view of it. I tried > > it with above and also with
> Yes, I am surprised - it certainly works. I was rather uneasy that it > might break the OS code (or conceivably the terms). I've tried it, but > I think I prefer the original size, so I'll stick with that.
Sure, just was mentioning that you can and also that some people might like to be able to see more context, and not necessarily on the page concerned. There could be a link to another page with just the map and the width be in either ems, lots of pxs or, as Gus, pointed out, in % (which would be the best for a linked page with just the map, providing the most flexibility).
About %, if you wanted a % height as well, you would need to
bypassing the reason that height in % does not work. Work it so the map itself is a percentage height of its container, ensuring the container of the map has a % height and this container's container, if there is one is heighted, all the way back to the HTML element, all at 100% say. Have not gone into this, but it could be something for a rainy slow day.
> Curious to know how you're viewing it with these changes, as I thought > the maps only rendered if served from my domain. Are you using a > browser-based style-sheet? Having asked that, it does render on my > development machine. My ISP gives its customers each a subdomain, and I > may have registered that (can't remember - it's not the sort of thing > you write down...).
Yes, there are various facilities to see what things will do if your server were supplied different css. It's a bit like being unable to actually change God's mind, He being Very Stubborn and Intransigent but imagining the consequences of a softer side to Him.
