Re: [BUG/RFH] gitweb: Trouble with ref markers being hyperlinks because of illegally nested links

From: Jakub Narebski <jnareb@gmail.com>
Date: Jan 13, 2009, 00:13 UTC
Message-ID: <200901130113.54517.jnareb@gmail.com>
In-Reply-To: <cb7bb73a0901111859q3a166d92k5176b27af2c4d256@mail.gmail.com>

On Mon, 12 Jan 2009, Giuseppe Bilotta wrote:

> On Sun, Jan 11, 2009 at 8:15 PM, Jakub Narebski <jnareb@gmail.com> wrote:

Show 11 quoted lines

> > Commit 4afbaef by Giuseppe Bilotta (gitweb: ref markers link to named
> > shortlogs) turned ref markers for tags and heads into links to
> > appropriate views for the ref name.
> >
> > Unfortunately the code didn't take into account the fact that nesting
> > links (A elements) is illegal in (X)HTML:
> >
> >  12.2.2 Nested links are illegal
> >
> >  Links and anchors defined by the A element must not be nested;
> >  an A element must not contain any other A elements.

[...]

Show 21 quoted lines

> > What is more complicated is the issue of ref marker from
> > git_print_header_div e.g. in 'commit'/'commitdiff' view, and in 'log'
> > view.  There link is made into block element using "display: block;"
> > CSS rule (div.title, a.title), so that you can click _anywhere_ on the
> > header block.  This breaks layout even worse, making hyperlinked ref
> > marker text appear *below* header div:
> >
> >  -----------------------------------------------------------
> >  |_Merge branch into maint_ []                             |
> >  -----------------------------------------------------------
> >  _maint_
> >
> > To preserve current layout and behavior it would be needed to do some
> > deep HTML + CSS positioning hackery, perhaps with additional link block
> > without any text... But I don't know exactly how to do this; all [few]
> > experiments I did failed.
> >
> > I see possible the following alternate solutions:
> >  * Ignore this issue (e.g. if it does not affect modern browsers)
> 
> That would be my current choice until we find a better solution.

By the way, how common this error is? Could you check if _your_ web browser (Firefox, Internet Explorer, Opera, Konqueror, Safari, Chrome) does show this bug or not, please?

Show 8 quoted lines

> >  * Revert 4afbaef (we lose feature, but how often used is it?)
> >  * Always use quirks mode, or check browser and use quirks mode if it
> >    would break layout
> >  * Use extra divs and links and CSS positioning to make layout which
> >    looks like current one, and behaves as current one, but is more
> >    complicated.
> 
> I'm asking on #html, hopefully I'll get some interesting idea to try for this.

I have found _a_ solution. Perhaps not the best one, but it works. And IMHO gives / can give even better visual.

Current version (line wrapped for better visibility):
  <div class="header">
  <a class="title" href="...">GIT 1.6.1
  <span class="refs"> 
    <span class="tag indirect" title="tags/v1.6.1">
    <a href="...">v1.6.1</a>
    </span>
  </span>
  </a>
  </div>

Current CSS (relevant part):
  a.title {
  	display: block;
  	padding: 6px 8px;
  }

Current rendering:
  -----------------------------------------------------------
  |_GIT 1.6.1_ []                                           |
  -----------------------------------------------------------
  __v1.6.1__

Proposed code (line wrapped for better visibility, with CSS embedded,
which would change in final version of course). Only parts of style
related to positioning are shown.
  <div class="header">
  <a href="..." style="float: left; margin: 6px 1px 6px 8px;">GIT 1.6.1</a>
  <div style="float: left; margin: 6px 1px;">
    <span class="refs"> 
      <span class="tag indirect" title="tags/v1.6.1">
      <a href="...">v1.6.1</a>
      </span>
    </span>
  </div>
  <a href="..." style="display: block; padding: 6px 8px;">&nbsp;</a>
  </div>

Rendering with proposed code:
  -----------------------------------------------------------
  _|_GIT 1.6.1_ [_v1.6.1_]                                 |_
  -----------------------------------------------------------

I guess that instead of additional DIV element, we could use DIV for .refs, or use "float: right" style with SPAN element. I have not checked if other variations works: this one does.

What do you think?

-- 
Jakub Narebski
Poland