Been working on this site for a friend on and off for a while now, I'm not great at coding so have run into some problems, mainly to do with older versions of IE.

 

On IE7 it's a bit all over the place and don't know where to start with that, don't have a PC to test on.

 

There also seems to be an issue on some browsers with the main navigation BG images disappearing for a split second when you hover over it.

 

Anyway, the site is http://www.cloudlearn.co.uk/about.html

 

(That's not the homepage btw, it's the about us page, you'll be able to navigate to all the pages from there but homepage is set to a holding page just now).

 

Any other help regarding improvements is appreciated, I realise that my code is far from good so I am trying to get better.

 

Thanks

don't know where to start with that, don't have a PC to test on.

 

how u coded the site then?

jokes apart

i guess ur saying browser tester here

 

u can download ie tester

 

try this

 

and make sperate stylesheet for ie7

see here

You can get Adobe Browserlab - we use it here in the office (all mac based) and its great Make sure that if you're using complex css arguments and functions / features or css3 you put in conditional statements inside the html for an alternative IE stylesheet. IMHO there is no point in designing below IE8....

Ok I'll have a look at those. Any feedback on the site in general or about the point I made regarding the main navigation?

Main nav - no idea. It's a sprite, so that shouldn't happen. Which browsers?

Mainly chrome on mac but seems fine in others.

Does that navigation issue happen with anyone else?

Does that navigation issue happen with anyone else?

 

Yeah, it happens in webkit. If you load it up in a webkit browser (chrome/safari) and then force reload the page (ctrl+shift+r) you can see it.

 

If you then force reload the page, right click the nav > inspect element > network tab > and rerun the scenario, you can see that this is due to the fact it's invoking a new request for each image.

 

Thus leads me to the conclusion that removing that request should fix it.

 

So try changing you're :hover class from this.

 

a.navHome:hover {
background: url("../images/Nav_01.png") 0 86px;
}

to this

 

a.navHome:hover {
background-position: 0 86px;
}

Edited February 24, 201214 yr by bocaj

That doesn't work, as you'll see, it removed the BG completely on hover.

Edited February 24, 201214 yr by PRM

Yeah, you want:

 

a.navHome:hover {
       background-position: 0 -86px;
}

 

for the 2nd state of the background sprite. Negative y-axis, because the default state is at the top of the sprite.

 

Edit:

 

Scratch that.

 

#navMenu a:hover {
background-position: 0 -86px;
}

 

will target all of them, because IDs have more specificity than classes.

Edited February 24, 201214 yr by Renaissance-Design

That works, cheers!