Jazajay
Active Member
Okay thought I would post a few more bugs which are well weird.
Set a CSS sprite to a span:
#top span:nth-child(4){background:url("../img/main.png") no-repeat}
And the rest needed to get it to work. This worked fine in Firefox, Safari and Opera.
I then removed a bit of text from the paragraph and all 3 would not render the image at all.
Here's what I did.
<p>
<span></span> Site name tag line
</p>
The text I removed was the tag line and that made all 3 not able to render the image, also adding a paragraph above the span made all 3 not render the image which is again weird, take the paragraph out and it worked fine, which is weird as the code isn't effected by paragraphs. The solution...for now....was to add a id to the span and do it old school unfortunately.
Also had a few images coded up in object tags.
<object data="img/name.jpg" type="image/jpeg"></object>
<object data="img/name.png" type="image/png"></object>
Both displayed fine in the 3 browsers however I couldn't move them or apply any CSS. The second I placed a paragraph around them the CSS effecting the object tags took effect:
#top object:nth-child(1){position:absolute;top:45px;margin-left:380px;z-index:1}
Well weird. Absolutely no CSS rules would take effect before I did that then all would.
Bar that and the learning curve it's starting to take effect nicely with very few images at the mo.
Any more I find I'll post, if anyone else has issues styling CSS with html5 please let me know, how and what you did and if you managed to sort it.
Set a CSS sprite to a span:
#top span:nth-child(4){background:url("../img/main.png") no-repeat}
And the rest needed to get it to work. This worked fine in Firefox, Safari and Opera.
I then removed a bit of text from the paragraph and all 3 would not render the image at all.
Here's what I did.
<p>
<span></span> Site name tag line
</p>
The text I removed was the tag line and that made all 3 not able to render the image, also adding a paragraph above the span made all 3 not render the image which is again weird, take the paragraph out and it worked fine, which is weird as the code isn't effected by paragraphs. The solution...for now....was to add a id to the span and do it old school unfortunately.
Also had a few images coded up in object tags.
<object data="img/name.jpg" type="image/jpeg"></object>
<object data="img/name.png" type="image/png"></object>
Both displayed fine in the 3 browsers however I couldn't move them or apply any CSS. The second I placed a paragraph around them the CSS effecting the object tags took effect:
#top object:nth-child(1){position:absolute;top:45px;margin-left:380px;z-index:1}
Well weird. Absolutely no CSS rules would take effect before I did that then all would.
Bar that and the learning curve it's starting to take effect nicely with very few images at the mo.
Any more I find I'll post, if anyone else has issues styling CSS with html5 please let me know, how and what you did and if you managed to sort it.