cross browser display block none

Discussion in 'Javascript' started by ruby_bestcoder@hotmail.com, Dec 16, 2005.

  1. Guest

    Hi

    Im having problem in firefox with display:none/block.
    I have essentially 3 li elements. In each element there are a few
    nested div:s. Clicking on one of the divs, makes another div to
    display: block or none.

    Again this works in IE. In ff it has a bug. When the display is none
    for a div in the first li, then the next li (the one underneath) moves
    up to the right, looking very ugly. Is there someone who has had the
    same problem before, or that know what the problem can be? Im putting
    the code here:

    <html>
    <head>
    <style>
    ul.sortablelist {
    list-style-image:none;
    list-style-type:none;
    margin-top:5px;
    margin:0px;
    padding:0px;
    }
    ul.sortabledemo li {
    padding:0px;
    margin:0px;
    }
    li.green {
    background-color: #ECF3E1;
    border:1px solid #C5DEA1;
    cursor: move;
    }
    li.orange {
    border:1px solid #333333;
    background-color: white;
    }
    </style>
    <script>
    function minimizeThis(arg, imgid){
    if(document.getElementById(arg).style.display=='none'){
    document.getElementById(arg).style.display='block';
    document.getElementById(arg).style.height='100px';
    document.getElementById(imgid).src='min.gif';
    }
    else{
    document.getElementById(arg).style.display='none';
    document.getElementById(arg).style.height='1px';
    document.getElementById(imgid).src='max2.gif';
    }
    }
    </script>
    </head>
    <body>
    <div
    style="height:650px;background-color:gray;width:800px;margin-left:auto;margin-right:auto;float:center;">
    <div id="content"
    style="background-color:gray;width:250px;height:300px;float:left;">
    <div style="height:200px;">
    <div style="float:left;">
    <ul class="sortabledemo" id="secondlist"
    style="height:150px;width:200px;">
    <li class="orange" id="secondlist_secondlist1">
    <div style="width:200px;">
    <div class="handle"
    style="background-color:#999999;float:left;width:160px;
    height:18px;cursor:move;font-family:Verdana;font-size:8pt;font-weight:bold;">
    &nbsp;Music
    </div>
    <div style="float:left;width:20px;height:18px;
    cursor:pointer;text-align:center;">
    <img src="min.gif" id="musicMin"
    onclick="minimizeThis('underMusic', 'musicMin')" />
    </div>
    <div style="height:18px;float:left;width:20px">
    <img src="max.gif" />
    </div>
    <div id="underMusic" style="display:block;padding:5px;">
    text
    </div>
    </div>

    </li>
    <li class="orange" id="secondlist_secondlist2">
    <div style="width:200px;">
    <div class="handle"
    style="background-color:#999999;float:left;width:160px;
    height:18px;cursor:move;font-family:Verdana;font-size:8pt;font-weight:bold;">
    &nbsp;Sport
    </div>
    <div style="float:left;width:20px;height:18px;
    cursor:pointer;text-align:center;">
    <img src="min.gif" id="sportMin"
    onclick="minimizeThis('underSport', 'sportMin')" />
    </div>
    <div style="height:18px;float:left;width:20px">
    <img src="max.gif" />
    </div>
    <div id="underSport" style="display:block;padding:5px;">
    text
    </div>
    </div>

    </li>
    <li class="orange" id="secondlist_secondlist3">
    <div style="width:200px;">
    <div class="handle"
    style="background-color:#999999;float:left;width:160px;
    height:18px;cursor:move;font-family:Verdana;font-size:8pt;font-weight:bold;">
    &nbsp;Games
    </div>
    <div style="float:left;width:20px;height:18px;
    cursor:pointer;text-align:center;">
    <img src="min.gif" id="gamesMin"
    onclick="minimizeThis('underGames', 'gamesMin')" />
    </div>
    <div style="height:18px;float:left;width:20px">
    <img src="max.gif" />
    </div>
    <div id="underGames" style="display:block;padding:5px">
    text
    </div>
    </div>
    </li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>
    , Dec 16, 2005
    #1
    1. Advertising

  2. wrote:
    > Again this works in IE. In ff it has a bug. When the display is none
    > for a div in the first li, then the next li (the one underneath) moves
    > up to the right, looking very ugly. Is there someone who has had the
    > same problem before, or that know what the problem can be? Im putting
    > the code here:
    >


    This should fix that:

    function minimizeThis(arg, imgid){
    if (document.getElementById(arg).style.display == 'none'){
    document.getElementById(arg).style.display = '';
    ...
    }else{
    ...
    }
    }


    JW
    Janwillem Borleffs, Dec 16, 2005
    #2
    1. Advertising

  3. RobG Guest

    wrote:
    > Hi
    >
    > Im having problem in firefox with display:none/block.
    > I have essentially 3 li elements. In each element there are a few
    > nested div:s. Clicking on one of the divs, makes another div to
    > display: block or none.
    >
    > Again this works in IE. In ff it has a bug. When the display is none
    > for a div in the first li, then the next li (the one underneath) moves
    > up to the right, looking very ugly. Is there someone who has had the
    > same problem before, or that know what the problem can be? Im putting
    > the code here:


    This is not a JavaScript problem, it is a HTML/CSS issue. When you see
    differences between IE and Firefox related to CSS, it is more likely
    that IE is wrong.

    You have styles applied in the style sheet, inline and by JavaScript -
    that creates considerable complexity in itself.

    Ask your question in:

    comp.infosystems.www.authoring.stylesheets


    But before you do:

    1. Make sure you create valid HTML - validate it at the W3C (or use some
    other validator). Your current code has a number errors.

    2. Indent posted code using 2 or 4 spaces, not tabs.

    3. Manually wrap code at about 70 characters, otherwise auto-wrapping
    will probably introduce errors.

    4. Give your images dimensions. Anyone playing with your code has no
    idea what the actual layout should look like.

    5. Reduce your code to the minimum that displays the error or put it up
    on a server and post the URL.


    > <html>


    Missing doctype:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>

    > <head>
    > <style>


    Missing type attribute

    <style type="text/css">


    [...]
    > </style>
    > <script>


    Missing type attribute.

    <script type="text/javascript">


    > function minimizeThis(arg, imgid){
    > if(document.getElementById(arg).style.display=='none'){
    > document.getElementById(arg).style.display='block';
    > document.getElementById(arg).style.height='100px';
    > document.getElementById(imgid).src='min.gif';
    > }
    > else{
    > document.getElementById(arg).style.display='none';
    > document.getElementById(arg).style.height='1px';
    > document.getElementById(imgid).src='max2.gif';
    > }
    > }
    > </script>


    Don't forget feature testing:

    function minimizeThis(arg, imgid)
    {
    var d, i;
    if ( document.getElementById
    && (d = document.getElementById(arg))
    && (i = document.getElementById(imgid))
    && d.style ){
    if ('none' == d.style.display){
    d.style.display = '';
    d.style.height = '100px';
    i.src = 'min.gif';
    } else {
    d.style.display = 'none';
    d.style.height = '1px';
    i.src = 'max2.gif';
    }
    }
    }


    > </head>


    Missing title element.


    > <body>


    [...]

    > onclick="minimizeThis('underMusic', 'musicMin')" />


    There is nothing here to indicate the use of XHTML, so keep your markup
    as HTML - don't use ' />'. You are also missing alt attributes on the
    images, use alt='minimise' & alt='maximise' or similar.


    [...]


    --
    Rob
    RobG, Dec 16, 2005
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Chandra
    Replies:
    0
    Views:
    305
    Chandra
    Mar 7, 2007
  2. length power
    Replies:
    2
    Views:
    69
    Rustom Mody
    Apr 10, 2014
  3. Skip Montanaro
    Replies:
    0
    Views:
    51
    Skip Montanaro
    Apr 10, 2014
  4. Johannes Schneider

    Re: why i have the output of [None, None, None]

    Johannes Schneider, Apr 10, 2014, in forum: Python
    Replies:
    0
    Views:
    45
    Johannes Schneider
    Apr 10, 2014
  5. Terry Reedy
    Replies:
    0
    Views:
    55
    Terry Reedy
    Apr 10, 2014
Loading...

Share This Page