---
title: "problem med \"puffar\" float etc IE"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/148206-problem-med-puffar-float-etc-ie"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "maqe"
published: "2006-06-19T07:24:35.000Z"
updated: "2006-06-20T08:33:35.000Z"
replies: 8
views: 582
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/148206-problem-med-puffar-float-etc-ie"
---

# problem med "puffar" float etc IE

## #1 — maqe, 2006-06-19T07:24Z

[Denna](http://member.webforum.nu/6596/index.html) kod fungerar utmärkt i FF men inte i IE, någon som har tips på hur man kan få "puffarna" att linjera rätt i bägge webbläsarna?

Permalänk: https://www.webforum.nu/p/148206

## #2 — zcorpan, 2006-06-19T11:12Z

```
ul { width:520px; }
```

...?

Permalänk: https://www.webforum.nu/p/1833252

## #3 — maqe, 2006-06-19T12:31Z

Hos mig får jag inte detta att fungera. Samt att dom inte lägger sig i linje i IE men i FF fungerar det utmärkt. Titta och jämför i dom bägge läsarna.

Permalänk: https://www.webforum.nu/p/1833264

## #4 — maqe, 2006-06-19T12:38Z

Nu ser man tydligt vad som är galet. [\-\>](http://member.webforum.nu/6596/index.html)

Permalänk: https://www.webforum.nu/p/1833266

## #5 — zcorpan, 2006-06-19T14:40Z

Om du ändrar alla till float:left? \[edit\] Nä det hjälpte visst inte. Du skulle kunna lägga en div runt tredje och fjärde, men då kan du inte använda en lista förstås. 

```
.wrap div { float:left; width:250px; border:thin dotted; }
#third { clear:left; }
```

```
<div class="wrap">
 <div id="first">1<br>1</div>
 <div id="second">2</div>
</div>
<div class="wrap">
 <div id="third">3</div>
 <div id="forth">4</div>
</div>
```

\[/edit\]

Permalänk: https://www.webforum.nu/p/1833292

## #6 — maqe, 2006-06-19T15:45Z

Jo det funkar ju alltid men det vore riktigt nice om det gick att fixa med en lista men jag antar att det är kört.

Permalänk: https://www.webforum.nu/p/1833312

## #7 — caya, 2006-06-19T18:42Z

två ul där li är lagda display:inline

\<div\>
\<ul\>\<li\>Lorem\</li\>\<li\>Ipsum\</li\>\</ul\>
\<ul\>\<li\>Dolor\</li\>\<li\>Sit Amet\</li\>\</ul\>
\</div\>

Permalänk: https://www.webforum.nu/p/1833351

## #8 — jarvklo, 2006-06-19T20:25Z

Hmm...

Egentligen vet jag inte riktigt i detalj vad det är som får det att fungera, men genom att använda "\*-html-hacket" lite kreativt tror jag att jag lyckades få till det!

Idén bakom koden är att få två olika "kolumniseringsmetoder" att överlappa varandra i samma stilmall... (float-left-float-right för "normala webbläsare" och float-left-margin-left för MSIE)

Aja - Detta verkar funka på koden som ligger i ditt exempel just nu ivf (byt ut den \<style\> som ligger där nu alltså)...

```
	<style type="text/css">
		ul { list-style: none; display: block; width: 540px; margin: 0; padding: 0;}
		* html ul { list-style: none; display: inline;}
		li { list-style: none;  display: block; margin:0;margin-bottom:10px;padding:5px;border:1px dotted #bbb; }
		.clearLeft { clear:both; float: left; width: 250px;}
		.clearRight {float: right; width: 250px;}
        * html .clearRight { margin-left: 260px; width: 250px; float: none;}
	</style>
```

'
Finns säkert snyggare lösningar eller kanske tillochmed någon som kan förklara detaljerna kring vad det egentligen är som får koden ovan att fungera som det gör (detta exempel är, som sagt, ren "seat-of-the-pants"-hacking från min sida baserat på en känsla av att två metoder borde gå att kombinera med ett lämpligt CSS-hack... Men det verkar funka i MSIE6, FireFox och Opera8 ivf :) )

Permalänk: https://www.webforum.nu/p/1833389

## #9 — maqe, 2006-06-20T08:33Z

> **jarvklo skrev:**
>
> Hmm...
> 
> Egentligen vet jag inte riktigt i detalj vad det är som får det att fungera, men genom att använda "\*-html-hacket" lite kreativt tror jag att jag lyckades få till det!
> 
> Idén bakom koden är att få två olika "kolumniseringsmetoder" att överlappa varandra i samma stilmall... (float-left-float-right för "normala webbläsare" och float-left-margin-left för MSIE)
> 
> Aja - Detta verkar funka på koden som ligger i ditt exempel just nu ivf (byt ut den \<style\> som ligger där nu alltså)...
>
>
> ```
> 	<style type="text/css">
> 		ul { list-style: none; display: block; width: 540px; margin: 0; padding: 0;}
> 		* html ul { list-style: none; display: inline;}
> 		li { list-style: none;  display: block; margin:0;margin-bottom:10px;padding:5px;border:1px dotted #bbb; }
> 		.clearLeft { clear:both; float: left; width: 250px;}
> 		.clearRight {float: right; width: 250px;}
>         * html .clearRight { margin-left: 260px; width: 250px; float: none;}
> 	</style>
> ```
>
> 
> '
> Finns säkert snyggare lösningar eller kanske tillochmed någon som kan förklara detaljerna kring vad det egentligen är som får koden ovan att fungera som det gör (detta exempel är, som sagt, ren "seat-of-the-pants"-hacking från min sida baserat på en känsla av att två metoder borde gå att kombinera med ett lämpligt CSS-hack... Men det verkar funka i MSIE6, FireFox och Opera8 ivf :) )

Detta fungerade utmärkt för min lösning, stort tack för hjälpen

Permalänk: https://www.webforum.nu/p/1833462

---

Tråden på webben: https://www.webforum.nu/amne/html-css/148206-problem-med-puffar-float-etc-ie