HTML - Two Browsers On One Page

Hi i was wondering if anyone can help me with making my page compatible with older browsers IE7+. My page is www.marksbodyshop.org

The css is:
Code:

html,body {
    height:100%;
    margin:0;
    background-color:#000;
    background-image:url(../images/firstpage.gif),
    url(../images/firstpage-backup-for-safari.gif);    /* required by Safari */
    background-size:100% 100%; 
 }
#container {
    height:73%;
    background-image:url(../images/update.png);
    background-size:100% 100%;
 }
#nav {
    position:absolute;
    padding:0;   
    margin:0;
    list-style-type:none;
    height:7%;
    width:57%;
    top:20%;
    left:20%;   
    z-index:1;
 }
#nav li {
    width:16%;
    margin:1%;
    height:100%;
 }
#nav a {
    display:block;
    width:100%;
    height:100%;
    outline:none;
    text-indent:-9999px;
    background-size:100% 300%;
 }
#about {background-image:url(../images/aboutus.png);}
#about1 {background-image:url(../images/contactus.png);}
#about2 {background-image:url(../images/freelunch.png);}
#about3 {background-image:url(../images/map.png);}
#about4 {background-image:url(../images/meettheteambutton.png);}
#nav a:hover {background-position:0 -100%;}
#nav a:active {background-position:0 -200%;}

Just wondering if someone out there is able to quickly spot the horrible quirk in the HTML on this page:

www.vergola.co.nz/contact.htm

It renders fine in Firefox and Safari, (ie the page content is at the top of the window) but in IE the content appears way down the page with a large white space above it. ( I hate IE so much)

The page has been edited by numerous people of varying degrees of knowledge so the whole page is a bit of a mess...

Thanks so much!

Hello there,

My index page validates completely since I tidied it up using html tidy, but when i run it through browsershots it is still completely broken in firefox, opera, etc. basically anything other than MSIE it displays incorrectly.

If anyone could shed any potential light on the situation it would be greatly appreciated. As you can no doubt tell, I'm no expert on creating web pages using html and css and if a page validates but still doesn't work I can't even begin to try and work out what is going on

I did run my css through a validator and it came up with 30 or so instances of the same error, I hadn't ended a dimension value with px, i had just left the number, could this be the culprit? I have since corrected my style sheet so that it validates completely but I cannot upload from my FTP on the PC i'm currently using to see if it affects the browsershots results.

I just wanted to put it out there and see what the ideas were of people who know a lot more about website building than I do.

Bottom line: if i have an html page and a css page that validate 100% using the w3c standard is it guaranteed to work in all browsers, or are there quirky little things I need to be aware of when wanting my site to display correctly in less popular browsers such as safari etc.?

Any feedback is greatly appreciated. :-)

Sincere thanks in advance,



Alex


Browser screenshots - http://browsershots.org/http://www.alexhaines.co.uk/

HTML Validity results - http://validator.w3.org/check?uri=http%3A%2F%2Fwww.alexhaines.co.uk%2Findex.html&charset=%28detect+automatically%29&doctype= Inline&group=0

CSS Validity results - http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.alexhaines.co.uk%2Fstyle.css&profile=css21&usermedium=all&warning=1&l ang=en

My site - http://www.alexhaines.co.uk

I built this page and I'm noticing it works fine in Dreamweaver browser but not in opera and safari and IE? What am I doing wrong?

http://www.rendemolition.com/patio1.html

I have this login on a website i'm doing, in Firefox, Opera & Safari the two text fields and the login button are aligned to the very left of the page but in IE the text boxes only stay about 15px further to the right.

This means they are out of line with other elements on the page

Can anyone tell from this code below what i'm doing wrong or do you need more code to go on.

<form name=login>
<table width=200 border=0 align="left" cellpadding=3>
<td><input type=text name=username></td></tr>
<td><input type=text name=password></td></tr>
<tr><td colspan=2 align=left><input type=button value="Login!" onClick="Login()"></td></tr>
</table>
</form>


cheers