Witam. Mam problem z CSS'em pod IE. Na operze i mozilli ff chodzi cacy.
Swój problem udokumentuje screenem z ie:

www.xaia.liczba.com/ie_sux.png

otóż chce by obie części były ładnie połączone ze sobą tak jak jest np. w operze

www.xaia.liczba.com/opera_rox.png

Zapodaje tutaj ważniejszą część CSS'a (bez tego kawałka chodzi wporządku).

[HTML] pobierz, plaintext 
ul { 
   position: relative; 
   width: 900px; 
   background: url(images/res_02.gif) no-repeat; 
   height: 73px; 
   list-style-type: none; 
   margin: 0; 
   padding: 0; 
} 
 
li#bu1 a, li#bu2 a, li#bu3 a, li#bu4 a, li#bu5 a, li#bu6 a { 
   background: transparent; 
   position: absolute; 
   width: 131px; 
   height: 30px; 
   bottom: 40px; 
   text-decoration: none; 
} 
 
/* adjusted values for IE6 */ 
* html*li#bu1 a, * html*li#bu2 a, * html*li#bu3 a, * html*li#bu4 a, * html*li#bu5 a, * html*li#bu6 a { bottom: 81px; } 
 
li#bu1 a { left: 46px;    background: url(images/01.gif) 0 0 no-repeat; } 
li#bu2 a { left: 180px;   background: url(images/02.gif) 0 0 no-repeat; } 
li#bu3 a { left: 314px;   background: url(images/03.gif) 0 0 no-repeat; } 
li#bu4 a { left: 448px;   background: url(images/04.gif) 0 0 no-repeat; } 
li#bu5 a { left: 582px;   background: url(images/05.gif) 0 0 no-repeat; } 
li#bu6 a { left: 716px;   background: url(images/06.gif) 0 0 no-repeat; } 
 
 
li#bu1 a:hover, li#bu2 a:hover, li#bu3 a:hover, li#bu4 a:hover, li#bu5 a:hover, li#bu6 a:hover { background-position: 0 -30px; }
[HTML] pobierz, plaintext 

A tutaj poprawny i ładny xhtml

[HTML] pobierz, plaintext 
<div id="top"></div> 
<ul> 
<li id="bu1"><a href="#"><span>news</span></a></li> 
<li id="bu2"><a href="#"><span>gdzie co i jak</span></a></li> 
<li id="bu3"><a href="#"><span>o nas</span></a></li> 
<li id="bu4"><a href="#"><span>galeria</span></a></li> 
<li id="bu5"><a href="#"><span>sznurki</span></a></li> 
<li id="bu6"><a href="#"><span>kontakt</span></a></li> 
</ul> 
<div id="content"><div class="text">sd</div></div>
[HTML] pobierz, plaintext 

Dziękuję za konkretną odpowiedź.
Pozdrawiam

CSS mógłby być schludniejszy, absolute to niefajna rzecz
A co do probelmu można spróbować dać zoom: 1; dla a w li. Głowy nie dam, musiałbym zobaczyć cały kod.

O to cały kod z plików
Jeśli da się zastąpić ten sposób na podmiane grafiki w linkach to proszę o wskazówki albo podmiane tego co ja tutaj mam . Będę bardzo wdzięczny ;].

[HTML] pobierz, plaintext 
body {
background-image: url('images/bg.gif');
 
}
 
#main {
    width:900px;
    border:0px;
    margin:auto;
}
 
 
#top {
    vertical-align:top;
    width: 900px;
	height: 144px;
	background-image:url('./images/index_01.gif');
	}
 
	span {
	display: none;
}
 
 
ul {
	position: relative;
	width: 900px;
	background: url(images/res_02.gif) no-repeat;
	height: 73px;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
 
li#bu1 a, li#bu2 a, li#bu3 a, li#bu4 a, li#bu5 a, li#bu6 a {
	background: transparent;
	position: absolute;
	width: 131px;
	height: 30px;
	bottom: 40px;
	text-decoration: none;
}
 
/* adjusted values for IE6 */
* html*li#bu1 a, * html*li#bu2 a, * html*li#bu3 a, * html*li#bu4 a, * html*li#bu5 a, * html*li#bu6 a {bottom: 81px;  }
 
li#bu1 a { left: 46px;    background: url(images/01.gif) 0 0 no-repeat; }
li#bu2 a { left: 180px;   background: url(images/02.gif) 0 0 no-repeat; }
li#bu3 a { left: 314px;   background: url(images/03.gif) 0 0 no-repeat; }
li#bu4 a { left: 448px;   background: url(images/04.gif) 0 0 no-repeat; }
li#bu5 a { left: 582px;   background: url(images/05.gif) 0 0 no-repeat; }
li#bu6 a { left: 716px;   background: url(images/06.gif) 0 0 no-repeat; }
 
 
li#bu1 a:hover, li#bu2 a:hover, li#bu3 a:hover, li#bu4 a:hover, li#bu5 a:hover, li#bu6 a:hover { background-position: 0 -30px; }
 
#content {
	margin: 0;
	padding: 0;
	list-style-type: none;
 position: relative;
width: 900px;
background-image: url('./images/index_09.gif');
}
 
#line_2 {
	margin: 0;
	padding: 0;
	list-style-type: none;
 position: relative;
width: 900px;
height: 26px;
background-image: url('./images/index_10.gif'); 
}
 
 
.text {
padding-top: 10px;
font-family: tahoma;
font-size: 11px;
color: #939393;
text-align: justify;
padding-left: 5em;
 
 
}
 
 
 
#foot {
background-image:url('./images/index_11.gif');
width: 900px;
height: 147px;
clear:both;
 
}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<body>
<div id="main">
<div id="top"></div>
<ul>
<li id="bu1"><a href="#"><span>news</span></a></li>
<li id="bu2"><a href="#"><span>gdzie co i jak</span></a></li>
<li id="bu3"><a href="#"><span>o nas</span></a></li>
<li id="bu4"><a href="#"><span>galeria</span></a></li>
<li id="bu5"><a href="#"><span>sznurki</span></a></li>
<li id="bu6"><a href="#"><span>kontakt</span></a></li>
</ul>
<div id="content"><div class="text">tekst</div></div>
<div id="line_2"></div>
<div id="foot"></div>
</div>
</body>
</html>
[HTML] pobierz, plaintext 

Skoro to cały kod, to zapomniałeś o doctype, otworzeniu html i całym head (razem z title). IE nie widząc DOCTYPE w pierwszej linijce głupieje (quirks mode).

Ojej daruj ... wrzuciłem kod przetwarzany ... bo po co Ci moja meta i dtd
Tamto jest i napewno poprawne.
...

Proszę o pomoc

Po pierwsze rozdziel kod dla normalnych przeglądarek i IE na dwa (czasem trzy - IE6 & 7) pliki.
Po drugie: jak już mówiłem position: absolute; (li a) jest śliskie; lepiej użyć samego display: block; i np. float: left;. I tak ustawiasz odstęp od lewej więc nie będzie wiecej roboty (będziesz musiał zamienić odstęp na długość), a konstrukcja będzie bardziej elastyczna.
Po trzecie: nie widzę żywego kodu w działaniu, więc nie mogę sprawdzić który elementy sa od siebie odsunięte, ale podejrzewazm, że odstęp jest po liscie (znany bug IE). Jedną z metod radzenia sobie z nim jest nadanie artybutu hasLayout (float powinno załatwić sprawę). Ale jak już mówiłem, najlepiej sie operuje się na żywym organizmie.