Hello,
please provide the complete sample where we can recreate the issue. We'll try to help.
Here is the external style sheet. Your DHTML is trying to run in the "content" div. Thanks again.
* {margin:0px;padding:0px;top:0px;left:0px;}
body{
text-align: center;
background-color: #D78C0C;
}
#central{
margin-right: auto;
margin-left: auto;
margin-top: 10px;
position: relative;
width: 780px;
text-align: left;
background:#fff url(https://secure.spidermed.com/fsabenefits/images/newsbackground.gif) repeat-y right top;
}
#header{
height: 205px;
width: 780px;
}
#searchspacer{
background-color: #d78c0b;
left: 479px;
height: 51px;
width: 53px;
position: absolute;
}
#searchbox{
background-color: #d78c0b;
left: 532px;
height: 90px;
width: 248px;
position: absolute;
}
#search{
margin-left: 45px;
margin-top: 20px;
position: absolute;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
}
#go{
background-color: #FFFFFF;
background-image: url(https://secure.spidermed.com/fsabenefits/images/searchbutton.gif);
background-repeat: no-repeat;
margin-left: 159px;
margin-top: 18px;
position: absolute;
}
#imageheader{
background-image: url(https://secure.spidermed.com/fsabenefits/images/header3.jpg);
background-repeat: no-repeat;
top: 51px;
position: absolute;
height: 154px;
width: 532px;
}
#menu_header{
position: absolute;
top: 57px;
height: 23px;
width: 532px;
margin-left: 18px;
}
#navtop{
background-image: url(https://secure.spidermed.com/fsabenefits/images/navtop_image.jpg);
background-repeat: no-repeat;
list-style-position: inside;
list-style-image: none;
list-style-type: none;
position: absolute;
height: 51px;
width: 479px;
color=#fff;
}
#navtop a{
height: 32px;
text-decoration: none;
font-size: 12px;
font-style: normal;
display: block;
position: absolute;
overflow: hidden;
font-family: Georgia, "Times New Roman", Times, serif;
padding-top: 19px;
color: #FFFFFF;
}
#nt1 ,#nt2 ,#nt3{
padding-left: 40px;
width: 79px;
background-image: url(https://secure.spidermed.com/fsabenefits/images/navtop_bl.gif);
}
#nt2{left: 119px;}
#nt3{left: 238px;}
#nt4{
left: 357px;
width: 94px;
padding-left: 28px;
background-image: url(images/navtopend_bl.gif);
}
#nt1:hover ,#nt2:hover ,#nt3:hover {background-image: url(https://secure.spidermed.com/fsabenefits/images/navtopover_bl.gif);}
#nt4:hover{background-image: url(https://secure.spidermed.com/fsabenefits/images/navtopendover_bl.gif);}
#navright{
position: absolute;
height: 85px;
width: 248px;
left: 532px;
top: 90px;
background-color: #000000;
list-style-position: inside;
list-style-image: none;
list-style-type: none;
}
#navright li{
text-indent: 0px;
background-color: #FFFFFF;
list-style-position: inside;
list-style-image: none;
list-style-type: none;
display: block;
}
#navright a{
background-repeat: no-repeat;
display: block;
height: 26px;
width: 195px;
position: absolute;
padding-left: 53px;
padding-top: 6px;
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
#nr2 ,#nr3{background-image: url(https://secure.spidermed.com/fsabenefits/images/navright.gif);}
#nr2{top: 29px;}
#nr3{top: 58px;}
#nr4{
top: 87px;
background-image: url(https://secure.spidermed.com/fsabenefits/images/navrightend.gif);
}
#nr1{
background-image: url(https://secure.spidermed.com/fsabenefits/images/navright_top2.jpg);
}
#nr2:hover ,#nr3:hover {background-image: url(https://secure.spidermed.com/fsabenefits/images/navrightover.gif);}
#nr4:hover{background-image: url(https://secure.spidermed.com/fsabenefits/images/navrightendover.gif);}
#nr1:hover{background-image: url(https://secure.spidermed.com/fsabenefits/images/navrightover_top2.jpg);}
#contentbox{
background:transparent;
}
#content{
width: 532px;
background:transparent;
float:left;
margin-top: 20px;
}
#content p{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
color: #393535;
margin-left: 20px;
margin-bottom: 20px;
width: 430px;
}
#content h1{
margin: 10px 10px 10px 26px;
width: 430px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #033387;
}
#content h2{
margin: 10px 10px 10px 20px;
width: 430px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #d78c0b;
}
#content li{
text-indent: 25px;
background-color: #FFFFFF;
list-style-position: inside;
list-style-image: none;
list-style-type: square;
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #666666;
}
#content A.mBlack:link {color:#393535; text-decoration:none;}
#content A.mBlack:visited {color:#393535; text-decoration:none;}
#content A.mBlack:active {color:#393535; text-decoration:none;}
#content A.mBlack:hover {color:#C00000; text-decoration:underline;}
#content A.mWhite:link {color:#ffffff; text-decoration:none;}
#content A.mWhite:visited {color:#ffffff; text-decoration:none;}
#content A.mWhite:active {color:#ffffff; text-decoration:none;}
#content A.mWhite:hover {color:#C00000; text-decoration:underline;}
#content A.mOrange:link {color:#D78C0C; text-decoration:none;}
#content A.mOrange:visited {color:#D78C0C; text-decoration:none;}
#content A.mOrange:active {color:#D78C0C; text-decoration:none;}
#content A.mOrange:hover {color:#C00000; text-decoration:underline;}
#content span{
margin-top: 10px;
margin-bottom: 4px;
width: 430px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #649721;
}
#content span#s2{color: #03449f;}
#content a{color: #666666;}
img{
float: left;
margin-right: 7px;
}
#news{
background:transparent;
width: 240px;
float:right;
padding-left: 8px;
margin-top: 0px;
}
#news p{
background-color: #033387;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
padding: 20px 20px 10px 20px;
}
#news a{color: #FFFFFF;}
#news h4{
color: #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
background-color: #000000;
}
#news A.mWhite:link {color:#ffffff; text-decoration:none;}
#news A.mWhite:visited {color:#ffffff; text-decoration:none;}
#news A.mWhite:active {color:#ffffff; text-decoration:none;}
#news A.mWhite:hover {color:#D78C0C; text-decoration:underline;}
#footer{
background-color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
height: 20px;
width: 780px;
clear: both;
text-decoration: none;
text-align: center;
padding-top:4px;
}
#footer ul{display: inline;}
#footer li{display: inline;}
#footer a{
color: #FFFFFF;
text-decoration: underline;
padding-right: 7px;
}
#copyright{
background-color: #c0c0c0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
height: 20px;
width: 780px;
text-decoration: none;
text-align: center;
position: relative;
}
#copyright p{
height: 20px;
text-decoration: none;
padding: 10px 10px;
}
#copyright a{color: #0000FF;}
#copyright a:hover{color: #FF0000;}
#imagepreloader{
visibility: hidden;
overflow: hidden;
height: 0px;
width: 0px;
}
.box_1_border {
font-family: tahoma;
font-size: 10px;
background-color: #ffffff;
border-left:1px solid #696969;
border-right:1px solid #696969;
border-top:1px solid #696969;
border-bottom:1px solid #696969;
}
.box_1_border_grid {
font-family: tahoma;
font-size: 10px;
background-color: #ffffff;
border-left:1px solid #696969;
border-right:1px solid #696969;
border-top:1px solid #696969;
border-bottom:1px solid #696969;
border-collapse: collapse;
}
.box_1_noborder {
font-family: tahoma;
font-size: 10px;
background-color: #ffffff;
}
.box_1_noborder_lg {
font-family: tahoma;
font-size: 12px;
background-color: #ffffff;
}
.box_1_noborder_grid {
font-family: tahoma;
font-size: 10px;
background-color: #ffffff;
border-collapse: collapse;
}
The issue is caused by body{text-align: center; .. class. In the local sample this class have affected only list of the options - it can be redefeined as
Try to add the following class to the page:
.dhx_combo_list{
text-align:left;
}
Thanks! That aligned the list to the left, but the graphic arrow still lines up on the left (should be on the riight) and its position actually hides the first few letters of the selection. Is there another class for the arrow as well?
The arrow class is (dhtmlxcombo.css):
.dhx_combo_img{
position:absolute;
top:0px;
right:0px;
width:17px;
height:20px;
}
Just putting that code into my external style sheet didn't fix the problem like the other one did. Do I actually need to CHANGE it - maybe put "align..." ? or "float... "?
You didn't provide the complete demo. So, we just point you to css class that is responsible for the arrow image style. You can modify it as you need.
If you need to get the ready solution, please provide the complete demo where we can recreate the issue.