IE issue with display: none/inline and position: absolute (Javascript generated code)

HiDeWaY · #1 01-20-2007, 09:03 PM

I'm posting this in the javascript forum instead of the CSS forum because my guess is that this issue only has a real solution based on javascript. Please read before posting. Also, notice that I've only tested this application on FireFox and IE 7.0. I'll be needing to show all the HTML and Javascript in my page in order to expose the while problem, so I'll try explaining what's the logic behind the application so you won't be totaly in the blank about it.

I'm currently coding a Javascript based window system for IE and browsers who follow the DOM specification (ex: FireFox). The application structure will be divided in three div areas:
- List of tabs.
-* This will list all available tabs, each containing it's own window area and list of windows.
- Window Area.
-* Each Window area will be able to have several windows.
- List of windows (of a certain tab).
-* Will list all windows in the selected tab.

All the area's root are div elements named: Header, Body and Footer; and every content on them is dynamically generated using javascript as soon as the body's "onload" event fires. The called function is named: LoadGWS.

Javascript overall explanation:

PHP Code:


			
-LoadGWS(); 

--LoadHeadAndFooter(); // Generates header and footer text.

--// Generates the body structure.

--CreateTab("News"); // Generates the News's tab and it's Windows Area

--CreateTab("Login"); // Generates the Login's tab and it's Windows Area

--CreateTab("Register"); // Generates the Register's tab and it's Windows Area

--CreateWindow("News",0,0,"full","full","TabId_1"); // Creates a window named "News" and attaches it to the News's tab (TabId_1).

--SelectTab("TabId_1"); // Login's tab is now the active tab (none was before)

--// Generates the window's list basic structure.

I'm still in the beginning of this javascript version so the only functionalities that works are:
- Creating a tab.
- Selecting a tab.

HTML structure: (after being generated by the javascript)

PHP Code:


			
<body onload="LoadGWS();">

  <div id="Header">

    <span id="Header_Title1">World Of Guirn</span>

    <br/>

    <span id="Header_Title2">The Five Kingdoms</span>

  </div>

  <div id="Body" style="height: 767px;">

    <div id="Body_TabArea">

      <span class="SelectedTab" id="TabId_1">News</span>

      <span class="Tab" id="TabId_2">Login</span>

      <span class="Tab" id="TabId_3">Register</span>

      <span class="Tab" id="TabId_4">New Tab</span>

      <a id="CreateTab" href="javascript: CreateTab('New Tab')">Create new tab</a>

    </div>

    <div id="Body_WindowArea" style="height: 726px;">

      <!-- News (AreaId_1) is active -->

      <div id="AreaId_1" class="ActiveWindowArea" style="height: 726px;">

        <!-- WindowDiv means that the div is position: absolute -->

        <div class="WindowDiv" style="top: 0px; left: 0px; width: 0px; height: 0px;">

          <div class="WindowTitleDiv">

            <span class="WindowTitle">News</span>

            <span class="WindowButtons"/>

          </div>

          <div class="WindowBodyDiv">body..</div>

        </div>

      </div>

      <div id="AreaId_2" class="WindowArea" style="height: 726px;"/>

      <div id="AreaId_3" class="WindowArea" style="height: 726px;"/>

      <div id="AreaId_4" class="WindowArea" style="height: 726px;"/>

    </div>

    <div id="Body_WindowList">

      <span id="WindowListLeftArrow"><</span>

      <span id="WindowListRightArrow">></span>

    </div>

  </div>

  <div id="Footer">

    <span id="Footer_Text">guirn.com - 2007</span>

  </div>

</body>

Now, about the issue. It appened with the include of the following CSS rules:

PHP Code:


			
// Notice that all Window's Areas are created with the WindowArea className

.WindowArea { // className that affects all but the active Window Area

    display: none;

}

.ActiveWindowArea { // className that affects only the active Window Area

    display: inline;

}

.WindowDiv { // classname always active and affects all windows from all windows areas.

    position: absolute;

}

With these rules, the Window's DIV element, being child of the WindowArea will, or won't, be shown by the browser depending on the WindowArea's CSS display rule. It will show with display: inline, it will not be shown with display: none. This is what happens on FireFox. IE is giving me an headache for days now.

Here is what I mean:

PHP Code:


			
CreateTab("News");

CreateTab("Login");

CreateTab("Register");

// SelectTab("TabId_1"); /* (1)  display: inline; before creating the Window */

CreateWindow("News",0,0,"full","full","TabId_1");

SelectTab("TabId_1"); /* (2) display: inline; after creating the window*/

alert(document.getElementById("TabId_1").WindowArea.childNodes[0].childNodes[0].childNodes[0].childNodes[0].data); // outputs the Window's title text showing tha the window still exists.

Using (2), will produce the expected output on FireFox, but nothing will be shown on IE. The Window structure simply never appears. Later I used the alert to be sure that the window really exists. Using (1) instead of (2), will work on IE, but only until I change the active tab. After that the window structure will also disapear for good.

I'm completely lost on why this appens, and my only guess is that IE doesn't apply the "display: inline" to it's "position: absolute" children? I've already tried several combinations of "display: inline" on the involved elements but nothing seems to work. Can someone help me solve this problem? I'll apreciate any suggestion.

PS: I've attached the html file.

**Kor** · #2 01-21-2007, 01:07 AM

For the moment I see strange things in your code. It seems like you have not understood the end tag rules in XHTML.

The slash <tag /> is used in XHTML to close only those tags which in HTML have no end tags (br, input, ...), but not those who have already native end tags (span, div,...)

So that coding as: <div /> and <span /> is incorrect, as far as I know. Should be, as in HTML, <div></div> , <span></span>

On the other hand, div is a native block-level displayed element, not an inline one, while span is an inline, not a block

To align inline the same line block elements you should use the CSS float

HiDeWaY · #3 01-21-2007, 10:32 AM

First of all, thanks a lot for your reply. It solved my problem.

I was misguided on the display: inline description on www.w3schools.com wich states that display: inline is the default value. I knew that div is a block element but all I wanted to do was to reset the display to it's original value. Thanks a lot for noticing that.

PS: The generated code it's just copy paste from FireBug. But thanks for stating that.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)