Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: drop down selector issue [unresolved]

  1. #1
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    798
    Thanks
    86
    Thanked 2 Times in 2 Posts

    Default drop down selector issue [unresolved]

    Hey all,
    I have a css issue, which you can see here: http://www.rockyroadsnetwork.com on the top right: language selector.

    This is the code:
    Code:
    <div id="lang_sel"  >
        <ul>
            <li><a href="#" class="lang_sel_sel icl-nl">
                <span  class="icl_lang_sel_current">Nederlands</span></a>                                  
                <ul>
                                    <li class="icl-en">          
                        <a href="http://rockyroadsnetwork.com?lang=en">
                                            <span  class="icl_lang_sel_native">English</span> <span  class="icl_lang_sel_translated"><span  class="icl_lang_sel_native">(</span>Engels<span  class="icl_lang_sel_native">)</span></span>                    </a>
                    </li>
                                    <li class="icl-fr">          
                        <a href="http://rockyroadsnetwork.com?lang=fr">
                                            <span  class="icl_lang_sel_native">Franšais</span> <span  class="icl_lang_sel_translated"><span  class="icl_lang_sel_native">(</span>Frans<span  class="icl_lang_sel_native">)</span></span>                    </a>
                    </li>
                                    <li class="icl-de">          
                        <a href="http://rockyroadsnetwork.com?lang=de">
                                            <span  class="icl_lang_sel_native">Deutsch</span> <span  class="icl_lang_sel_translated"><span  class="icl_lang_sel_native">(</span>Duits<span  class="icl_lang_sel_native">)</span></span>                    </a>
    
                    </li>
                                    <li class="icl-el">          
                        <a href="http://rockyroadsnetwork.com?lang=el">
                                            <span  class="icl_lang_sel_native">Ελληνικα</span> <span  class="icl_lang_sel_translated"><span  class="icl_lang_sel_native">(</span>Grieks<span  class="icl_lang_sel_native">)</span></span>                    </a>
                    </li>
                                </ul>            
                        </li>
        </ul>    
    </div>
    This is the css:
    Code:
    #lang_sel {height:32px; position:relative; z-index:99;  font-family: verdana, arial, sans-serif;}
    /* hack to correct IE5.5 faulty box model */
    * html #lang_sel {width:12em; w\idth:12em;}
    /* remove all the bullets, borders and padding from the default list styling */
    #lang_sel ul, #lang_sel li {padding:0 !important; margin:0 !important; list-style-type:none !important;}
    #lang_sel li:before{content:'' !important;}
    #lang_sel ul ul {width:149px;}
    /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
    #lang_sel li {float:left;width:149px;position:relative;}
    /* style the links for the top level */
    #lang_sel a, #lang_sel a:visited {display:block;font-size:11px;text-decoration:none !important; color:#444444; border:1px solid #cdcdcd; background:#fff; padding-left:10px; line-height:24px;}
    /* a hack so that IE5.5 faulty box model is corrected */
    * html #lang_sel a, * html #lang_sel a:visited {width:149px; w\idth:138px;}
    /* hide the sub levels and give them a positon absolute so that they take up no room */
    #lang_sel ul ul {visibility:hidden;position:absolute;height:0;top:25px;left:0; width:149px;border-top:1px solid #cdcdcd;}
    /* another hack for IE5.5 */
    * html #lang_sel ul ul {top:18px;t\op:19px;}
    /* style the table so that it takes no ppart in the layout - required for IE to work */
    #lang_sel table {position:absolute; top:0; left:0; border-collapse:collapse;;}
    /* style the second level links */
    #lang_sel ul ul a, #lang_sel ul ul a:visited {background:#ffffff; color:#444444; height:auto; line-height:1em; padding:5px 10px;border-width:0 1px 1px 1px;}
    /* yet another hack for IE5.5 */
    * html #lang_sel ul ul a, * html #lang_sel ul ul a:visited {width:150px;w\idth:128px;}
    /* style the top level hover */
    #lang_sel a:hover, #lang_sel ul ul a:hover{color:#000; background:#eee;}
    #lang_sel :hover > a, #lang_sel ul ul :hover > a {color:#000; background:#eee;}
    #lang_sel a.lang_sel_sel{
        background:url(../img/nav-arrow-down.png) #fff right no-repeat;
        color:#444;
    }
    #lang_sel a.lang_sel_sel:hover{
        text-decoration: none;
        color:#000;
    }
    /* make the second level visible when hover on first level list OR link */
    #lang_sel ul li:hover ul,
    #lang_sel ul a:hover ul{visibility:visible; }
    #lang_sel img.iclflag{width:18px;height:12px;position: relative; top: 1px;}
    #lang_sel_footer {
      margin: 0;
      padding: 7px;
      text-align: center;
      border: 1px solid #fff;
      font: 11px Verdana, sans-serif;
      height: 15px;
      clear: both;
      background-color: #fff;
      border: 1px solid #cdcdcd;
    }
    #lang_sel_footer ul {
      list-style: none;
      margin:0;
      padding:0;
    }
    #lang_sel_footer ul li img {
      position: relative;
      top: 1px;
      width: 18px;
      height: 12px;
    }
    #lang_sel_footer ul li {
      display:inline;
      margin:0 1px 0 0;
      padding:0;
    }
    #lang_sel_footer ul li a, #lang_sel_footer ul li a:visited {
      text-decoration: none;
      padding: 5px 10px;
    }
    #lang_sel_footer ul li a:hover, #lang_sel_footer ul li a:active {}
    #wpml_credit_footer { width: 100%; margin: 10px 0; padding: 0; text-align: center; font-size: 11px; }
    #lang_sel_list {height:32px; position:relative; z-index:99;  font-family: verdana, arial, sans-serif; width:149px;}
    /* hack to correct IE5.5 faulty box model */
    * html #lang_sel_list {width:12em; w\idth:12em;}
    /* remove all the bullets, borders and padding from the default list styling */
    #lang_sel_list ul, #lang_sel_list li {padding:0 !important; margin:0 !important; list-style-type:none !important;}
    #lang_sel_list li:before{content:'' !important;}
    #lang_sel_list ul {width:149px;}
    /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
    #lang_sel_list li {float:left;width:149px;position:relative;}
    /* style the links for the top level */
    #lang_sel_list a, #lang_sel_list a:visited {display:block;font-size:11px;text-decoration:none !important; color:#444444; border:1px solid #cdcdcd; border-width:0 1px 1px 1px; background:#fff; padding-left:10px; line-height:18px;}
    /* a hack so that IE5.5 faulty box model is corrected */
    * html #lang_sel_list a, * html #lang_sel_list a:visited {width:149px; w\idth:138px;}
    /* hide the sub levels and give them a positon absolute so that they take up no room */
    #lang_sel_list ul {/*visibility:hidden;position:absolute;*/height:0;top:19px;left:0; width:149px;border-top:1px solid #cdcdcd;}
    /* another hack for IE5.5 */
    * html #lang_sel_list ul {top:18px;t\op:19px;}
    /* style the table so that it takes no ppart in the layout - required for IE to work */
    #lang_sel_list table {position:absolute; top:0; left:0; border-collapse:collapse;}
    /* style the second level links */
    #lang_sel_list ul a, #lang_sel_list_list ul a:visited {background:#ffffff; color:#444444; height:auto; line-height:1em; padding:3px 10px;}
    /* yet another hack for IE5.5 */
    * html #lang_sel_list ul a, * html #lang_sel_list ul a:visited {width:150px;w\idth:128px;}
    #lang_sel_list a.lang_sel_sel{
        background-image: none;
        color:#444;
    }
    #lang_sel_list a.lang_sel_sel:hover{
        text-decoration: none;
        color:#000;
    }
    /* make the second level visible when hover on first level list OR link */
    #lang_sel_list ul li:hover ul,
    #lang_sel_list ul a:hover ul{visibility:visible; }
    #lang_sel_list img.iclflag{width:18px;height:12px;position: relative; top: 1px;}
    #lang_sel.icl_rtl{
        text-align:right;
        direction: rtl;
    }
    #lang_sel.icl_rtl .lang_sel_sel{
        padding-right:14px;
    }
    There are two issues:
    1/ the language should be beside the flags, and not half below it
    2/ when the drop down unfolds, the Twitter and Facebook behind it are blocking from using the language selector

    Can anyone help me out here, please ? Many thanks !
    Last edited by djr33; 07-31-2011 at 07:20 PM.

  2. #2
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    798
    Thanks
    86
    Thanked 2 Times in 2 Posts

    Default

    Hey all,
    I resolved the issue with the transparant background, by removing the FB and TW
    But I still have the issue of the languages appearing below the flags, and not next to it.

    Anyone ?

  3. #3
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    This thread has been restored to an earlier state because the original discussion was interrupted with another question.
    Chechu's question has NOT been answered, so please help him if you can.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  4. #4
    Join Date
    Jul 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I can't test. because I can't get the img. desplay:inline; or desplay:block; please try;



  5. #5
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    557
    Thanks
    8
    Thanked 66 Times in 66 Posts

    Default

    Have you considered setting the flag image as a background, positioned in the middle to the left?

    For example, change your link to this:
    Code:
                        <li class="icl-de">          
                        <a href="http://www.rockyroadsnetwork.com/de/">
                        Deutsch</a>
    And modify your CSS classes to look similar to:
    Code:
    .icl-de {
    background: url(http://www.rockyroadsnetwork.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/de.png) center left no-repeat;
    }
    (in addition to whatever styling you already have for that class).

  6. #6
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    798
    Thanks
    86
    Thanked 2 Times in 2 Posts

    Default

    Thanks for your suggestions, but I can't change the original code, as it is in a WordPress template. I should play with the CSS to find the way ...

  7. #7
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    346
    Thanks
    5
    Thanked 33 Times in 31 Posts

    Default

    Code:
    #lang_sel {height:32px; position:relative; z-index:99;  font-family: verdana, arial, sans-serif;}
    
    /* hack to correct IE5.5 faulty box model */
    
    * html #lang_sel {width:180px; w\idth:160px;}
    
    /* remove all the bullets, borders and padding from the default list styling */
    
    #lang_sel ul, #lang_sel li {padding:0 !important; margin:0 !important; list-style-type:none !important;}
    
    #lang_sel li:before{content:'' !important;}
    
    #lang_sel ul ul {width:180px;}
    
    /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
    
    #lang_sel li {float:left;width:180px;position:relative;}
    
    /* style the links for the top level */
    
    #lang_sel a, #lang_sel a:visited {display:block;font-size:11px;text-decoration:none !important; color:#444444; border:1px solid #cdcdcd; background:#fff; padding-left:10px; line-height: 20px;}
    
    /* a hack so that IE5.5 faulty box model is corrected */
    
    * html #lang_sel a, * html #lang_sel a:visited {width:180px; w\idth:175px;}
    
    
    
    /* hide the sub levels and give them a positon absolute so that they take up no room */
    
    #lang_sel ul ul {visibility:hidden;position:absolute;height:0;top:20px;left:0; width:180px;border-top:1px solid #cdcdcd;}
    
    /* another hack for IE5.5 */
    
    * html #lang_sel ul ul {top:18px;t\op:19px;}
    
    
    
    /* style the table so that it takes no ppart in the layout - required for IE to work */
    
    #lang_sel table {position:absolute; top:0; left:0; border-collapse:collapse;;}
    
    
    
    /* style the second level links */
    
    #lang_sel ul ul a, #lang_sel ul ul a:visited {background:#ffffff; color:#444444; height:auto; line-height:1em; padding:5px 10px;border-width:0 1px 1px 1px;}
    
    /* yet another hack for IE5.5 */
    
    * html #lang_sel ul ul a, * html #lang_sel ul ul a:visited {width:180px;w\idth:175px;}
    
    
    
    /* style the top level hover */
    
    #lang_sel a:hover, #lang_sel ul ul a:hover{color:#000; background:#eee;}
    
    #lang_sel :hover > a, #lang_sel ul ul :hover > a {color:#000; background:#eee;}
    
    
    
    #lang_sel a.lang_sel_sel{
    
        background:url(../img/nav-arrow-down.png) #fff right no-repeat;
    
        color:#444;
    
    }
    
    #lang_sel a.lang_sel_sel:hover{
    
        text-decoration: none;
    
        color:#000;
    
    }
    
    
    
    /* make the second level visible when hover on first level list OR link */
    
    #lang_sel ul li:hover ul,
    
    #lang_sel ul a:hover ul{visibility:visible; }
    
    
    
    #lang_sel img.iclflag{width:18px;height:12px;position: relative; top: 1px; float:left;}
    
    
    
    
    
    
    
    
    
    
    
    #lang_sel_footer {
    
      margin: 0;
    
      padding: 7px;
    
      text-align: center;
    
      border: 1px solid #fff;
    
      font: 11px Verdana, sans-serif;
    
      height: 15px;
    
      clear: both;
    
      background-color: #fff;
    
      border: 1px solid #cdcdcd;
    
    }
    
    
    
    #lang_sel_footer ul {
    
      list-style: none;
    
      margin:0;
    
      padding:0;
    
    }
    
    
    
    #lang_sel_footer ul li img {
    
      position: relative;
    
      top: 1px;
    
      width: 18px;
    
      height: 12px;
    
    }
    
    
    
    #lang_sel_footer ul li {
    
      display:inline;
    
      margin:0 1px 0 0;
    
      padding:0;
    
    }
    
    
    
    #lang_sel_footer ul li a, #lang_sel_footer ul li a:visited {
    
      text-decoration: none;
    
      padding: 5px 10px;
    
    }
    
    
    
    #lang_sel_footer ul li a:hover, #lang_sel_footer ul li a:active {}
    
    
    
    #wpml_credit_footer { width: 100%; margin: 10px 0; padding: 0; text-align: center; font-size: 11px; }
    
    
    
    
    
    
    
    
    
    
    
    #lang_sel_list {height:32px; position:relative; z-index:99;  font-family: verdana, arial, sans-serif; width:149px;}
    
    /* hack to correct IE5.5 faulty box model */
    
    * html #lang_sel_list {width:12em; w\idth:12em;}
    
    /* remove all the bullets, borders and padding from the default list styling */
    
    #lang_sel_list ul, #lang_sel_list li {padding:0 !important; margin:0 !important; list-style-type:none !important;}
    
    #lang_sel_list li:before{content:'' !important;}
    
    #lang_sel_list ul {width:180px;}
    
    /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
    
    #lang_sel_list li {float:left;width:180px;position:relative;}
    
    /* style the links for the top level */
    
    #lang_sel_list a, #lang_sel_list a:visited {display:block;font-size:11px;text-decoration:none !important; color:#444444; border:1px solid #cdcdcd; border-width:0 1px 1px 1px; background:#fff; padding-left:10px; line-height:18px;}
    
    /* a hack so that IE5.5 faulty box model is corrected */
    
    * html #lang_sel_list a, * html #lang_sel_list a:visited {width:180px; w\idth:138px;}
    
    
    
    /* hide the sub levels and give them a positon absolute so that they take up no room */
    
    #lang_sel_list ul {/*visibility:hidden;position:absolute;*/height:0;top:19px;left:0; width:180px;border-top:1px solid #cdcdcd;}
    
    /* another hack for IE5.5 */
    
    * html #lang_sel_list ul {top:18px;t\op:19px;}
    
    
    
    /* style the table so that it takes no ppart in the layout - required for IE to work */
    
    #lang_sel_list table {position:absolute; top:0; left:0; border-collapse:collapse;}
    
    
    
    /* style the second level links */
    
    #lang_sel_list ul a, #lang_sel_list_list ul a:visited {background:#ffffff; color:#444444; height:auto; line-height:1em; padding:3px 10px;}
    
    /* yet another hack for IE5.5 */
    
    * html #lang_sel_list ul a, * html #lang_sel_list ul a:visited {width:180px;w\idth:128px;}
    
    
    
    #lang_sel_list a.lang_sel_sel{
    
        background-image: none;
    
        color:#444;
    
    }
    
    #lang_sel_list a.lang_sel_sel:hover{
    
        text-decoration: none;
    
        color:#000;
    
    }
    
    
    
    /* make the second level visible when hover on first level list OR link */
    
    #lang_sel_list ul li:hover ul,
    
    #lang_sel_list ul a:hover ul{visibility:visible; }
    
    
    
    #lang_sel_list img.iclflag{width:18px;height:12px;position: relative; top: 1px;}
    
    
    
    #lang_sel.icl_rtl{
    
        text-align:right;
    
        direction: rtl;
    
    }
    
    #lang_sel.icl_rtl .lang_sel_sel{
    
        padding-right:1px;
    
    }
    Just replace your whole code with this.
    This should work!
    Just in case it doesnt i have your old code. =P

  8. The Following User Says Thank You to Deadweight For This Useful Post:

    chechu (08-17-2011)

  9. #8
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    798
    Thanks
    86
    Thanked 2 Times in 2 Posts

    Default

    Please let me know what you changed, so I learn something too
    Thanks !

  10. #9
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    346
    Thanks
    5
    Thanked 33 Times in 31 Posts

    Default

    Did it work for you? Also i just changed:
    Code:
    #lang_sel img.iclflag{width:18px;height:12px;position: relative; top: 1px; float:left;}
    I added the float left
    Changed this also:
    Code:
    #lang_sel a, #lang_sel a:visited {display:block;font-size:11px;text-decoration:none !important; color:#444444; border:1px solid #cdcdcd; background:#fff; padding-left:10px; line-height: 20px;}
    Got made the line-height smaller.
    Code:
    #lang_sel ul ul {visibility:hidden;position:absolute;height:0;top:20px;left:0; width:180px;border-top:1px solid #cdcdcd;}
    Moved the selection up so its now closer
    Last edited by Deadweight; 08-17-2011 at 06:32 PM.

  11. The Following User Says Thank You to Deadweight For This Useful Post:

    chechu (08-17-2011)

  12. #10
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    798
    Thanks
    86
    Thanked 2 Times in 2 Posts

    Default

    Thanks Crazy, works very well, but a few remarks:
    - the drop-down doesn't always show up when hoovering
    - the flag of the choosen language shows up a little bit too high
    Could you make some changes, please ? Thanks a lot !!

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
  •