[mehmetserif]

Herkese merhaba,

Hazırladığım bir web sitesinde CSS ve xhtml kullanarak şablonu hazırlamaya çalışıyorum ancak daha işin başında bir sorun ile karşılaştım. Sayfa Firefox ve Opera'da çok güzel çalışıyor bir sorun yok ancak IE7 ile açtığım zaman header kısmında alta koydugum navigasyonda bir sorun oluşuyor. HTML ve CSS kodları su sekilde

<div id="container">
    	<div id="header">
        	<img src="images/der_header.jpg" alt="Boyabat Oğlakçılar Köyü" />
            <ul id="mainNav">
            	<li><a href="#" title="Anasayfa">Anasayfa</a></li>
                <li><a href="#" title="Galeri">Galeri</a></li>
                <li><a href="#" title="Köyümüz">Köyümüz</a></li>
                <li><a href="#" title="Derneğimiz">Derneğimiz</a></li>
            </ul>
        </div>
        <div id="content_a">
        </div>
        <div id="content_b">
        </div>
        <div id="footer">

        </div>
    </div>

* {
margin: 0;
padding: 0;
}

body {
background: #8e7c34 url(images/der_back.gif) repeat-y;
font: x-small/1.6em "Lucida Grande", Verdana, Sans-serif;
}

/*-------LAYOUT-----------*/

#container {
width: 760px;
margin: 0 0 0 1px;
}

#header {
clear:both;
height: 215px;
margin-bottom: 5px;
padding:0;
}

#content_a {
float: left;
width: 500px;
padding: 2px 2px 0 2px;
margin: 0;
}

#content_b {
float: right;
width: 245px;
padding: 5px 5px 0 5px;
margin: 0;
}

#footer {
clear: both;
margin-top: 5px;
padding: 0;
}

/*--------END OF LAYOUT ------------**/

/*--------NAVIGATION---------------------*/
#mainNav {
width: 755px;
height: 30px;
background-color: #9a852d;
margin: 0;
padding: 7px 2px 2px 2px;
}

#mainNav ul {
list-style-type: none;
border: 0;
padding: 0;
margin: 0;
}

#mainNav li {
display: block;
margin: 0;
padding: 0;
float: left;
width:auto;
}

#mainNav a {
display: inline;
color: #e2ca66;
text-decoration: none;
padding: 10px 10px;
font-size: 2em;
border-right: 1px solid #e2ca66;
}

#mainNav a:link {
color: #e2ca66;
}

#mainNav a:visited {
color: #e2ca66;
}

#mainNav a:hover {
color: #fff;
}

#mainNav a:active {
color: #e2ca66;
}

ve olusan gorunumde su sekilde:



Burada acaba nasıl bir ayar yapmam lazım sayfanın o kısmında bir sorun yasamamak icin? Yani paddingler ile de oynadım ancak bir turlu istediğim sonucu alamadım.