drop down selector issue [tangent, original reposted]

[chechu]

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">
            <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:

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

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 ?

[philips]

Hello,

You have created a very good looking website.

I would like to know how I can create a grey line similar to the following one which shows after US POLITICS: http://www.thedailybeast.com/article...-campaign.html

I'll appreciate your advice. Thanks.

[chechu]

style="border-bottom: 5px solid #ddd;"

but that is not what this post is about ...

[philips]

Many thanks. I am sorry for posting this here. I was looking for help and no one was responding to my query. I posted the code you provided into the css style document and I did not see it taking effect on the html page.

Many thanks.

[chechu]

Post the whole code here; that might help people on the forum to see how we can help.

[philips]

Hi, thank you.

This is what I have written as far as the HTML is concerned:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="pages.css" rel="stylesheet" type="text/css" />
</head>


and this is the CSS part:


/*
CSS Credit: http://david.philips
*/

body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Times New Roman, sans-serif;
font-size: 13px;
color: #333333;
}

[chechu]

You should have content, Philips. You don't have a body in your html, so how can you expect something to be seen ?

[philips]

I mean what is it that can cause the css code you provided to appear or take effect on the html document?

As far as I know, CSS takes care of the formatting so if I take the css style sheet away from the folder that contains the website, I will only have text and pictures nothing more. The formatting will disappear. I have tested this with many of the free templates that are available on the internet.

I think I need to understand this in order to work in a meaningful way with CSS AND HTML.

[philips]

Content? Do you pictures and text?