IE problems, tried many solutions, need help

[mmace4]

I am very new to web design. I taught myself html, css, js, and some php this summer and made a site for my moms business. Everything has gone fine except with IE7 and earlier. I don't think this is the classic margin hack, because the left margin on the images are far from 2x times larger. The other problem is the search text box. I have tried the underscore hack, I have a margin fix js script, nothing seems to work. I feel since I am so new maybe I am missing something obvious.

Here is the site: www.chrisannphoto.com

any help would be welcome.

Thanks
Matt



this is the css for the images and the nav menu:

/* BANNER */

#banner {
width: 907px;
height: 335px;
background: url(../images/bannerBG.png);
margin: auto;
overflow: hidden;
}

#featured
{
width: 842px;
height: 250px;
padding: 0;
margin: 50px auto;
}

#featured img {
border: 1px solid gray;
}

#featured a:hover {
border: none;
}

/* NAV */

#nav {
overflow: hidden;
width: 925px;
height:70px;
line-height: 52px;
margin: auto;
background: url(../images/navBG.png) no-repeat;
}

#nav ul {

position: relative;
_margin-left: 4px;
margin-left: 8px;
}

#nav li {
width: 121px;
height: 53px;
font-size: 15px;
font-weight: bold;
display: inline;
text-transform: uppercase;
}

#nav a {
padding-top: 18px;
padding-bottom: 18px;
}

#home {
padding-left: 35px;
padding-right: 35px;
}

#galleries {
padding-left: 20.5px;
padding-right: 20.5px;
}

#services {
padding-left: 23.5px;
padding-right: 23.5px;
}

#bio {
padding-left: 18px;
padding-right: 18px;
}

#contact {
padding-left: 13px;
padding-right: 13px;
}

#nav li a:hover {

color: white;
background: url(../images/buttonHighlight.png) no-repeat;
border-left: 2px solid #6ea900;
border-right: 2px solid #6ea900;
border-bottom: none;
}

#nav img {
z-index: 1;
position: relative;
line-height: 52px;
margin-top: 9px;
left: 21px;
display: inline;
}

#nav input{ /* fix spacing */
border: none;
width: 175px;
height: 33px;
margin-top: 9px;
padding-top: 9px;
_margin-right: 17px;
margin-right: 35px;
background: url(../images/searchButtonBG.png) no-repeat;
color: white;
z-index: 0;
text-indent: 1px;
}

#nav input:focus {
outline: none;
}

[Karloff]

hey man, can you disable the IE margin js as its making my IE7 & 6 crash, seems to work fine until the dom throws it out of position and then crashes

[Karloff]

ok, just a guess, is to remove the id's from the img's, think that might be throwing something out... however it making my pc crash for some reason so its hard to tell

[mmace4]

Thanks for looking at this for me. I disabled the IEmargin.js and I removed the id tags from the images.

Matt

[Karloff]

maybe try #header a { position:absolute; top:0; left:0;}

the position: absolute applied by the js is throwing it out in IE, or you could specify something else for IE specific ?