Stange styling problem

Can you post a link to your site? It’s pretty much impossible to tell what’s going on just from looking at pictures. Much easier if we can examine the site directly using a web debugging tool like Firebug or Chrome Developer Tools.

I am using hosting it through mamp on local host. Is there anyway I can use chrome developer tools to find out?

It seems like it *MIGHT* be because the comment bubble is an image with a border. That means that it was made in an illustration program on a white background. So, when you click the link, it colors the layer of the bubble and the underlying white, or let’s call it the “canvas” layer. Try to find better quality icons, I suggest. Or upload your own. Just make sure they don’t have backgrounds, and are just the icon on either no or a transparent background.

In Chrome, right-click a comment bubble and select inspect element from the pop-up menu. The DevTools console will open up at the bottom of the browser. On the left pane will be a representation of the web elements, with the container for the bubble highlighted. On the right is the pane which shows all of the CSS rules which affect that element.

Since you are having a problem when the bubble is hovered, you need to force that state on so you can see the CSS rules for the hover state. Right-click the code line on the left pane which corresponds to the bubble and from the pop-up menu, select Force element state > :hover. This should make the bubble act like the mouse is being hovered over it.

Look at the CSS rules on the right pane for a rule which has the :hover pseudo element as part of the selector, and which has border properties set. This is the rule you will probably need to override.

Having said all of that, it could be just a matter of background positioning of the image file instead of it being a CSS border property issue. That is, for this type of animation where an element changes color on a mouse hover, what is commonly done is there is a large image file which contains a number of different icons in it. In this image file will be a white bubble and an orange bubble, for example. In the normal state, the background-image property for the bubble’s CSS will point to the image file, and the background-position property will point to the offset within the image file where the icon is located. The CSS rule will also have height & width properties that define the size of the icon. Then the CSS hover rule will change the background-position property of the element so it points to the orange balloon inside of the same file. It’s possible that the value of the background-position for the hover rule is slightly off, so that orange from an adjacent image is bleeding over. Or maybe the height and/or width properties for the hover rule are somehow bigger by a pixel or two, so again you’re getting some of the adjacent image bleeding over.

Wow, thanks for the detailed reply!! I will have a look into getting that sorted when I get back from work. Again, thank you for your reply ??

Thanks again CrouchingBruin, but I have not been able to solve the issue. It’s just a small issue but I would like to get it fixed. Could you possibly take a look at it now that it is live, and point me in the right directions? It would be a massive help. the URL is https://goo.gl/Cji7YE

What browser and OS are you using? I’m sorry, but I can’t reproduce this on either Safari or Firefox on Mac OS X Mavericks.

Yeah, I don’t see the orange border effect, either, on IE, Chrome, Firefox, Opera, or Safari (Windows).

I am using Chrome on Mavericks.

I have just realised it’s because my browser is zoomed out a little by default. I just tried resetting the zoom, and the box disappears.

My bad, thanks for making me realise it was my own browsers fault ??

Resolved.