LJackson
12-10-2009, 04:55 PM
Hi All,
i have just noticed a nice little application available from google webmasters which helps you speed up your website :)
i am going throught the list and im stuck on
use efficient CSS selectors
could someone please tell me what is wrong/inefficient with this code
here is the speed info displayed
Rules that use the :hover pseudo-selector on non-anchor elements. This can cause performance problems in Internet Explorer versions 7 and 8 when a strict doctype is used.
* .individual_code_container:hover
* .content1:hover
* .content2:hover
* .content3:hover
* .content4:hover
* .content5:hover
* .content6:hover
* .content7:hover
* .content1:hover div
* .content2:hover div
* .content3:hover div
* .content4:hover div
* .content5:hover div
* .content6:hover div
* .content7:hover div
and this is how it looks in my php page
.content1:hover,.content2:hover,.content3:hover,.content4:hover,.content5:hover,.content6:hover,.con tent7:hover{background:orange;}
.content1 div,.content2 div,.content3 div,.content4 div,.content5 div,.content6 div,.content7 div{display:none;}
.content1:hover div,.content2:hover div,.content3:hover div,.content4:hover div,.content5:hover div,.content6:hover div,.content7:hover div{display:block;z-index:999;}
if someone could please shed some light on this for me thanks.
i have so far cut off 10 seconds from my load time which is nice :D
many thanks
Luke
i have just noticed a nice little application available from google webmasters which helps you speed up your website :)
i am going throught the list and im stuck on
use efficient CSS selectors
could someone please tell me what is wrong/inefficient with this code
here is the speed info displayed
Rules that use the :hover pseudo-selector on non-anchor elements. This can cause performance problems in Internet Explorer versions 7 and 8 when a strict doctype is used.
* .individual_code_container:hover
* .content1:hover
* .content2:hover
* .content3:hover
* .content4:hover
* .content5:hover
* .content6:hover
* .content7:hover
* .content1:hover div
* .content2:hover div
* .content3:hover div
* .content4:hover div
* .content5:hover div
* .content6:hover div
* .content7:hover div
and this is how it looks in my php page
.content1:hover,.content2:hover,.content3:hover,.content4:hover,.content5:hover,.content6:hover,.con tent7:hover{background:orange;}
.content1 div,.content2 div,.content3 div,.content4 div,.content5 div,.content6 div,.content7 div{display:none;}
.content1:hover div,.content2:hover div,.content3:hover div,.content4:hover div,.content5:hover div,.content6:hover div,.content7:hover div{display:block;z-index:999;}
if someone could please shed some light on this for me thanks.
i have so far cut off 10 seconds from my load time which is nice :D
many thanks
Luke