Changing innerHTML of the <div> tag, which is inside <a> tag adds automatically <a> tag around the text.

Bug #286289 reported by Nikita
4
Affects Status Importance Assigned to Milestone
Mozilla Firefox
Fix Released
Low
firefox-3.0 (Ubuntu)
Triaged
Undecided
Unassigned

Bug Description

Binary package hint: firefox-3.0

Changing innerHTML of the <div> tag, which is inside <a> tag adds automatically <a> tag around the text.
Happens on windows' version too.

See example attached.

ProblemType: Bug
Architecture: i386
Date: Mon Oct 20 11:36:17 2008
DistroRelease: Ubuntu 8.04
NonfreeKernelModules: fglrx
Package: firefox-3.0 3.0.3+build1+nobinonly-0ubuntu0.8.04.1
PackageArchitecture: i386
ProcEnviron:
 PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games
 LANG=en_US.UTF-8
 SHELL=/bin/bash
SourcePackage: firefox-3.0
Uname: Linux 2.6.24-19-generic i686

Tags: apport-bug
Revision history for this message
In , Phil-crosby (phil-crosby) wrote :

User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.0.7) Gecko/20060911 Camino/1.0.3
Build Identifier:

This page doesn't validate, so I'm not sure what the expected behavior really is, but the current mozilla behavior is very curious.

Have a look at this example. Comments in the source explain actual/expected behaviors:
http://philisoft.com/bugs/j/moz/nestedb.html

Workaround is to use <div> tags, not <b>. The only reason I stumbled upon this is because I've seen some "rounded corner" tutorials that use nested <b> tags for the markup, and I've used nested <b> tags on some of my sites without problems. This behavior really had me scratching my head for hours.

Reproducible: Always

Steps to Reproduce:
1.
2.
3.

Revision history for this message
In , Phil-crosby (phil-crosby) wrote :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
 this page doesn't validate; w3c doesn't think you can nest <b> tags. Not sure what the expected behavior should be.
 Filed as: https://bugzilla.mozilla.org/show_bug.cgi?id=381808
-->
<head>

<script type="text/javascript">
function init(){
 document.getElementById("msg").innerHTML="section 1";

 /* produces the DOM tree (use firebug to inspect):

 <b><b><b>
  <div id="msg">
   <b><b><b>section 1</b></b></b>
  </div>
 </b></b></b>

 instead of the expected:

 <b><b><b>
  <div id="msg">
   section 1
  </div>
 </b></b></b>

 */
}
</script>

<style>
/* these style declarations are optional */
b{
 display:block;
 font-weight:normal;
}
</style>
</head>

<body onload="init();">

 <!-- these two DOM trees will be loaded differently, because the first div has its
  contents set with Javascript through innerHTML, while the second doesn't.
 -->
 <b><b><b>
  <div id="msg"></div>
 </b></b></b>

 <b><b><b>
  <div id="msg2">section 2</div>
 </b></b></b>
</body>

Revision history for this message
In , Phil-crosby (phil-crosby) wrote :

Created attachment 265879
testcase

meant to attach as a file

Revision history for this message
In , Jruderman (jruderman) wrote :

The problem isn't the nesting of <b> tags, but putting a <div> (a block element) "inside" a <b> (an inline element). See http://ln.hixie.ch/?start=1138169545&count=1.

What this testcase shows is the opposite of what I'd expect, though. Hmm...

Revision history for this message
In , Jruderman (jruderman) wrote :

Simply doing

  document.getElementById("msg").innerHTML += "";

causes an extra set of <b>'s to appear inside the div. I'm pretty sure that's wrong.

Revision history for this message
In , Phil-crosby (phil-crosby) wrote :

In this test case, <b> is made display:block, which should make any issues about inline elements having nested block elements void.

Revision history for this message
In , Jruderman (jruderman) wrote :

For layout, sure, but not for HTML parsing...

Revision history for this message
In , Jruderman (jruderman) wrote :

Created attachment 265882
Jesse's testcase

Clicking the button just does
  (...).innerHTML += ''
and yet it creates new <big> elements and changes the page's appearance.

Revision history for this message
In , Bzbarsky (bzbarsky) wrote :

There are two separate concepts of block vs inline. One in CSS and one in HTML. They don't match.

In any case, the point is that in HTML <b> is not allowed to contain <div> (so the <b> needs to get closed), but the text needs to be bold for compat so we do residual style handling. HTML5 is going to define a different method of doing this anyway, so at that point we'll need to revisit this bug.

Revision history for this message
In , Jruderman (jruderman) wrote :

*** Bug 443270 has been marked as a duplicate of this bug. ***

Revision history for this message
Nikita (nikita-petrovs) wrote :
Revision history for this message
Alexander Sack (asac) wrote : Re: [Bug 286289] [NEW] Changing innerHTML of the <div> tag, which is inside <a> tag adds automatically <a> tag around the text.

On Mon, Oct 20, 2008 at 08:37:35AM -0000, Nikita wrote:
> Public bug reported:
>
> Binary package hint: firefox-3.0
>
> Changing innerHTML of the <div> tag, which is inside <a> tag adds automatically <a> tag around the text.
> Happens on windows' version too.

Thanks. This bug is at best dealt with upstream. could you open a bug
in bugzilla.mozilla.org against the Core -> Content component and give
us the bug id? thanks.

 status confirmed
 subscribe me

 - Alexander

Revision history for this message
Nikita (nikita-petrovs) wrote : Re: [Bug 286289] [NEW] Changing innerHTML of the <div> tag, which is inside <a> tag adds automatically <a> tag around the text.

Here you go, submitted the bug, id is 460838.

https://bugzilla.mozilla.org/show_bug.cgi?id=460838

--
Sincerely,
N.

On Mon, Oct 20, 2008 at 8:13 PM, Alexander Sack <email address hidden> wrote:

> On Mon, Oct 20, 2008 at 08:37:35AM -0000, Nikita wrote:
> > Public bug reported:
> >
> > Binary package hint: firefox-3.0
> >
> > Changing innerHTML of the <div> tag, which is inside <a> tag adds
> automatically <a> tag around the text.
> > Happens on windows' version too.
>
> Thanks. This bug is at best dealt with upstream. could you open a bug
> in bugzilla.mozilla.org against the Core -> Content component and give
> us the bug id? thanks.
>
> status confirmed
> subscribe me
>
> - Alexander
>
> --
> Changing innerHTML of the <div> tag, which is inside <a> tag adds
> automatically <a> tag around the text.
> https://bugs.launchpad.net/bugs/286289
> You received this bug notification because you are a direct subscriber
> of the bug.
>
> Status in "firefox-3.0" source package in Ubuntu: Confirmed
>
> Bug description:
> Binary package hint: firefox-3.0
>
> Changing innerHTML of the <div> tag, which is inside <a> tag adds
> automatically <a> tag around the text.
> Happens on windows' version too.
>
> See example attached.
>
> ProblemType: Bug
> Architecture: i386
> Date: Mon Oct 20 11:36:17 2008
> DistroRelease: Ubuntu 8.04
> NonfreeKernelModules: fglrx
> Package: firefox-3.0 3.0.3+build1+nobinonly-0ubuntu0.8.04.1
> PackageArchitecture: i386
> ProcEnviron:
>
> PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games
> LANG=en_US.UTF-8
> SHELL=/bin/bash
> SourcePackage: firefox-3.0
> Uname: Linux 2.6.24-19-generic i686
>

Revision history for this message
In , Jruderman (jruderman) wrote :

*** Bug 460838 has been marked as a duplicate of this bug. ***

Changed in firefox:
status: Unknown → Invalid
Alexander Sack (asac)
Changed in firefox:
status: Invalid → Unknown
Changed in firefox-3.0:
status: Confirmed → Triaged
Changed in firefox:
status: Unknown → Confirmed
Changed in firefox:
status: Confirmed → Fix Released
Changed in firefox:
importance: Unknown → Low
Revision history for this message
In , Jared-easterday (jared-easterday) wrote :

I'm new to reporting, or commenting on bugs in bugzilla, but I'm still experiencing this issue with divs that are wrapped in anchor tags.

<a>
    <div>
       <p>Text</p>

    </div>
</a>

Revision history for this message
In , Jared-easterday (jared-easterday) wrote :

...didn't mean to submit my comment yet. I know it's not semantic markup, but I notice this doesn't happen in other browsers. Should I seek a different way to mark up my page, or should I hope for a fix for this?

Thanks.

Revision history for this message
In , R-bugs-h (r-bugs-h) wrote :

Jiert, which version of Firefox did you use for testing?
If 3.x, please try something newer, maybe even a nightly FF4 build
http://nightly.mozilla.org/.

Revision history for this message
In , Jared-easterday (jared-easterday) wrote :

3.6.10. Thanks Olli, I'll see if FF4 does the trick.

To post a comment you must log in.
This report contains Public information  
Everyone can see this information.

Other bug subscribers

Remote bug watches

Bug watches keep track of this bug in other bug trackers.