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;
}