---
title: "Felaktig rendering i IE eller FF/Opera?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/141999-felaktig-rendering-i-ie-eller-ff-opera"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "echoSwe"
published: "2006-02-04T14:27:29.000Z"
updated: "2006-02-08T21:23:07.000Z"
replies: 13
views: 546
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/141999-felaktig-rendering-i-ie-eller-ff-opera"
---

# Felaktig rendering i IE eller FF/Opera?

## #1 — echoSwe, 2006-02-04T14:27Z

Tja

Naturligtvis så tänker väl alla - å nej, inte en till nybörjare som vill klaga på hur hans dåligt komponerade CSS-layout inte funkar i Firefox.

Nej. Har en annan fråga.
Referens: <http://www.positioniseverything.net/explorer/guillotine.html>

Skriver det på engelska, enklare.
A floated element should go outside the borders of the container if its height is greater than that of the containing element. If this isn't desired, such as in multicolumn layouts either use the <http://www.positioniseverything.net/easyclearing.html> or a div: \<div style="clear:both;"\>\</div\> or <http://orderedlist.com/articles/clearing-floats-fne/> or <http://www.sitepoint.com/examples/clearing_floats/example2.php>.

Det är de sätten som man kan få en box att cleara hela sin container så att container height \> box height. I alla fall så är det de sätten som jag känner till.

Nu är det dock så att jag satt och pulade lite med floats och grejor. Har följande markup:

```
<div class="stretcher">
	<p id="seeAlso">This is a part of the &quot;digital experience&quot; I truly enjoy. Being able to take photos and then show them to friends and family (and you) is very rewarding. I'm also able to use these photos on the web when I'm doing web design.</p>
	<h4>Photography By <a href="http://www.haf.se">Henrik Feldt</a></h4>
	<div id="imageWrapper" style="float: left; width: 50%;">
		<ul style="overflow:hidden;">
			<li><a href="thumbs/mas.jpg" title="Måsar som flyger :) / Meeses that fly ;)" rel="lightbox"><img src="thumbs/t_mas.jpg" alt="Thumbnail of image" width="100" height="100" /></a></li>
			<li><a href="thumbs/mf.jpg" title="Malmöfestivalen in Malmö" rel="lightbox"><img src="thumbs/t_mf.jpg" alt="Thumbnail of image" width="100" height="100" /></a></li>
		</ul>
	</div>
	<blockquote cite="http://www.scrapbook.com/poems/doc/1734/346.html" class="center" id="quote">
		<p> A photograph is more than just<br />
		A gift to bring or send.<br />
		And more than just the likeness of<br />
		A relative or friend.</p>
			<p>It is a kindly greeting and<br />
		A memory to hold.<br />
		Of happy times and pleasant things.<br />
		However new or old.</p>
			<p>It is a mirror that reflects<br />
		Companionship and cheer.<br />
		And now and then the wistfulness<br />
		That turns into a tear.</p>
			<p>A photograph is something to<br />
		Adorn a desk or wall.<br />
		Or carry in a pocket and<br />
		Display to one and all.</p><p>
		It is a faithful portrait<br />
		The smile that friendship shares<br />
		To add its sunshine and to show<br />
		That someone really cares.</p>
	</blockquote>
</div><!-- div stretcher end -->
```

Men så ville jag ha mina thumbs bredvid citatet. Satte width:50%; på båda de blocken - imageWrapper och quote. Samt float:left, float:right, respektive.

CSS:

```
blockquote p {
	line-height: 1.3em;
}
#quote {
	float: right; 
	width: 50%; 
	margin: 0;
}#imageWrapper {
	text-align: center;
	margin: 0 auto 0px;
	/*clear: both;*/
}
#imageWrapper ul, #imageWrapper ul li {
	margin: 0;
	padding: 0;
}
#imageWrapper ul li {
	list-style: none;
	float: left;
	margin: 0px;
}
```

och då kommer dikten (blockquote blocket) att gå över div.stretcher's kant, som den borde enligt mig - fast bara i IE. Firefox och Opera reserverar plats åt den i div.stretcher.

Så har jag kommit fram till en bugg i de två bra läsarna eller är det något som jag har missat?

Kan även lägga till att i detta fallet så uppstår Guillotine Bug i IE, fast när man hovrar över en länk med en href till ett anchor i dokumentet så ser man renderingen som i min bifogade fil.

Ska bara förtydliga - bilderna visar dikten, och de andra rubrikerna - web design och "display comments" ligger under i markup-en. De ligger som syskon till div.stretcher i koden ovan.

Bild1: IE,
Bild2: FF,
Bild3: Opera

Bilagor:

- [ie6.jpg](https://www.webforum.nu/a/9580.jpg)
- [firefox1.5.0.1.jpg](https://www.webforum.nu/a/9581.jpg)
- [opera8.5.jpg](https://www.webforum.nu/a/9582.jpg)

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

## #2 — echoSwe, 2006-02-08T08:55Z

Då tar jag det som en bugg i firefox och opera.

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

## #3 — zcorpan, 2006-02-08T12:02Z

Har du en länk till sidan, eller kan du visa hela koden? Den kod du visat blir ganska lika mellan IE och Fx för mig...

Är det "webdesign display comments" som hamnar fel?

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

## #4 — echoSwe, 2006-02-08T15:37Z

Problemet är att en floatad blockquote tar upp vertikalt utrymme. Detta visas genom att nästa box, som då är de rubriker du nämnde, hamnar längre ner.
<http://www.haf.se/temp/index_old1.htm#seeAlso>

IE drar även ut på boxen om man först klickar dig, aktiverar guilliotine bug, bläddrar bort och sedan tillbaka igen.

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

## #5 — zcorpan, 2006-02-08T16:09Z

Hmm... ok, jag tror att jag har lyckats skala ner det till ett minimalt dokument:

```
<!doctype html>
<title>float</title>
<style>
div { overflow:hidden; background:yellow; }
div p { float: right; width: 50%; }
</style>
<div>
 <p>foo
</div>
<p>bar
```

Lägg märke till att diven har höjden 0 i IE6. Om du låter den ha hasLayout=true blir det samma som i andra webbläsare:

```
div { overflow:hidden; background:yellow; [b]zoom:1;[/b] }
```

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

## #6 — tanten, 2006-02-08T18:10Z

Har inte lagt ner tid...  ;) 
Men är det inte så att du ska ha en width på h2 t.ex 50%? Sedan ska du väl inte behöva ha det på h3...

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

## #7 — silfver, 2006-02-08T18:40Z

zcorpan: Sådär kan du väl inte göra? 

```
<div>
 <p>foo
</div>
<p>bar
```

 **r/** Missförstånd. :OO

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

## #8 — tanten, 2006-02-08T20:30Z

Har du sett den här? 
<http://www.w3.org/Talks/Tools/Slidy/>
Tycker jag läste någonstans att Microsoft ska lägga till något i css så det ska fungra även i IE6.
Ser spännande ut och har åtminstone delvis samma syfte som du vill uppnå. 
Får en känsla av att det js du har gör lite lite hur som helst. Ibland stänger den inte när man trycker och rätt vad det är så har allt stängts och det finns bara rubriker kvar. Är det meningen?

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

## #9 — echoSwe, 2006-02-08T20:59Z

Min poäng är:

```
<div id="one" class="r"><div><p>Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler Filler </p></div>
	<p style="margin:0; padding: 0">Non floated content</p>
</div>
<p>Foobar</p>
```

ger bifogade bilder i Firefox (bild 1) och IE (bild 2), vilket är normalt, men i mitt fall ovan så verkar det vara ombytta roller.

Men det spelar väl inte så stor roll egentligen, i det långa loppet.

Bilagor:

- [firefox rendering.jpg](https://www.webforum.nu/a/9627.jpg)
- [ie rendering.jpg](https://www.webforum.nu/a/9628.jpg)

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

## #10 — echoSwe, 2006-02-08T21:01Z

> **tanten skrev:**
>
> Har du sett den här? 
> <http://www.w3.org/Talks/Tools/Slidy/>
> Tycker jag läste någonstans att Microsoft ska lägga till något i css så det ska fungra även i IE6.
> Ser spännande ut och har åtminstone delvis samma syfte som du vill uppnå. 
> Får en känsla av att det js du har gör lite lite hur som helst. Ibland stänger den inte när man trycker och rätt vad det är så har allt stängts och det finns bara rubriker kvar. Är det meningen?

Kolla min signatur "Mitt CV" så får du se den färdiga produkten som funkar i både IE och FF.

Du kan kommentera den i <http://www.webforum.nu/showthread.php?t=138826>
den tråden.

Tanken var inte att skapa en presentation ;). Hade jag velat det så hade jag nog använt <http://www.robertnyman.com/2005/11/13/proudly-presenting-ajax-s/> istället.

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

## #11 — Insider, 2006-02-08T21:07Z

Man kan konstatera att om man slår av JavaScript så blir det som vanligt i FF, på sidan du länkade till ovan.

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

## #12 — echoSwe, 2006-02-08T21:12Z

Mitt CV? Ja, det är liksom meningen med "unobtrusive" javascript ;)
Koden i sig är ganska vacker i och med att jag helt separerat javascript från markup.

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

## #13 — Insider, 2006-02-08T21:17Z

Jag menade inte ditt CV, jag menade på <http://www.haf.se/temp/index_old1.htm#seeAlso> så ser man inte någon "bugg" när man slår av JavaScript.
Borde det då inte vara något i javascriptet som ställer till det???
Eller hade du redan konstaterat det? ;)

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

## #14 — echoSwe, 2006-02-08T21:23Z

Insider - okej ;) - typ samma allting i de två... men det ligger nog något i det du säger, att det är nån slags bugg i javascriptet som stället till det :)

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/141999-felaktig-rendering-i-ie-eller-ff-opera