drop down selector issue [unresolved] [Archive]

View Full Version : drop down selector issue [unresolved]

chechu

07-17-2011, 07:36 PM

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:

<div id="lang_sel" >
<ul>
<li><a href="#" class="lang_sel_sel icl-nl">
Nederlands</a>
<ul>
<li class="icl-en">
<a href="http://rockyroadsnetwork.com?lang=en">
English (Engels) </a>
</li>
<li class="icl-fr">
<a href="http://rockyroadsnetwork.com?lang=fr">
Français (Frans) </a>
</li>
<li class="icl-de">
<a href="http://rockyroadsnetwork.com?lang=de">
Deutsch (Duits) </a>

</li>
<li class="icl-el">
<a href="http://rockyroadsnetwork.com?lang=el">
Ελληνικα (Grieks) </a>
</li>
</ul>
</li>
</ul>
</div>
This is the css:

#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 !

chechu

07-23-2011, 02:17 PM

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 ?

djr33

07-31-2011, 07:19 PM

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.

wodeln

08-01-2011, 04:56 AM

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

http://hellocg.com/jaso.jpghttp://hellocg.com/nva.jpghttp://hellocg.com/vghn.jpg

JShor

08-01-2011, 06:00 AM

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

For example, change your link to this:

<li class="icl-de">
<a href="http://www.rockyroadsnetwork.com/de/">
Deutsch</a>

And modify your CSS classes to look similar to:

.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).

chechu

08-15-2011, 09:31 PM

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 ...

Deadweight

08-16-2011, 03:46 AM

#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

chechu

08-17-2011, 06:16 PM

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

Deadweight

08-17-2011, 06:27 PM

Did it work for you? Also i just changed:

#lang_sel img.iclflag{width:18px;height:12px;position: relative; top: 1px; float:left;}
I added the float left
Changed this also:

#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.

#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

chechu

08-17-2011, 08:46 PM

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 !!

Deadweight

08-17-2011, 10:57 PM

to fix this
the drop-down doesn't always show up when hoovering
just change

#lang_sel ul ul {visibility:hidden;position:absolute;height:0;top:18px;left:0; width:180px;border-top:1px solid #cdcdcd;}

Play around with the "top" coding.
I did change to 18px from 20px. That might be right but you should play around with it until your liking
I cant get it perfect because the code isnt right when i view.

Here is the second fix:

#lang_sel img.iclflag{width:18px;height:12px;position: relative; top: 1px; float:left; margin-top: 3px;}

Tell me if that is how you want it to work
If the flag is to high or to low change the "margin-top" (more positive = moving down / more negative = moving up)

chechu

08-18-2011, 08:28 AM

When I change the margin in the secon option, all go down, so also the not-selected options. I should just have the selected option go down a bit.

Still remains the issue that when hoovering the other options come up, but when I go down with my mouse, they disappear again. I have to do this a few times untill the non-selected options remain "still" and I can click on them.

Deadweight

08-18-2011, 06:35 PM

Yep that means you have to change

#lang_sel ul ul {visibility:hidden;position:absolute;height:0;top:18px;left:0; width:180px;border-top:1px solid #cdcdcd;}

top:18px this one - change that

chechu

08-19-2011, 12:42 PM

It changes the position, but it still doesn't fix that when hoovering the other options come up, but when I go down with my mouse, they disappear again. I have to do this a few times untill the non-selected options remain "still" and I can click on them.