[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.

[drkloji]

Merhaba. Burada #mainNav a bölümünde display: inline; satırını display: block olarak değiştirmek ie7'de hatayı düzeltmek için yeterlidir. Konu dışı olarak CSS kodlarında bir tutarsızlık olduğunu belirtmek isterim. Mesela #mainNav, #header içindeki ul tagının id'si. Ancak CSS kodlarında #mainNav ul şeklinde bir ifade kullanmışsın. Buda mainNav bir div tagı ve ul tagı bu div içinde gibi bir anlam kazanıyor. Aşağıdaki CSS kodlarında bu gibi bir iki gözüme çarpan noktayı düzenledim. Bu CSS kodlarını kullanabilirsin.

* {
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:39px;
background-color: #9a852d;
margin: 0;
padding: 7px 2px 2px 2px;
list-style-type: none;
border: 0;
}

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

#mainNav a {
display: block;
color: #e2ca66;
text-decoration: none;
padding: 10px;
font-size: 20px;
border-right: 1px solid #e2ca66;
height:auto;
}

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

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

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

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

Ufak bir tavsiye (#mainNav a) içinde border-right yerine border kullanırsan daha hoş gözükebilir.