SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Poland
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mozilla problem - no background color

    Hi! Could anyone tell me why on Mozilla elements "Overview" & "Requirements" don't have background color ? Here is the code:
    Code:
    <html>
    <head>
        <style type="text/css">
        #menu {
            background-color: #000000;
            position: relative;
        }
        #menu .top {
            background-color: #000000;
            color: #ffffff;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        #menu .section {
            position: absolute;
        }
        #menu .sub {
            position: relative;
        }
        #menu .box {
            background-color: #cccccc;
            white-space: nowrap;
        }
        </style>
    </head>
    <body>
    
        <div id="menu">
    
            <div class="top">Products</div>
            <div class="section" style="left: 0px; top: 25px;">
                <div class="box">Product One</div>
                <div class="sub">
                    <div class="box">Product Two</div>
                    <div class="section" style="top: 0px; left: 90px;">
                        <div class="box">Overview</div>
                        <div class="box">Requirements</div>
                    </div>
                </div>
                <div class="box">Product Three</div>
                <div class="box">Product Four</div>
            </div>
    
        </div>
    
    </body>
    </html>

  2. #2
    SitePoint Member cvanek2004's Avatar
    Join Date
    Apr 2004
    Location
    Boston,MA
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I suspect this is a very tiny code glitch (like 1 character typed wrong) in Mozilla. It seems that thier start index for nested styles is off.

    Or in english: It is filling in the background, but in the parent DIV not the child.

    You can work around it by adding yet another nested section DIV, like so:

    <div id="menu">

    <div class="top">Products</div>
    <div class="section" style="left: 0px; top: 25px;">
    <div class="box">Product One</div>
    <div class="sub">
    <div class="box">Product Two</div>
    <div class="section" style="top: 0px; left: 90px;">
    <div class="section" >
    <div class="box" >Overview</div>
    <div class="box" >Requirements</div>
    </div>
    </div>
    </div>
    <div class="box">Product Three</div>
    <div class="box">Product Four</div>
    </div>

    </div>

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Poland
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, thank you so much !! I was fighting with it since a few days
    And 1 more question. I know this is not a proper forum, but maybe someone knows.

    I would like to fix this bug dynamically using Javascript. I want to change this code:
    Code:
    <div class="section">
        <div class="box">Overview</div>
        <div class="box">Requirements</div>
    </div>
    to:
    Code:
    <div class="section">
        <div class="section">
            <div class="box">Overview</div>
            <div class="box">Requirements</div>
        </div>
    </div>
    I can create a html element [ document.createElement() ] and then append it to the node like this:
    Code:
    <div class="section">
        <div class="section"></div>
        <div class="box">Overview</div>
        <div class="box">Requirements</div>
    </div>
    But is it possible to add an element containing all elements in current node ? Like in 2nd code example

  4. #4
    SitePoint Member cvanek2004's Avatar
    Join Date
    Apr 2004
    Location
    Boston,MA
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can use something like this to edit the internal contents of an HTML element in most modern browsers. Mozilla is a little quirky, but it should work. :-)

    theelement.innerHTML = "<DIV class=section>" + theelement.innerHTML + "</DIV>";


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •