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 "digital experience" 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
