CSS Display:Table alternativ för IE

7 svar · 674 visningar · startad av hannadredd 4 okt. 2007

hannadreddMedlem sedan okt. 20074 inlägg

Frågan4 okt. 2007 08:27#1

Jag har problem med att få en div tagg att scrolla i IE, i firefox funkar det fint men eftersom IE inte stödjer display:table & display:table-cell så vet jag inte hur jag skall gå tillväga.

Jag vill att <div class="box"> skall komma efter varandra & när utrymmet i diven tar slut så skall man scrolla i sidled.

<html>
<head>
<style type="text/css">
#box
{
overflow:auto;
position:relative;
display:block;
width:400px;
}
#boxes
{
background-color:red;
position:relative;
width:100%;
/** FF **/
display:table;

}
#boxes .box
{
background-color:white;
width:100px;
border:1px solid black;
/** FF **/
display:table-cell;

}
</style>
</head>
<body>

<div id="box">
<div id="boxes">
<div class="box">xxxxxxxxxxxxx</div>
<div class="box">xxxxxxxxxxxxx</div>
<div class="box">xxxxxxxxxxxxx</div>
<div class="box">xxxxxxxxxxxxxx</div>
<div class="box">xxxxxxxxxxxxxxx</div>
</div>

</div>

</body>
</html>

zcorpanMedlem sedan dec. 20042 245 inlägg

4 okt. 2007 11:00#2

Lägg till

#boxes .box { display:inline }

före "#boxes .box"-raden.

hannadreddMedlem sedan okt. 20074 inlägg

5 okt. 2007 07:02#3

Det verkar tyvärr inte fungera, boxarna trillar ner på nya rad när utrymmet tar slut, där vill jag få en horisontell scroll.

tantenMedlem sedan nov. 20051 596 inlägg

5 okt. 2007 09:06#4

Är det så att du kan tänka dig en helt annan lösning eller är det just ditt förslag som du vill ska fungera?

tantenMedlem sedan nov. 20051 596 inlägg

5 okt. 2007 11:32#5

Pillade lite och tror jag lyckades få in dina divvar nu.

#box{margin:0; padding:0; height:45px; overflow:auto; color:#000;  
overflow:auto;
width:400px;}
#boxes{display:table;background-color:red;
margin:0; padding:0; list-style:none; white-space:nowrap; display:table-row;}
#boxes .box{
display:table-cell; padding:0 15px; margin:0;
background-color:white;
width:100px;
border:1px solid black;}
</style>
<!--[if lte IE 7]>
<style>
#box {width:400px;}
#boxes .box {display:inline; zoom:1; height:20px;}
* html #boxes {height:20px;}
</style>
<![endif]-->

Tycker du har så mycket div:s. Därför jag frågade i mitt förra inlägg.

hannadreddMedlem sedan okt. 20074 inlägg

5 okt. 2007 12:29#6

Jag kan tänka mig vilken lösning som helst, bara den kan ta x-antal boxar i ett specikfikt utrymme & göra så att man scrollar i sidled när utrymmet inte räcker till.
Anledning till alla div-taggarna är att i slutändan kommer strukturen se ut ungefär på detta vis på den riktiga sidan som gäller, kanske inte kommer att vara just div-taggar men principen är densamma.

Ska genast testa lösningen & se om den hjälper mig.
Tack för hjälpen så länge

hannadreddMedlem sedan okt. 20074 inlägg

5 okt. 2007 12:33#7

Ja den hjälpte!!

Tack så mycket för hjälpen Tanten, när sidan kommer i drift så kan du få se det live :-)

tantenMedlem sedan nov. 20051 596 inlägg

5 okt. 2007 12:42#8

Ser jag fram emot. (y)
Göm nu inte att markera tråden som löst :)