Trying to a fix a broken UL border - html

I need your help. For some reason, I cannot seem to get my border to seamlessly line up with its parent element. The example below depicts the problem that I am having:
Here is a drawing of the desired result:
I am guessing that I cannot be that far off. Maybe a fresh set eyes can remedy the issue at hand.
Here is the HTML & CSS in question:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
font-family: Segoe UI;
font-size: 9pt;
}
.dropdown dd, .dropdown ul {
margin: 0px;
padding: 0px;
}
.dropdown dd {
position: relative;
}
.dropdown:hover {
color:#5d4617;
}
.dropdown dt {
border:1px solid rgb(180,180,180);
width: 170px;
position: relative;
border-radius: 2px;
padding: 1px;
}
.dropdown dt:hover, .dropdown dt:focus {
color:#5d4617;
border-color: rgb(180,180,180);
}
.dropdown dt input[type=text] {
border: 0;
width: 100%;
box-sizing: border-box;
}
.dropdown dt input[type=button] {
border: 0;
width: 15px;
height: 18px;
margin: 0;
padding: 0;
position: absolute;
top: 0;
right: 0;
}
.dropdown dd ul {
border-left:1px solid rgb(180,180,180);
border-right:1px solid rgb(180,180,180);
border-bottom:1px solid rgb(180,180,180);
border-top:1px solid #FFF;
color: #000;
display: block;
left: 0px;
top: -1px;
padding: 1px;
position:absolute;
width:auto;
min-width: 170px;
list-style:none;
cursor: pointer;
}
.dropdown dd ul li {
padding: 2px;
display: block;
}
.dropdown dd ul li:hover {
background-color: rgb(232,232,232);
font-weight: bold;
}
#field_img {
position:absolute;
left:0px;
top:2px;
}
#fileno {
padding-left: 18px;
}
/*CSS STYLING FOR BUTTONS */
input[type="button"] {
cursor:pointer;
border: 1px solid #707070;
background-color: #F0F0F0;
border-radius: 4px;
box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #DDD;
background-image: -ms-linear-gradient(top, #F1F1F1 0%, #E3E3E3 50%, #D0D0D0 100%);
padding: 3px 6px;
}
input[type="button"]:hover {
cursor:pointer;
background-color: #EAF6FD;
border: 1px solid #3C7FB1;
box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #BEE6FD, 0 0 3px #A7D9F5;
}
input[type="button"][disabled], input[type="button"][disabled]:hover {
border: 1px solid #ADB2B5;
text-shadow: 1px 1px #fff;
cursor:default;
background-color: #F4F4F4;
box-shadow: inset 0 1px 2px #fff;
}
</style>
</head>
<body>
<div style="float: left;" class="dropdown">
<dt>
<img src="glass.png" id="field_img">
<input id="fileno" type="text">
<input type="button" value="▼" id="btn_arrow">
</dt>
<dd>
<ul id="recent"></ul>
</dd>
</div>
<div><input type="button" id="search" value="search"></div>
</body>
</html>


.dropdown dt {
border:1px solid rgb(180, 180, 180);
border-bottom: 0; /* << ------------------------ fix here */
...
}
.dropdown dd ul {
border-left:1px solid rgb(180, 180, 180);
border-right:1px solid rgb(180, 180, 180);
border-bottom:1px solid rgb(180, 180, 180);
border-top: 0; /* << ------------------------ fix here */
...
}
Demo

Related

Two different width borders on 3 sides

I had this code to create a double border off different widths, but i need it to only show on the left,top and right sides. This is fine with the border property but not possible with outline as it doesn't share the same border-left etc
border: double 4px black;
outline: solid 3px black;
any help would be great

Why not remove the outline and instead create a nested element inside of the element?
You can do like this:
Create nested elements in HTML:
<div class="big">
<div class="small">Some text Here.....</div>
</div>
Then apply CSS:
.big{
border: 5px solid green;
border-bottom: none;
}
.small{
border: 2px solid black;
border-bottom: none;
margin: 2px;
}
No need to use the outline.

You can use box-shadow instead of outline - see demo below:
div {
line-height: 20px;
border-color: black;
border-style: double;
border-width: 4px 4px 0 4px;
box-shadow: -3px 0 0 0 black, /* left */
3px 0 0 0 black, /* right */
3px -3px 0 0 black, /* top */
-3px -3px 0 0 black; /* top */
}
<div> </div>

Create nested elements with their own id's
<div id="outer-border">
<div id="inner-border"></div>
</div>
Then set the correct CSS properties for those elements, for example something like:
#outer-border{border-bottom: none}
#inner-border{border-bottom: none}

Here is an idea using gradient to create the second border.
.box {
width: 200px;
height: 200px;
border: solid 2px red;
border-bottom:none;
padding:3px; /*control the distance between border*/
padding-bottom:0;
background:
linear-gradient(green,green) top /100% 4px,
linear-gradient(green,green) left /4px 100%,
linear-gradient(green,green) right/4px 100%;
background-repeat:no-repeat;
background-origin:content-box;
}
<div class="box">
</div>
Another idea using pseudo element:
.box {
width: 200px;
height: 200px;
border: solid 2px red;
border-bottom:none;
position:relative;
}
.box:before {
content:"";
position:absolute;
top:3px;
left:3px;
right:3px;
bottom:0;
border: solid 4px green;
border-bottom:none;
}
<div class="box">
</div>

.st1, .st2 {
background-color: yellow;
}
.st1 {
outline: solid 3px black;
width: 400px;
height: 200px;
position: relative;
}
.st2 {
border-left-color: black;
border-left-style: double;
border-left-width: 4px;
border-top-color: black;
border-top-style: double;
border-top-width: 4px;
border-right-color: black;
border-right-style: double;
border-right-width: 4px;
position: absolute;
left: -1px;
right: -1px;
top: -1px;
bottom: -3px;
}
<div class="st1"><div class="st2"></div></div>
or
.st1, .st2 {
background-color: yellow;
}
.st1 {
border: 3px solid black;
border-bottom: none;
width: 400px;
height: 200px;
position: relative;
box-sizing: border-box;
}
.st2 {
border: 1px solid black;
border-bottom: none;
margin-top: 2px;
margin-right: 2px;
margin-left: 2px;
margin-bottom: 0px;
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
<div class="st1"><div class="st2">test</div></div>

Change Bootstrap breadcrumbs divider color

I'm using Bootstrap 3 and am overriding .btn-primary with the following css to change the color a bit
.btn-primary {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
color: #fff;
background-color: #286090;
border-color: #204d74
}
I'm trying to use this breadcrumb example but when I do, the arrow points (triangle bits) that separate the items are not the same color as the buttons. This happens on the normal state as well as the hover/active state.
What CSS properties do I need to edit to make these triangles the same color as my buttons?
.btn-primary {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
color: #fff;
background-color: #286090;
border-color: #204d74
}
.btn-breadcrumb .btn:not(:last-child):after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 17px solid transparent;
border-bottom: 17px solid transparent;
border-left: 10px solid white;
position: absolute;
top: 50%;
margin-top: -17px;
left: 100%;
z-index: 3;
}
.btn-breadcrumb .btn:not(:last-child):before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 17px solid transparent;
border-bottom: 17px solid transparent;
border-left: 10px solid rgb(173, 173, 173);
position: absolute;
top: 50%;
margin-top: -17px;
margin-left: 1px;
left: 100%;
z-index: 3;
}
/** The Spacing **/
.btn-breadcrumb .btn {
padding: 6px 12px 6px 24px;
color: #fff;
}
.btn-breadcrumb .btn:first-child {
padding: 6px 6px 6px 10px;
}
.btn-breadcrumb .btn:last-child {
padding: 6px 18px 6px 24px;
}
/** Primary button **/
.btn-breadcrumb .btn.btn-primary:not(:last-child):after {
border-left: 10px solid #428bca;
}
.btn-breadcrumb .btn.btn-primary:not(:last-child):before {
border-left: 10px solid #357ebd;
}
.btn-breadcrumb .btn.btn-primary:hover:not(:last-child):after {
border-left: 10px solid #3276b1;
}
.btn-breadcrumb .btn.btn-primary:hover:not(:last-child):before {
border-left: 10px solid #285e8e;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<h2>Breadcrumb Primary</h2>
<div class="btn-group btn-breadcrumb">
<i class="glyphicon glyphicon-home"></i>
Snippets
Breadcrumbs
Primary
</div>
</div>
</div>

This is the CSS you need to use on normal state:
.btn-breadcrumb .btn.btn-primary:not(:last-child):after {
border-left: 10px solid #327CBA;
}
This is the CSS you need to use on hover state:
.btn-breadcrumb .btn.btn-primary:hover:not(:last-child):after {
border-left: 10px solid #286090;
}
Just find the definitions in your CSS file and replace it with the code above.You just need to change the colors for the normal state and hover state actually.

Just remove the arrows altogether
.btn.btn-primary:not(:last-child)::before,
.btn.btn-primary:not(:last-child)::after {
content: none;
}

HTML 5 Button wont align to the far right of text area

How can I float the button all the way right?
I've tried everyhting to float it right, and change the position to absolute, but I have had no luck pushing the button to the right edge of the text area.
http://jsfiddle.net/hz0fo895/
#counter { float:left; position:relative; margin-left:20px; margin-top:5px;}
.stringsharewrapper { width:100%; height:auto; margin-top:10px; }
.writestring { width:90%; left:20px; height:80px; position:relative; margin-top:10px; }
.stringtitle { color:black; font-family:arial; font-family: Helvetica, Arial, "Sans Serif"; font-size:20px; font-weight:bold; margin-left:20px; margin-top:5px;}
/*----------Filter Button 1 ------------*/
#stringbutton2[type=checkbox]
{
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
[for="stringbutton2"]
{
background: #EEE;
background: linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -moz-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -ms-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -o-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#FFBF00),color-stop(100%,#FE9A2E));
background: -webkit-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
border: 1px solid #CCC;
border-radius: 5px;
box-shadow: inset 0px 0px 1px 0px #FFF;
color: #000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFBF00',endColorstr='#FE9A2E',GradientType=0);
font-family: Helvetica,Arial,"Sans Serif";
font-size: 13px;
font-weight: bold;
left: 5%;
moz-border-radius: 5px;
moz-box-shadow: inset 0px 0px 1px 0px #FFF;
padding: 0;
padding: 6px;
position: absolute;
text-align: center;
text-shadow: 1px 1px 1px #DDD;
top: 4px;
webkit-border-radius: 5px;
webkit-box-shadow: inset 0px 0px 1px 0px #FFF;
width: 100px;
}
[for="stringbutton2"]:hover
{
background: #CCC;
background: -moz-linear-gradient(top,#0B2F3A 0%,#100719 100%);
background: -ms-linear-gradient(top,#0B2F3A 0%,#100719 100%);
background: -o-linear-gradient(top,#0B2F3A 0%,#100719 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#0B2F3A),color-stop(100%,#100719));
background: -webkit-linear-gradient(top,#0B2F3A 0%,#100719 100%);
border-color: #BBB;
color: #FFFFFF;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0B2F3A',endColorstr='#100719',GradientType=0);
font-weight: bold;
}
[for="stringbutton2"] span.filterswitch:last-of-type
{
display: none;
visibility: hidden;
}
#stringbutton2[type=checkbox]:checked
{
color: #FFA317;
}
#stringbutton2[type=checkbox]:checked~ .filtercontent
{
display: block;
visibility: visible;
width: 100%;
}
#stringbutton2[type=checkbox]:checked~ [for="stringbutton2"] span.filterswitch:first-of-type
{
display: none;
visibility: hidden;
}
#stringbutton2[type=checkbox]:checked~ [for="stringbutton2"] span.filterswitch:last-of-type
{
color: #3CC;
display: block;
visibility: visible;
}
/*-------------Filter Button Container---------------*/
.submitcontainer
{
position: relative;
width: 300px; top:0; float:right;
}
<div class="sharepagetab sharewrapper activeshare" id="ashare">
<div class="allshares">
<div class="shares">
<div class='stringsharewrapper'>
<span class="stringtitle">Write Something</span><br />
<textarea class="writestring" onKeyUp="textCounter2(this,'counter',150);"></textarea>
<br />
<input disabled class="charInput" size="3" value="150" id="counter">
<!----------Write button------------>
<div class="submitcontainer">
<input onclick="toggleContent()" type="checkbox" id="stringbutton2" class="cfilterbutton" role="button">
<label for="stringbutton2" onclick="">
<span class="filterswitch">Post</span>
<span class="filterswitch">Post</span>
</label>
</div><!----End Filtercontainer------->
</div>

Remove the width on submitcontainer. That will cause the Post button to float all the way right. This however will not cause it to line up with your textbox as the textbox is autosizing. You probably want another div around the "Write Something" text and text input with a specified width that matches the width of your submitcontainer div if you want things to work as you desire.

Quick fix. Use a negative value of margin-right to fix it.
#counter { float:left; position:relative; margin-left:20px; margin-top:5px;}
.stringsharewrapper { width:100%; height:auto; margin-top:10px; }
.writestring { width:90%; left:20px; height:80px; position:relative; margin-top:10px; }
.stringtitle { color:black; font-family:arial; font-family: Helvetica, Arial, "Sans Serif"; font-size:20px; font-weight:bold; margin-left:20px; margin-top:5px;}
/*----------Filter Button 1 ------------*/
#stringbutton2[type=checkbox]
{
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
[for="stringbutton2"]
{
background: #EEE;
background: linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -moz-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -ms-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -o-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#FFBF00),color-stop(100%,#FE9A2E));
background: -webkit-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
border: 1px solid #CCC;
border-radius: 5px;
box-shadow: inset 0px 0px 1px 0px #FFF;
color: #000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFBF00',endColorstr='#FE9A2E',GradientType=0);
font-family: Helvetica,Arial,"Sans Serif";
font-size: 13px;
font-weight: bold;
left: 5%;
moz-border-radius: 5px;
moz-box-shadow: inset 0px 0px 1px 0px #FFF;
padding: 0;
padding: 6px;
position: absolute;
text-align: center;
text-shadow: 1px 1px 1px #DDD;
top: 4px;
webkit-border-radius: 5px;
webkit-box-shadow: inset 0px 0px 1px 0px #FFF;
width: 100px;
}
[for="stringbutton2"]:hover
{
background: #CCC;
background: -moz-linear-gradient(top,#0B2F3A 0%,#100719 100%);
background: -ms-linear-gradient(top,#0B2F3A 0%,#100719 100%);
background: -o-linear-gradient(top,#0B2F3A 0%,#100719 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#0B2F3A),color-stop(100%,#100719));
background: -webkit-linear-gradient(top,#0B2F3A 0%,#100719 100%);
border-color: #BBB;
color: #FFFFFF;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0B2F3A',endColorstr='#100719',GradientType=0);
font-weight: bold;
}
[for="stringbutton2"] span.filterswitch:last-of-type
{
display: none;
visibility: hidden;
}
#stringbutton2[type=checkbox]:checked
{
color: #FFA317;
}
#stringbutton2[type=checkbox]:checked~ .filtercontent
{
display: block;
visibility: visible;
width: 100%;
}
#stringbutton2[type=checkbox]:checked~ [for="stringbutton2"] span.filterswitch:first-of-type
{
display: none;
visibility: hidden;
}
#stringbutton2[type=checkbox]:checked~ [for="stringbutton2"] span.filterswitch:last-of-type
{
color: #3CC;
display: block;
visibility: visible;
}
.submitcontainer
{ position: relative; width: 300px; top:0; float:right!important; margin-right: -135px;
}
<div class="sharepagetab sharewrapper activeshare" id="ashare">
<div class="allshares">
<div class="shares">
<div class='stringsharewrapper'>
<span class="stringtitle">Write Something</span><br />
<textarea class="writestring" onKeyUp="textCounter2(this,'counter',150);"></textarea>
<br />
<input disabled class="charInput" size="3" value="150" id="counter">
<!----------Write button------------>
<div class="submitcontainer">
<input onclick="toggleContent()" type="checkbox" id="stringbutton2" class="cfilterbutton" role="button">
<label for="stringbutton2" onclick="">
<span class="filterswitch">Post</span>
<span class="filterswitch">Post</span>
</label>
</div><!----End Filtercontainer------->
</div>

I found the answer following some of the tips of Devon posted and expanding on the concept. What I did was put a wrapper .stringclassic with 90% width and placed all the children inside and floated them accordingly. Check out my code for more informaton or the fiddle. Hope I can help someone else lookin for this information.
Thank you All!
http://jsfiddle.net/L0f48606/1/
<div class="sharepagetab sharewrapper activeshare" id="ashare">
<div class="allshares">
<div class="shares">
<div class='stringsharewrapper'>
<div class="stringclassic">
<span class="stringtitle">Write Something</span> <br />
<textarea class="writestring" onKeyUp="textCounter2(this,'counter',150);"></textarea>
<br />
<input disabled class="charInput" size="3" value="150" id="counter">
<!----------Write button------------>
<div class="submitcontainer">
<input onclick="toggleContent()" type="checkbox" id="stringbutton2" class="cfilterbutton" role="button">
<label for="stringbutton2" onclick="">
<span class="filterswitch">Post</span>
<span class="filterswitch">Post</span>
</label>
</div><!----End Filtercontainer------->
</div>
</div>
</div>
</div>
</div>
And the CSS:
#counter { float:left; position:relative; margin-left:20px; margin-top:5px;}
.stringsharewrapper { width:100%; height:auto; margin-top:10px; background:pink; position:relative;}
.writestring { width:90%; left:20px; height:80px; position:relative; margin-top:10px; }
.stringtitle { color:black; font-family:arial; font-family: Helvetica, Arial, "Sans Serif"; font-size:20px; font-weight:bold; float:left; position:relative; margin-left:20px; margin-top:5px;}
/*----------Filter Button 1 ------------*/
#stringbutton2[type=checkbox]
{
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
[for="stringbutton2"]
{
background: #EEE;
background: linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -moz-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -ms-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -o-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#FFBF00),color-stop(100%,#FE9A2E));
background: -webkit-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
border: 1px solid #CCC;
border-radius: 5px;
box-shadow: inset 0px 0px 1px 0px #FFF;
color: #000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFBF00',endColorstr='#FE9A2E',GradientType=0);
font-family: Helvetica,Arial,"Sans Serif";
font-size: 13px;
font-weight: bold;
left: 5%;
moz-border-radius: 5px;
moz-box-shadow: inset 0px 0px 1px 0px #FFF;
padding: 0;
padding: 6px;
position: absolute;
text-align: center;
text-shadow: 1px 1px 1px #DDD;
top: 4px;
webkit-border-radius: 5px;
webkit-box-shadow: inset 0px 0px 1px 0px #FFF;
width: 100px;
}
[for="stringbutton2"]:hover
{
background: #CCC;
background: -moz-linear-gradient(top,#0B2F3A 0%,#100719 100%);
background: -ms-linear-gradient(top,#0B2F3A 0%,#100719 100%);
background: -o-linear-gradient(top,#0B2F3A 0%,#100719 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#0B2F3A),color-stop(100%,#100719));
background: -webkit-linear-gradient(top,#0B2F3A 0%,#100719 100%);
border-color: #BBB;
color: #FFFFFF;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0B2F3A',endColorstr='#100719',GradientType=0);
font-weight: bold;
}
[for="stringbutton2"] span.filterswitch:last-of-type
{
display: none;
visibility: hidden;
}
#stringbutton2[type=checkbox]:checked
{
color: #FFA317;
}
#stringbutton2[type=checkbox]:checked~ .filtercontent
{
display: block;
visibility: visible;
width: 100%;
}
#stringbutton2[type=checkbox]:checked~ [for="stringbutton2"] span.filterswitch:first-of-type
{
display: none;
visibility: hidden;
}
#stringbutton2[type=checkbox]:checked~ [for="stringbutton2"] span.filterswitch:last-of-type
{
color: #3CC;
display: block;
visibility: visible;
}
/*-------------Filter Button Container---------------*/
.stringclassic { width:90%; left:20px; height:80px; position:relative; margin-top:1px; float:left; }
.writestring { width:100%; height:80px; position:relative; margin-top:10px; }
.submitcontainer
{
position: relative; margin-right:90px;
top:0; float:right; display:inline-block;
}

transparent hover background

Please visit the 'jsfiddle' Code, where the output can be seen. When hover displays the menu text, the background of the text field is transpernt + and lower zindex. I haven't set any transparency or zindex to the menu.
I have tried every possible technique to get it resolved but no luck.
.control-menu {
float: left;
width: 50px;
background-color: #F0F0F0;
height: 380px;
border-right: 1px solid #e0e0e0;
z-index: 100;
}
.control-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.btn {
position: relative;
display: block;
text-decoration: none;
background-color: #e0e0e0;
padding: 15px 20px 10px 20px;
text-align: center;
margin: 0 0 1px 0;
border-right: 1px groove #f00;
text-shadow: #666666 1px 1px 1px;
}
.btn-name {
display: none;
border-top: 1px solid #f0f0f0;
padding-top: 16px !important;
}
.btn:hover .btn-name {
display:inline;
background-color: #e0e0e0;
width: 100px;
padding: 17px 20px 12px 0;
margin: 0 0 1px 0;
border-right: 1px groove #f00;
}
.btn.active {
background-color: #F0F0F0;
border-bottom: 1px solid #f00;
}
.btn.active:hover .btn-name {
background-color: #F0F0F0;
border-bottom: 1px solid #f00;
}
can someone please guide solution?

just add
z-index:200
to the .btn, didn't change any positioning fiddle

just add position: relative; and z-index: 1000;
.btn:hover .btn-name {
display: inline;
background-color: #e0e0e0 !important;
width: 100px;
padding: 17px 20px 12px 0;
margin: 0 0 1px 0;
border-right: 1px groove #f00;
position: relative;
z-index: 1000;
}

in the btn:hover .btn-name add position relative and z-index: 1
.btn:hover .btn-name {
/* add this */
position: relative;
z-index: 1;
/* you code */
display: inline;
background-color: #e0e0e0 !important;
width: 100px;
padding: 17px 20px 12px 0;
margin: 0 0 1px 0;
border-right: 1px groove #f00;
}
here the fix : jsfiddle

Keeping text and icons inside the header in one line

I'm having trouble finding out why the right section of the header goes under the left section when you zoom out in Safari, Chrome and Opera.
Here is the demo of the header.
If you open the demo in safari, chrome or opera you'll see that the right section of the header goes beneath the left section of the header.
I want to make the header stay in one line when you zoom out in different browsers.
Here is the code I have.
HTML:
<body class="body">
<div id="white-background">
<div class='top-head'>
<div class='left'>
<a class="logo"></a>
<div id="search">
<form id="searchbox">
<input type="text" id="search-bar" required placeholder="What are you looking for?">
<input type="submit" id="submit" value="Search">
</form> <!-- end of form id -->
</div> <!-- end of search id -->
</div> <!-- end of left class -->
<div class='right'>
<a class="login" href="#" alt="Login">Login</a>
<a class="create-account" href="#" alt="create-account">Create Account</a>
<div class="language-wrapper">
<a class="language-icon" href="#" alt="choose-your-language">Language
<div class="arrow-up"></div>
<div class="arrow-down"></div>
</a>
<a class="delivery-country-icon" href="#" alt="choose-your-delivery-country">Delivery Country
<div class="arrow-up"></div>
<div class="arrow-down"></div>
</a>
</div> <!-- end of right class -->
</div> <!-- end of top-head -->
</div><!-- end of white-background class -->
</div> <!-- end of body class -->
CSS:
#white-background {
width: 1024px;
height: 1400px;
background: white;
position: relative;
z-index: 0;
margin: 0 auto 30px auto;
}
.top-head{ height: 45px; }
.left{ padding-left: 15px; padding-top: 14px; float:left; }
.right{ line-height: 24px; padding-top: 7px; padding-right: 15px; float:right; }
.logo {
background:url(http://placehold.it/140x20);
background-position: left top;
background-repeat: no-repeat;
width: 140px;
height: 20px;
display: block;
margin: 0px 0px 0px 0px;
cursor: pointer;
}
#search {
position: relative;
margin-left: 150px;
bottom: 25px;
}
#search-bar {
display: inline-block;
box-shadow: 0px 1px 0px #f2f2f2;
background: #fff;
border: 1px solid #d3d3d3;
height: 26px;
padding-right: 80px;
padding-left: 5px;
color: #202020;
font-size: 12px;
font-family: 'Open Sans', Verdana, Arial;
}
#search-bar:hover { border: 1px solid #c6c6c6; box-shadow: 0px 1px 0px #e5e5e5; }
#search-bar:active { border: 1px solid #d13030; }
#submit {
box-shadow: 0px 1px 0px #f2f2f2;
background: #f8f8f8;
border: 1px solid #d3d3d3;
width: 80px;
height: 26px;
font-size: 12px;
font-weight: bold;
font-family: 'Open Sans', Verdana, Arial;
color: #656565;
}
#submit:hover { border: 1px solid #c6c6c6; box-shadow: 0px 1px 0px #e5e5e5; color: #000; }
#submit:active { background: #dcdcdc; color: #242424; }
.login {
font-weight: bold;
border: 1px solid #d3d3d3;
color: #202020;
padding-right: 15px;
padding-left: 15px;
display: inline-block;
font-size: 11px;
text-align: right;
box-shadow: 0px 1px 0px #f2f2f2;
text-decoration: none;
background: #f8f8f8;
}
.login:hover {
background: #f4f4f4;
box-shadow: 0px 1px 0px #e5e5e5;
}
.create-account {
font-weight: bold;
border: 1px solid #d13030;
color: #fff;
padding-right: 15px;
padding-left: 15px;
display: inline-block;
font-size: 11px;
text-align: right;
text-decoration: none;
background: #d13030 ;
}
.create-account:hover {
background: #c42d2d;
box-shadow: 0px 1px 0px #e5e5e5;
}
.arrow-down {
width: 0;
height: 0;
position: absolute;
right: 5px;
top: 40%;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #202020;
}
.language-icon:hover .arrow-down:hover {
border-top: 5px solid #d13030;
}
.language-icon:hover .arrow-up {
width: 0;
height: 0;
position: absolute;
right: 5px;
top: 40%;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.language-wrapper:hover .language-dropdown {
opacity: 1;
display: block;
}
.language-wrapper {
display: inline-block;
}
.language-icon {
border: 1px solid #d3d3d3;
color: #202020;
padding-right: 20px;
padding-left: 27px;
display: inline-block;
font-size: 11px;
width: auto;
text-align: right;
text-decoration: none;
box-shadow: 0px 1px 0px #f2f2f2;
background: #f8f8f8 url("http://placehold.it/25x25") no-repeat 0 0 ;
position: relative;
left: 0; top: 0;
}
.language-icon:hover {
background: #fff url("http://placehold.it/25x25") no-repeat 0 -20px ;
color: #d13030;
border: 1px solid #c6c6c6;
box-shadow: 0px 1px 0px #e5e5e5;
}
.delivery-country-icon {
position: relative;
left: 0; top: 0;
border: 1px solid #d3d3d3;
color: #202020;
padding-right: 20px;
padding-left: 27px;
display: inline-block;
font-size: 11px;
text-align: right;
text-decoration: none;
box-shadow: 0px 1px 0px #f2f2f2;
background: #f8f8f8 url("http://placehold.it/25x25") no-repeat top left ;
}
.delivery-country-icon:hover {
background: #fff url("http://placehold.it/25x25") no-repeat 0 -20px ;
color: #d13030;
border: 1px solid #c6c6c6;
box-shadow: 0px 1px 0px #e5e5e5;
}

You can fix this by setting fixed widths for the child elements (inputs, etc..).
But why would you zoom to 25%?