How to fix a logo displaying incorrectly in certain browsers

[sphinx]

Hello.

 

On my site, the logo located here: http://viraltrend.co.uk/

 

Displays OK on Chrome but when I try and view it on internet explorer, it looks like this:

 

 

Is there a reason why this is happening and what is the best way to fix it?

 

Thank you.

[OrionSuperman]

Not sure exactly what problem you are having, but my guess is the jagged edges.

 

I am not very experienced, but here is my take on the situation. You are using a transparent .png for your logo, and the edges of the letters are semi-transparent which IE has a problem with. If it is above 50% it is becoming solid, under 50% becoming 100% transparent. You can use fill on the background in an image editor to the same color as your current background color and that will smooth the lines.

 

Hope this fixes the issue?

[Ansego]

@OrionSuperman: It is a overlapping problem when viewed in different browsers. Might want to show the code of the logo div area plus the css so others can take a look. 

 

Have you tried:

 

You tried:

position: relative

OR

overflow:hidden

I like the style of your website.

Edited March 26, 2014 by Ansego

[sphinx]

 

@OrionSuperman: It is a overlapping problem when viewed in different browsers. Might want to show the code of the logo div area plus the css so others can take a look. 

 

Have you tried:

 

You tried:

position: relative

OR

overflow:hidden

I like the style of your website.

 

 

Thank you sir,

 

I'll look to implement that!

 

Thank you so much the feedback, I've worked hard to keep it looking slick and fast yet maintain a perfect mobile theme also.

 

Cheers.