Outline is bigger with Firefox 12.02

Hi Nick, thanks for your comment. Can you elaborate a bit? Do you mean the outline when you hover? Can you maybe send a screenshot and/or a link to your website?

Thanks!

Yes,when you hover with the latest firefox.
Here is the website e-bodyguide.gr

Hi Mike, congrats for the great plugin, it’s very nice.

I was doing some tests, and it seems the same thin borders appear in Chrome 25.0.1364.172 m, the last update. In Firefox and in IE 8 it’s all right, just Chrome has these borders, sometimes on the top, sometimes on the left.

I made a temporary post: https://virtude-ag.com/teste-do-wp-tiles/

When you have a time, could you please check if is something easy to resolve?

Many thanks and kind regards,
Claudia

Hi guys, I see the problem. In FF the outline is placed around the shadow (instead of just around the border). There’s a couple of solutions, but I’m a bit hesitant adding the to the plugin straight away, as they may break other people’s sites.

1. Disable the box-shadow (this seems to be Claudia’s solution)
2. Turn the outline into a box-shadow itself – like this
box-shadow: 0 0 1px 1px #ccc
3. Disable the outline and use another or nu effect for user feedback

I’m thinking about including a couple of options in the plugin in a later stage. Until that time, I think these are your options.

Second solution worked for me,thank you

Where exactly should “box-shadow: 0 0 1px 1px #ccc” go?

In your custom stylesheet, in a rule for the tiles themselves. For example:

div.wp-tile-container .grid > div:hover {
    outline: none;
    box-shadow: 0 0 1px 1px #ccc;
}

That worked, but now I’ve noticed that drop shadow doesn’t show in chrome at all (it didn’t show before this change either), so I’d like to remove the drop shadow all together.

What CSS will do that?

Set box-shadow to none, like this:

div.wp-tile-container .grid > div:hover {
    outline: none;
    box-shadow: none;
}

Hmm… I’m still seeing it in firefox. When I hover over it, the drop shadow goes away, but I’d like for it to be gone all the time.

I tried this, but it didn’t change anything.

div.wp-tile-container {
outline: none;
box-shadow: none;
}

You want it to hide both the outline and the box-shadow on hover and in normal state. Change it to this:

div.wp-tile-container .grid > div, div.wp-tile-container .grid > div:hover {
    outline: none;
    box-shadow: none;
}

Still seeing it. Top right of sidebar here.

Doh, ignore me. Got it. Thanks!