Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
! important - finally found a situation where it works!
4 views
Skip to first unread message
Philip Herlihy
Jan 8, 2012, 10:09:00 AM1/8/12
to
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 page concerned is:
http://www.walthamsoft.com/foef/osmaps/2012-0114.htm
and the CSS file is at:
http://www.walthamsoft.com/foef/osmaps/maps.css
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.
--
Phil, London
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 page concerned is:
http://www.walthamsoft.com/foef/osmaps/2012-0114.htm
and the CSS file is at:
http://www.walthamsoft.com/foef/osmaps/maps.css
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.
--
Phil, London
dorayme
Jan 8, 2012, 3:57:17 PM1/8/12
to
In article <MPG.2973c1db6...@news.demon.co.uk>,
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.
--
dorayme
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.
--
dorayme
Philip Herlihy
Jan 9, 2012, 9:18:28 AM1/9/12
to
In article <dorayme-25832D...@news.albasani.net>,
dor...@optusnet.com.au says...
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".
--
Phil, London
dor...@optusnet.com.au says...
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".
--
Phil, London
dorayme
Jan 9, 2012, 3:24:21 PM1/9/12
to
In article <MPG.297507711...@news.demon.co.uk>,
...
(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>
--
dorayme
Philip Herlihy <bounc...@you.com> wrote:
> In article <dorayme-25832D...@news.albasani.net>,
> dor...@optusnet.com.au says...
> >
> > In article <MPG.2973c1db6...@news.demon.co.uk>,
> > Philip Herlihy <bounc...@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.
...
> In article <dorayme-25832D...@news.albasani.net>,
> dor...@optusnet.com.au says...
> >
> > In article <MPG.2973c1db6...@news.demon.co.uk>,
> > Philip Herlihy <bounc...@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.
...
> >
> > 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.
>
> 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
> > 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.
>
> I'm impressed - where on earth can you find that?
(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".
--
dorayme
Philip Herlihy
Jan 10, 2012, 7:33:27 AM1/10/12
to
In article <dorayme-718B0D...@news.albasani.net>,
dor...@optusnet.com.au says...
>
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'?
--
Phil, London
dor...@optusnet.com.au says...
>
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'?
--
Phil, London
Ben C
Jan 11, 2012, 5:44:45 AM1/11/12
to
On 2012-01-08, Philip Herlihy <bounc...@you.com> wrote:
[...]
for the key once but never got around to doing anything with it.
[...]
> The page concerned is:
> http://www.walthamsoft.com/foef/osmaps/2012-0114.htm
> and the CSS file is at:
> http://www.walthamsoft.com/foef/osmaps/maps.css
>
> 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
> http://www.walthamsoft.com/foef/osmaps/2012-0114.htm
> and the CSS file is at:
> http://www.walthamsoft.com/foef/osmaps/maps.css
>
> 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
for the key once but never got around to doing anything with it.
dorayme
Jan 11, 2012, 7:52:52 AM1/11/12
to
In article <slrnjgqq0t....@bowser.marioworld>,
Yes, I agree, nice indeed.
For what it is worth, consider
div#map {
...
width: 40em;
height: 30em;
...
}
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.
--
dorayme
For what it is worth, consider
div#map {
...
width: 40em;
height: 30em;
...
}
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.
--
dorayme
Philip Herlihy
Jan 11, 2012, 5:15:14 PM1/11/12
to
In article <slrnjgqq0t....@bowser.marioworld>,
spam...@spam.eggs says...
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.
You have to log on to the web builder:
https://openspace.ordnancesurvey.co.uk/osmapapi/mapbuilder
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?
--
Phil, London
spam...@spam.eggs says...
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.
You have to log on to the web builder:
https://openspace.ordnancesurvey.co.uk/osmapapi/mapbuilder
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?
--
Phil, London
Philip Herlihy
Jan 11, 2012, 5:21:10 PM1/11/12
to
In article <dorayme-61209A...@news.albasani.net>,
dor...@optusnet.com.au says...
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...)
--
Phil, London
dor...@optusnet.com.au says...
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...)
--
Phil, London
dorayme
Jan 11, 2012, 7:12:44 PM1/11/12
to
In article <MPG.29781ba75...@news.demon.co.uk>,
> > > > http://www.walthamsoft.com/foef/osmaps/2012-0114.htm
...
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
div#map {
...
...
width:1080px;
height:880px;
}
--
dorayme
Philip Herlihy <bounc...@you.com> wrote:
> In article <dorayme-61209A...@news.albasani.net>,
> dor...@optusnet.com.au says...
> >
...
> In article <dorayme-61209A...@news.albasani.net>,
> dor...@optusnet.com.au says...
> >
> > > > http://www.walthamsoft.com/foef/osmaps/2012-0114.htm
...
> > For what it is worth, consider
> >
> > div#map {
> > ...
> > width: 40em;
> > height: 30em;
> > ...
> > }
> >
> > 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
> >
> > div#map {
> > ...
> > width: 40em;
> > height: 30em;
> > ...
> > }
> >
> > 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...)
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
div#map {
...
...
width:1080px;
height:880px;
}
--
dorayme
Gus Richter
Jan 11, 2012, 8:42:04 PM1/11/12
to
On 1/11/2012 7:12 PM, dorayme wrote:
> div#map {
> ...
> ...
> width:1080px;
> height:880px;
> }
Are you forgetting percentage values?
> div#map {
> ...
> ...
> width:1080px;
> height:880px;
> }
--
Gus
dorayme
Jan 12, 2012, 6:54:18 AM1/12/12
to
In article <jeldp9$3jt$1...@dont-email.me>,
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.
--
dorayme
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.
--
dorayme
Philip Herlihy
Jan 12, 2012, 7:29:36 AM1/12/12
to
In article <dorayme-D0E3ED...@news.albasani.net>,
dor...@optusnet.com.au says...
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...).
--
Phil, London
dor...@optusnet.com.au says...
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...).
--
Phil, London
Gus Richter
Jan 12, 2012, 3:21:34 PM1/12/12
to
prevent horizontal scrolling with width:1080px;
--
Gus
dorayme
Jan 12, 2012, 6:34:17 PM1/12/12
to
In article <MPG.2978e2837...@news.demon.co.uk>,
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.
<http://chrispederick.com/work/web-developer/>
--
dorayme
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...).
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.
<http://chrispederick.com/work/web-developer/>
--
dorayme
0 new messages