Hej,

Jag har ett litet problem med CSS och nya IE7. Jag har en div som ska innehålla sidans huvudnyheter. Denna div ska omslutas på höger och vänster sida med en vertikal prickad linje.

<div class="line"></div>
<div class="main"></div>
<div class="line"></div>

Alla divar har float:left, main har bredden angiven och line har width: 1px.

Linje-divarna har en bakgrund som definieras i en grafik-fil:

background-image: url(/images/dotline_vert.gif);
background-position: right;
background-repeat: repeat-y;

Line-divarnas höjd ska "följa med" main-diven eftersom det kan finnas olika mycket text i main-diven. I Firefox och IE6 ser detta bra ut. "Line"-divarna blir lika höga som main-diven.

Detta gäller dock inte i IE7. Varken height:auto eller height:100% på line-divarna funkar. Det går att "hårdkoda" in ett height-värde, men detta blir ju statiskt och anpassar sig inte efter main-divens höjd.

Någon som har någon idé om vad man kan göra åt detta? Känns inte riktigt vettigt att behöva köra olika stylesheets för varenda ny browser.

Mvh,
Christoffer

Det enda jag kommer på nu är att linje-diven ligger ytterst, sedan ligger nyhets-diven innuti linje-diven. Linje-diven repeterar sedan åt alla håll. Den diven har dessutom en padding på 1 px till vänster och höger där bakgrunden, dvs. prickade linjen, ska synas igenom. Nyhets-diven har sedan en annan bakgrund. Kvar borde då bli prickad linjer itll höger och vänster om nyheten