Ikonrad med dynamiskt mellanrum

2 svar · 201 visningar · startad av higa 15 jan. 2003

higaMedlem sedan aug. 2000359 inlägg

Frågan15 jan. 2003 15:19#1

På min webbie http://higa.dns2go.com har jag en ikonrad längst upp där dom 8 ikonerna har fått dynamiskt mellanrum som automagiskt anpassar sig till användarens fönsterstorlek genom att jag har lagt dom i en tabell som består av en rad på 9 fält där det första fältet har en pixelfast bredd(182px) och resten har 11%. Är det möjligt att göra så mha css på något sätt?
Jag har testat med skapa en div med position:absolute; left: 182px och lagt nästlade divar med width: 12%; float: left;, men MSIE lägger in en skum radbrytning efter 7:e ikonen trots att det finns space över. Finns det något i stil med overflow:force-expand-x eller liknande som man kan sätta på container div:en?
Dessutom återger vissa browsers %-width i förhållande till body istället för container-diven(även om jag sätter den på width:auto), och då blir det inte rätt om man säger så...

Går det att lösa på något sätt som återges korrekt i både MSIE5+ och Mozilla?

PS: Har alltså inte lagt upp css-varianten än, har bara experimenterat offline.

LR^evil.sidMedlem sedan maj 2002560 inlägg

16 jan. 2003 08:19#2

Fungerar det inte med <nobr> ?

higaMedlem sedan aug. 2000359 inlägg

16 jan. 2003 09:44#3

Testade med <nobr> och white-space:nowrap, men internet explorer sket i det...
Kom dock på en kod som funkar i Mozilla(både quirk och normalt) och som funkar i MSIE om man kör i quirk mode :-/
I Mozilla verkar det ju vara så att den handerar standarder med konsekvent i standard compilance mode, men för internet explorer verkar det vara tvärtom eller?
Det stora blundret med MSIE i standard mode här är att den räknar procent i förhållande till body och inte omgivande element.

<html>
<head>
<title></title>
<style type="text/css">
<!--
.iconrow {position: absolute; left: 182px; top: 8px; right: 8px; height: 100px; width: auto; min-width: 448px; border: 1px solid black; white-space:nowrap!important; } 
.icon {width: 12%; min-width: 56px; border: 1px green dotted; height: 100%; float:left; padding-top: 30px; text-align: center; margin: 0px;}
-->
</style>

</head>
<body>
<div class="iconrow">
<div class="icon">1</div>
<div class="icon">2</div>
<div class="icon">3</div>
<div class="icon">4</div>
<div class="icon">5</div>
<div class="icon">6</div>
<div class="icon">7</div>
<div class="icon">8</div>
</div>
</body>
</html>