CSS Rollover issue in Safari

Hi Guy’s,

Does anyone know why my rollover images on this page are not working right?


Basically it’s fine in firefox and ie, although in safari the image drops when rolling. Possibly padding somewhere?



Others may want to go into more detail but, for now, verifying your HTML and [URL=“http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.tonerdigital.com%2Fwordpress%2Fwork”]CSS and fixing the errors would be a good start. For one thing, you’re using the same ID on multiple elements.


This doesnt really solve the issue, I was hoping for a response to my query. I do however realise my markup needs validated.



The main problem is that you start an h3 but finish it as an h2.:slight_smile:

[B]<h3 [/B]class="intro">
        Take a look at some recent projects. If you would like to discuss a project<a href="contact"> get in touch</a>.

Fix that and safari should start working because the styles from the h3 anchor hover were bleeding into the other anchors as it assumed they were still contained within the h3.

You do have some other issues in that #folio is 280px wide but you have content inside that is 280px wide and has a 4px border also making it 8px to big to fit so that needs adjusting also.

Also you have many #folio in your page and there can only be one :slight_smile: It needs to be a class if there are more than one as ids are unique.

Hope that helps.

Hi Paul O’B,

Thanks for looking, just fixed my <h3>, all is now well. I will get a look at the “folio” DIV’s also.

Thanks a lot,