Mam pewien problem z menu. Pod firefoxem, Operą i Safari wszystko wyświetla się ok, natomiast pod IE występuje różnica jednego piksela pomiędzy wyświetlanym menu po lewej a tekstem po prawej. Nie ma też odstępu pomiędzy menu a polem z treścią. Nie potrafię sobie z tym poradzić. Poniżej umieszczam fragment kodu w xhtml i css.
XHTML
Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta name="description" content="Opis" />
<meta name="keywords" content="Słowa kluczowe" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="strona">
<div id="nawigacja">
<ul>
<li><a href="#">Opcja 1</a></li>
<li><a href="#">Opcja 2</a></li>
<li><a href="#">Opcja 3</a></li>
<li><a href="#">Opcja 4</a></li>
</ul>
</div>
<div id="tekst">
Tekst po prawej
</div>
<div id="glowna_tresc">
To jest treść na stronie
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta name="description" content="Opis" />
<meta name="keywords" content="Słowa kluczowe" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="strona">
<div id="nawigacja">
<ul>
<li><a href="#">Opcja 1</a></li>
<li><a href="#">Opcja 2</a></li>
<li><a href="#">Opcja 3</a></li>
<li><a href="#">Opcja 4</a></li>
</ul>
</div>
<div id="tekst">
Tekst po prawej
</div>
<div id="glowna_tresc">
To jest treść na stronie
</div>
</div>
</body>
</html>
CSS
Kod
body {
font-size: 11px;
background: #C60;
}
#strona {
width: 600px;
margin: 0 auto;
}
#nawigacja {
background: #FFC;
border-top: 1px #ccc solid;
}
#nawigacja ul {
margin: 0;
padding: 10px 0;
/*line-height: 1.4;*/
}
#nawigacja ul li {
list-style: none;
display: inline;
background: blue;
}
#nawigacja ul li a {
text-decoration: none;
color: #fff;
/*font-weight: bold;*/
padding: 10px 10px;
}
#nawigacja ul li a:hover {
background: #fff;
color: #000;
}
#tekst {
margin: -24px 13px 11px 0;
text-align: right;
color: #fff;
background: #F33;
padding-right: 30px;
}
#glowna_tresc {
background: #FFF;
width: 100%;
height: 500px;
}
font-size: 11px;
background: #C60;
}
#strona {
width: 600px;
margin: 0 auto;
}
#nawigacja {
background: #FFC;
border-top: 1px #ccc solid;
}
#nawigacja ul {
margin: 0;
padding: 10px 0;
/*line-height: 1.4;*/
}
#nawigacja ul li {
list-style: none;
display: inline;
background: blue;
}
#nawigacja ul li a {
text-decoration: none;
color: #fff;
/*font-weight: bold;*/
padding: 10px 10px;
}
#nawigacja ul li a:hover {
background: #fff;
color: #000;
}
#tekst {
margin: -24px 13px 11px 0;
text-align: right;
color: #fff;
background: #F33;
padding-right: 30px;
}
#glowna_tresc {
background: #FFF;
width: 100%;
height: 500px;
}
Zauważyłem, że po ustawieniu odstępu
line-height: 1.4;
i pogrubienia
font-weight: bold;
występują problemy (również na pozostałych przeglądarkach), dlatego je wyłączyłem, ale jeśli to możliwe to chciałbym zachować te parametry.
Proszę o pomoc w rozwiązaniu tego problemu.
Poniżej umieszczam link z gotowym plikiem
Kod
http://turbobit.net/hi5lhrdiu361.html
Pozdrawiam
Maciej