Trouble applying css to an svg graphic Options

[Brian Chandler]

Please look at test page: https://imaginatorium.com/test.html
All the (relevant) javascript and css is included.

The top bit is a test of my "Destination"dropdown box.

div: blip is the box containing a bit of Italian and a pink box. It has *position: relative*, which I believe makes it css:positioned. (All css (mis)terminolog preceded thus)

div: blop has a pink background; includes the pulldown triangle at the right. Click this to display the dropdown.

(If you go somewhere else in the shop, like https://imaginatorium.com/aki.html (or if you have visited before) you can enter a destination which will appear in the pink box. "testdrop" is really "destdrop"... name changed to make it independent.)

The dropdown is div:testdrop, which I believe is an immediate child of div:blip. It has position css:absolute, which I believe means relative to the nearest enclosing css:positioned element.

CODE

    /* dropdown menu */
#testdrop {
    position: absolute;
    top: 0px;
    right: 0px;
...

According to everything I have read, this should mean that the dropdown is positioned exactly in the top right corner of div:blip. But it isn't.

But the real problem is the 'X' for closing the dropdown. Any css I apply to the svg itself seems to be ignored. The inspector thingy shows it in the list of css, without any sort of complaint, but refuses to show anything at all about the svg element (the 'X') itself. So I put it inside a div, and applied positioning to this div:

CODE

DIV.svgx {
    position: absolute;
    margin: 0;
    border: none;
    padding: 0;
    height: 12px;
    width: 12px;
    top: 10px;
    right: 10px;
border: solid thin #ff66ff;
}

This seems to be positioned correctly, but the svg element is 12x12 pixels. So why does it occupy a rectangle about 12x20 pixels. (Previously, I did not specify the height of div:svgx, and the div automatically sat around the 'X', with n pixels of padding top and bottom. But the padding is set to 0, as is margin.

Can anyone see why this (div version) is behaving like this, and can anyone tell me why I cannot seem to apply any css to the svg element itself.

Sorry if this seems scrappy: it has taken me something like an hour just to cut all the bits out of various included JS and css files. Grateful for help.

[Christian J]

In the CSS:

CODE

top: 20;
left: 20;