CSS targetting '.fee-hover-container' only in IE

This sounds like a theme-specific question.

For IE-specific CSS, did you try using IE conditional comments or did you set up your CSS a different way? See #1 at https://webdesignerwall.com/tutorials/css-specific-for-internet-explorer for info on conditional comments.

If you’re still having trouble after checking out that link, can you post an example of the CSS code you’ve tried already?

If possible, please also include a link to an example page so we can see the HTML markup (no login needed, just want to see the page structure since that might help).

Hi designsimply

Thank you for your answer – let me explain a little more detailed about my situation.

In my theme’s ‘header.php’ I have placed the following:

<!--[if IE]>
                <style type="text/css">
                #headerimg{ filter:alpha(opacity=80);}
                .top img{ filter:alpha(opacity=60);}
                .top img:hover{ filter:alpha(opacity=100);}
                ul.comment-preview li{ filter:alpha(opacity=70);}
                ul.comment-preview li:hover{ filter:alpha(opacity=100);}
                #commentform input[type="text"],#commentform .comment-form-author .required,
                #commentform .comment-form-email .required{padding-left: 65px !important;}
                .top a {position: relative;top: 2px;}
                .fee-hover-container {margin-top:25px !important;}
            </style>
        <![endif]-->

You can see the page here:
https://ifdummy04.blansen.dk/gymnastik/

Could it be that the CSS must be applied somehow else? – Maybe because of the java script of the plugin?

BTW – when I add the ‘margin-top:25px !important;’ in the ‘core.css’ of the plugin it works – but for all browsers.

Are you sure .fee-hover-container is what you’re trying to target? I’ve highlighted it in red here: https://cl.ly/Q0No

I ask because that menu appears in a different place depending on where your cursor is and it doesn’t seem like adding 25px to the top will help (I could be wrong about that though).

Hi again

Yes – that is exactly the one. ??

In e.g. Firefox – when moving the cursor up and down – the container is placed at the left of the editable box – vertically aligned with the cursor.
In IE the container is still placed at the left of the editable box but about 25px higher. The container is still moving up and down with the cursor though.

The idea is in alle browsers to keep the container vertically aligned with the cursor so the user only needs to move the cursor to the left and click to select the container.

I hope this clarified my situation a bit further – otherwise do not hesitate to ask. ??

Thanks.

I installed the Techozoic Fluid theme and tested adding the .fee-hover-container {margin-top:25px;} code to the <!--[if IE]> block in header.php, and my test worked to move the hover container down in IE only. I tested with IE9 on Windows XP.

I think it should be working for you. Are you certain you’ve cleared your browser cache after making the CSS update so you know you’re looking at the latest version of the page? You can tell by viewing the page source for https://ifdummy04.blansen.dk/gymnastik/ and checking to make sure the .fee-hover-container rule is there in the header.

Also, I think it would be better to isolate what is causing the Edit button container to jump up like that in IE rather than applying IE-specific CSS to .fee-hover-container, but I couldn’t figure out how to do it. ??

Hi again

Sorry for the delay.

I tried clearing the browser cache again, but it didn’t work. ??
The .fee-hover-container was also in the header.

But… I removed the admin bar when surfing in the frontend, and that did the trick. ??
I must have made some CSS on the admin bar in the frontend specific for IE.

Thank you very much for patience and your help. ??

Nice catch! Thanks for posting back with the solution. Very cool.