Re: image overlaps text

Jorge Arellano Cid <[email protected]> Fri, 20 May 2016 10:27:30 -0400

Newsgroups	gmane.comp.web.dillo.devel
Message-ID	<[email protected]>

Hi Sebastian,

On Sat, Apr 30, 2016 at 01:31:48PM +0200, Sebastian Geerken wrote:
> On Fr, Apr 29, 2016, Jorge Arellano Cid wrote:
> > On Fri, Apr 29, 2016 at 06:41:32PM +0200, Sebastian Geerken wrote:
> > > On Fri, Apr 29, 2016, Nick Warne wrote:
> > > > 
> > > > 
> > > > On 29/04/16 16:46, Alexander Voigt wrote:
> > > > >I noticed, that in current Dillo (tip) there are cases where images
> > > > >overlap surrounding text, making in unreadable.  Here is an example page:
> > > > >
> > > > >  https://netzpolitik.org/2016/massenbeschlagnahme-von-mobiltelefonen-in-leipzig-fast-alle-verfahren-eingestellt/
> > > > 
> > > > Strange, renders here OK (latest hg pull).
> > > 
> > > As I wrote, this is hard to reproduce.
> > 
> >   Yes.
> > 
> >   (I can't reproduce it with your best URL :)
> > 
> >   Fortunately, today I managed to find&reduce a case that works all the time
> > here. Attached it goes. Just resize horizontally to see the overlap.
> > 
> >   I hope it works there!
> 
> Thanks, Jorge, for the perfect testcase. So far, I've tracked down the
> problem, but I'm not yet sure how to fix it. Hopefully, the fix will
> also solve the other issues with overlapping floats.

  The attached tetscase is a slight variation of the previous one.

  Comparing rendering behaviour with Firefox here shows some interesting
facts/bugs/design-decisions:

  1.- FF links the olive div's width to viewport width only.
      Dillo links it to viewport and its own child width.
  2.- When splitting the first sentence (in olive div), by narrowing the
      viewport, text in the teal div is also split!
  3.- After 2.-, when widening the viewport, text in olive widens, but text
      in teal not! (reload, does the trick).

  As usual, since a few years, following FF in these corner cases is the
safe chioce.

  I'd like to dig into it with a view to learn more about rendering floats.
Would you please explain a bit what you've found, which of the above points
you'd recommend me to start with, and spill some suggestions on what parts
of the code/design are most probably responsible for it.


-- 
  Cheers
  Jorge.-

_______________________________________________
Dillo-dev mailing list
[email protected]
http://lists.dillo.org/cgi-bin/mailman/listinfo/dillo-dev

o4.html (text/html, 891 B)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>overlap</title>
<style type="text/css">
body {text-align:center;}
.center1 {align: left;background-color: olive;}
.center {margin:0 auto;width:810px;background-color: teal;}
.images2 {float:right; width:250px; height:375px;}
</style>
</head>

<body>
<div class="center1">
 Watch-what-happens when-this-sentence-is-split
 <div class="center">

   <img src="logo.png" alt="[image here]" class="images2">
    The bugtracker mercurial-extension helps you manage bugs
 and issues with your project, and keeps track of all bug
 addition/modification just as if the bugs where regular files.

       When you modify a bug, or add a new one, a new commit is
 done automatically to the repository.

       The extension provides you with two commands:
 "hg bugs" and "hg bug".

 </div>
</div>
</body>
</html>