Hi,
I have recently recorded my site after having previously done it on vsd and am having some compatibility issues with ie.
On the artists page the background colour for the div containing artist name is show twice in ie but not in any other browsers. I have tried everything i know. Here is the page; www.newbornsounds.co.uk/artists and here is the css; www.newbornsounds.co.uk/css/css.css
Thanks
Browser compatibility issues
The page has come up with a 403. I will sort that out but please visit www.newbornsounds.co.uk and navigate to artists
It could be that the code is invalid.
This is what you have:
and later you have:
The first part is incorrect, whereas the latter is correct. The first part of your link should be rearranged as such:
So that the DIV (which contains the CSS characteristics) is rendered, and the link is rendered inside of it, not above it.
If you look at the IE developer tools it keeps it as is...
Whereas Chrome's developer tools shows that Chrome's rendering engine closes the <a> tag... so it is technically rendering this:
so the a is empty and not displayed...
I'm not exactly sure how you would go about modifying this in VSD without having to manually change every link.
However, you can change the way IE renders it... to do so just add this to the HEAD of your document:
<!--[if IE]>
<style>
a + div#artistsname {display:none; }
</style>
<![endif]-->
That should make the extra gray box go away, and leave everything intact in FF, Chrome, Opera, and Safari.
Let me know if that works out, or if you need more help with that.
This is what you have:
<a href="artists/badbadme.html"><div id="artistsname">
and later you have:
</a></div>
The first part is incorrect, whereas the latter is correct. The first part of your link should be rearranged as such:
<div id="artistsname"><a href="artists/badbadme.html">
So that the DIV (which contains the CSS characteristics) is rendered, and the link is rendered inside of it, not above it.
If you look at the IE developer tools it keeps it as is...
<a><div>...
Whereas Chrome's developer tools shows that Chrome's rendering engine closes the <a> tag... so it is technically rendering this:
<a></a><div>
so the a is empty and not displayed...
I'm not exactly sure how you would go about modifying this in VSD without having to manually change every link.
However, you can change the way IE renders it... to do so just add this to the HEAD of your document:
<!--[if IE]>
<style>
a + div#artistsname {display:none; }
</style>
<![endif]-->
That should make the extra gray box go away, and leave everything intact in FF, Chrome, Opera, and Safari.
Let me know if that works out, or if you need more help with that.
Thanks for all the help. I am not using vsd and have learnt to code now so the first fix worked great. I can't believe I didn't spot that as I was looking at the code for ages trying to see what was wrong. I also found a load of link tags that had not been closed so thank you so much.
There is also one other small problem in ie with the <hr> under the links. It displays perfectly in all other browsers but in ie it is pushed up close to the links. I used a <br> to get the break in all other browsers but for some reason it won't work in ie. Is there a quick fix in css or something I could put in the head that would fix the issue but not change it in any other browsers?
Thanks again
Jacob Windsor
www.newbornsounds.co.uk
There is also one other small problem in ie with the <hr> under the links. It displays perfectly in all other browsers but in ie it is pushed up close to the links. I used a <br> to get the break in all other browsers but for some reason it won't work in ie. Is there a quick fix in css or something I could put in the head that would fix the issue but not change it in any other browsers?
Thanks again
Jacob Windsor
www.newbornsounds.co.uk
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.