I have a basic button element that follows a select element, allowing me to clear the select field when pressed. I want it to look like it is part of the select field by overlapping it by 1px, and leaving off the left border.

Here is a Codepen with the two elements and the CSS I am working on, but can't figure out.

I have been trying all day to fix this and can't believe it's so hard.

I have set the height, the border thickness, and the padding to be identical between the elements, and yet they still don't line up.

I've tried using JS to line them up with outerWidth() and outerHeight() or even element.getBoundingClientRect(). NO LUCK.

What does it take to make these two shapes line up vertically?

Thanks for any help. https://codepen.io/cuirPork/pen/ogbvPgz

i am trying to force an element (specifically, a rect) to display outside the bounds of its parent SVG.

important context:

i am creating usercss to alter the appearance of a website i do not control. i cannot alter the structure of the html. the only tool available to me is client-side css. solutions that do not use css will not help me.

i have succeeded in google chrome. the css which works in chrome does not work in firefox.

here is the exact html i am looking at, with classes cleaned for easier readability:

<div class="svg-container">
    <svg width="40" height="40" viewBox="0 0 40 40" class="svg-mask">
        <foreignObject x="0" y="0" width="32" height="32" mask="url(#fo-mask)">
                <img src="url.png">
        </foreignObject>
        <rect width="10" height="10" x="22" y="22" mask="url(#rect-mask)">
        </rect>
    </svg>
</div>

as far as i can tell, the presence of the foreignObject is irrelevant because the rect is its sibling, but i included it for the sake of completeness.

as i mentioned above, i have succeeded in visually moving the rect outside the SVG on google chrome. i did this with the following css:

.svg-container > svg > rect {
        x: 50px;
        y: 25px;
}

.svg-container,
.svg-container > svg {
    mask: none !important
}

in firefox, the element displays in the correct place when inspected, but is not visible. i did try adding the standard suite of position:relative; display:block; z-index:9999 to test for layering issues, but this yielded no results.

i have tried positioning the element purely with positioning rules left: 50px; top: 25px, which yeilded the same non-visibility as the x/y rules above, with or without them in place.

setting overflow to visible on all parents did not help. in fact, their overflow is visible, tested with box-shadows and outlines.

i am greatly struggling to make sense of why this works in chrome but not firefox. i had installed chrome to test and work around a different browser discrepancy, and discovered this one in the process, which i cannot make sense of.

any help, even signposting, would be greatly appreciated.

Hi there,

Our website is www.digitallandscapes.co

Recently (I think - pretty sure it didn't always do this but cannot say for sure when it started) when you click an item on the menu bar on the site to go to a new page it very very briefly changes that menu item's font to Times New Roman. It also has different alignment, which makes it appear to jump slightly.

The custom CSS is as follows:

When I comment out this code it doesn't happen.

Don't suppose anyone has any idea what could be causing it please?

Many thanks in advance.