Cross-browser compatibility issues. Can you guess which browser?
I'm working on a site which needs to look good across the board up to and including IE7. Joy!
I've put up a test page here:
I'm a Mac user, and have (just about) got everything looking good across the major Mac browsers (Safari, Chrome, FF & Opera). The only issue there is the textbox at the bottom of the page. (Looks good in Chrome, but I can't seem to get it the same across the others). It's not a major issue, but if you have any ideas I'd be grateful to hear them.
Anyways, when I was (reasonably) happy with the standards compliant browsers, I decided to take on IE7. After fixing a few bugs, there's one that remains, and I have no idea what to do about it. If you look on the home page, there is a <section> tag with an id of "welcome". The "book-now" <div> should line up with the bottom of the image. But its about 5px lower. There's no margin or padding on the image, so I'm not sure why the <section> is not wrapping to the height of the image.
Also, I'm using the @font-face declaration to serve the fonts from the server. IE7 doesn't load the fonts, but just renders them in Times New Roman.
I don't have access to all IE builds, but I've been using Adobe's BrowserLab to check out the page in IE8 and 9, but the css file is, for some reason, not loading. Can anyone check this out for me, and let me know if its an issue with BrowserLab, or with my css file?
Many thanks in advance,