I have another question, same site, so I’m putting it on this thread…
Please see www.ucsite.co.uk/parsonage - I’m missing something, why is the menu banner floating in the wrong place in IE? Can you spot the problem? I thought it was because I had margin: 0 auto; and margin-top: defined on the #main nav ID so I fixed that - to no avail
Seems to work OK in IE7 to me … and given that IE7 has a tiny userbase now (less than 1%) I wouldn’t be bothered by any quirks.
A nuch bigger iss ue is the size of the images in the slider. for a first-time visitor, those images are shockingly slow to load, making for a terrible user experience. I checked just one image and it was nearly a megabyte in size—way too large. Make sure to optimize them in a program like Photoshop or Fireworks. They should be down around 100 kb.
Thanks for the reminder.
I think IE 8 might be the issue actually.
HI,
The problem is that you are using an old fashioned hard clearing element in the html which was always patchy in support unless it was properly constructed. IE8 is collapsing the margin through the top and you need to add overflow:hidden here.
.clearfix {
clear: both;
overflow:hidden
}
It’s similar to a haslayout bug although IE8 wasn’t supposed to have haslayout in place.
You really should use another clearing/containing method instead rather than empty elements in the html. See the css faq on floats for a few of the common methods.
Also note that this is invalid:
<li><a href="http://www.parsonagehotel.co.uk/spa">CLOISTERS SPA</a> </li>
.
<li><a href="contact.htm">CONTACT</a>
</p>
</li>
There are 2 errors above.
Firstly you cannot have any content outside of the list pair so the dot is in no-mans-land and invalid. It must be inside the list.
i.e.
<li><a href="http://www.parsonagehotel.co.uk/spa">CLOISTERS SPA</a> . </li>
Secondly you have a closing p tag but no opening p tag so remove the closing one.
How I have got this far without fully understanding things like “block” elements I don’t know.
Oh wait, something to do with learning as I go along 
but how did it not come up earlier!?
Anyway, I like learning, so… I’ll go see if I can work out what to replace “clearfix” with.
Thanks for all your help.
I would almost say it’s all done, but I can tell something isn’t quite right because the Google-font I am using displays some of the time - but not all of the time - in Safari. Could that because I have used <h1> more than once on a page, when I shouldn’t have?
It seems to be failing in Chrome too. TBH, I gave up on google fonts, because (in my experience) they always do this, and totally suck. You’d be better off finding a similar font at Font Squirrel.
Thanks for the recommendation! There are so many font options out there now I didn’t know which supplier to trust.
Ye, FontSquirrel is a great service, and is certainly my go-to source of fonts. There are some pretty good paid options, too, like FontDeck and TypeKit.