{ib}Dynamically changing the display style attribute on a div when it contains other div or p elements doesn't work.

RESOLVED FIXED in mozilla1.4beta

Status

()

Core
Layout
P2
normal
RESOLVED FIXED
16 years ago
15 years ago

People

(Reporter: Owen A. Reddecliffe, Assigned: bz)

Tracking

({testcase})

Trunk
mozilla1.4beta
testcase
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

16 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.1) Gecko/20020826
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.1) Gecko/20020826

I want to interchange visibility of two div elements based on the pressing of a
button. When the div elements contain other div or paragrapg elements, the
function fails. It also has a minor positioning proglem when first painted.

Reproducible: Always

Steps to Reproduce:
1. In the test page provided, press show2 displays div2, and then pressing show1
shows div1, which is as it should be.
2. However, pressing show4 leaves div3 displayed, and neither show3 or show4
respond afterwards
3.

Actual Results:  
Pressing show4 leaves div3 displayed, and neither show3 or show4 respond afterwards

Expected Results:  
Div3/div4 flip should be analogous to div1/div2 flip

Below is the test page. I hope you get it. If not, send me an address to which
to send it as an attachment. my address is ko.development@gte.net.

<html>

   <head>
      <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
      <meta name="generator" content="Adobe GoLive 5">
      <title>Welcome to Adobe GoLive 5</title>
      <script language="javascript">
         <!--
         function wwDhtml(obj)
         {
             if (document.getElementById && document.getElementById(obj))
                 return document.getElementById(obj).style;
             if (document.all && document.all(obj))
                 return document.all(obj).style;
             if (document.layers && document.layers[obj])
                 return document.layers[obj];
             return false;
         }

         function wwShow(obj, val)
         {
             // really should use a browser sniffer!!
             var item = wwDhtml(obj);
             if (item)
             {
                 item.display = (val? "inline": "none");
                 return;
             }
             // Should do something here for old browsers
         }

         function show2()
         {
             wwShow('div1', false);
             wwShow("div2", true);
             return false;
         }

         function show1()
         {
             wwShow("div2", false);
             wwShow("div1", true);
             return false;
         }

         function show3()
         {
             wwShow('div4', false);
             wwShow("div3", true);
             return false;
         }

         function show4()
         {
             wwShow("div3", false);
             wwShow("div4", true);
             return false;
         }

         
// -->
      </script>
   </head>

   <body bgcolor="#ffffff">
      <div id="div1" style="display: inline">
         This is div 1<br>
         Div1 <br>
         <a href="javascript:void(0)" onclick="show2();">Show 2</a>
      </div>
      <div id="div2" style="display: none">
         This is div 2<br>
         Div2 <br>
         <a href="javascript:void(0)" onclick="show1();">Show 1</a>
      </div>
      <div id="div3" style="display: inline">
         This is div 3, and should be on a new line!!<br>
         <p>   <!-- This could also be a div and give the same behaviour -->
         Div3 <br>
         </p>
         <a href="javascript:void(0)" onclick="show4();">Show 4</a>
      </div>
      <div id="div4" style="display: none">
         This is div 4<br>
         <p>   <!-- This could also be a div and give the same behaviour -->
         Div4 <br>
         </p>
         <a href="javascript:void(0)" onclick="show3();">Show 3</a>
      </div>

      <p>
      This is just another line.
      </p>
   </body>

</html>
Created attachment 102280 [details]
reporter's testcase
The problem goes away when using 'block' instead of 'inline', which is really
what you should be using.  However, it is a legitimate bug.
Assignee: dbaron → attinasi
Status: UNCONFIRMED → NEW
Component: Style System → Layout
Ever confirmed: true
QA Contact: ian → petersen
Summary: Dynamically changing the display style attribute on a div when it contains other div or p elements doesn't work. → {ib}Dynamically changing the display style attribute on a div when it contains other div or p elements doesn't work.
Created attachment 102281 [details]
simpler testcase
This works in my tree due to fixes for either bug 74951 or bug 146409
Depends on: 74951, 146409
well, not that one.  ;)
No longer depends on: 74951

Updated

16 years ago
Priority: -- → P3
Target Milestone: --- → Future
Not that one either.  How bizarre.  Taking so I can figure out which change here
is fixing this... 
Assignee: attinasi → bzbarsky
No longer depends on: 146409
OS: Windows 2000 → All
Priority: P3 → P2
Hardware: PC → All
Target Milestone: Future → mozilla1.3beta

Updated

16 years ago
Keywords: testcase
Well, now _two_ of my trees are showing this fixed... and the only thing the two
have in common are different fixes for bug 171830
Depends on: 171830
Target Milestone: mozilla1.3beta → mozilla1.4beta
fixed by bug 171830
Status: NEW → RESOLVED
Last Resolved: 15 years ago
Resolution: --- → FIXED
*** Bug 183318 has been marked as a duplicate of this bug. ***
You need to log in before you can comment on or make changes to this bug.