problem med "puffar" float etc IE

ul { width:520px; }

...?

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.

Nu ser man tydligt vad som är galet. ->

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]

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.

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>

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 :) )

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