Firefox, Safari, IE
As you can see in different browsers appears 1-2 px difference between input and div, how to clear it?
HTML:
<input type="text" class="my-input-select" disabled="disabled"/>
<div class="my-input-select-box" >
<ul style="z-index:100">
<li>All</li>
<li>Products</li>
<li>Categories</li>
<li>Clients</li>
<li>News</li>
</ul>
</div>
CSS:
.my-input-select{
border: 1px solid #acacac;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px;
background: url(images/forms/select.png) no-repeat 98% center;
cursor: pointer;
display: block;
}
div.my-input-select-box{
position: relative;
margin: 0;
padding: 0;
}
div.my-input-select-box ul{
position: absolute;
background: red;
left: 110px;
top: 26px;
width: 172px;
z-index: 100;
margin: 0;
padding: 0;
}
div.my-input-select-box li{
border-bottom: medium none;
color: #393939;
cursor: pointer;
display: block;
font-size: 12px;
line-height: 12px;
list-style-type: none;
margin: 0;
padding: 6px 2px 6px 10px;
}
You have to use an html, css reset for example http://necolas.github.com/normalize.css/
Related
When I hover my cursor on 'English' menu, it displays the contents of 'More Behance' menu.
Image
As you can see in the Image above, the arrow for 'English' menu points upwards but displays the contents of 'More Behance' menu. Can anyone help me out by using HTML and CSS languages only.
I tried solving this problem using the code given below.
The HTML code:
<div class="dropup">
<div>
<div class="arrow-down"></div>
<button class="dropbtn1">More Behance</button>
</div>
<ul class="dropup-content" style="width: 195px; left: 20px; bottom: 30px;">
<li>Careers at Behance</li>
<li>Adobe Portfolio</li>
<li>Blog</li>
<li>Creative Career Tips</li>
<li>Download the App</li>
</ul>
</div>
<div class="dropup">
<div>
<div class="arrow-down1"></div>
<button class="dropbtn2">English</button>
</div>
<ul class="dropup-content" style="width: 100px; left: 40px; bottom: 30px;">
<li>English</li>
<li>Čeština</li>
<li>Dansk</li>
<li>Deutsch</li>
<li>Español</li>
<li>Français</li>
<li>Italiano</li>
<li>Nederlands</li>
<li>Norsk</li>
<li>Polski</li>
<li>Português</li>
<li>Pусский</li>
<li>Suomi</li>
<li>Svenska</li>
<li>Türkçe</li>
<li>日本語</li>
<li>한국어</li>
<li>中文(简体)</li>
<li>中文(繁體)</li>
</ul>
</div>
The CSS Code:
.arrow-down {
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 3px solid dimgray;
position: relative;
left: 198px;
bottom: -13px;
}
.arrow-down:hover{
transform: rotateZ(-180deg);
}
.arrow-down1 {
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 3px solid dimgray;
position: relative;
left: 18px;
bottom: -13px;
}
.arrow-down1:hover {
transform: rotateZ(-180deg);
}
.dropbtn1{
padding: 5px;
border: none;
font-family: inherit;
font-size: 11px;
font-weight: bold;
color: dimgray;
font-weight: bold;
margin-bottom: 0;
margin-top: -7.5px;
cursor: pointer;
position: relative;
left: 20px;
top: 2px;
text-align: center;
}
.dropbtn2{
padding: 5px;
border: none;
font-family: inherit;
font-size: 11px;
font-weight: bold;
color: dimgray;
font-weight: bold;
margin-bottom: 0;
margin-top: -7.5px;
cursor: pointer;
position: relative;
left: 63px;
top: 2px;
text-align: center;
}
.dropup{
position: relative;
display: inline-block;
}
.dropup-content{
display: none;
position: absolute;
/* left: 20px;
bottom: 25px; */
background-color: #f1f1f1;
width: 195px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 100;
border-radius: 10px;
font-weight: bold;
font-size: 11px;
padding-right: 7px;
color: dimgray;
/* transition: 0.3s color; */
}
.dropup-content a{
color: #000;
padding: 6px 16px;
text-decoration: none;
display: block;
}
.dropup-content a:hover{
background-color: #0057ff;
color: white;
}
.dropup:hover .dropup-content{
display: block;
}
This was basically a styling issue. Elements were overlapping each other.
Apart from the original issue you have used so many css classes, which you could replace using generic classes.
e.g : defining classes like arrow1,2 , dropdown1,2 cannot scale up easily
See the corrected HTML and anhanced css.
<div class="dropup">
<div>
<div class="arrow-down"></div>
<button class="dropbtn1">More Behance</button>
</div>
<ul id="menu1" class="dropup-content" style="width: 195px; left: 20px; bottom: 30px;">
<li>Careers at Behance</li>
<li>Adobe Portfolio</li>
<li>Blog</li>
<li>Creative Career Tips</li>
<li>Download the App</li>
</ul>
</div>
<div class="dropup">
<div>
<div class="arrow-down"></div>
<button class="dropbtn">English</button>
</div>
<ul id="menu2" class="dropup-content" style="width: 100px; left: 40px; bottom: 30px;">
<li>English</li>
<li>Čeština</li>
<li>Dansk</li>
<li>Deutsch</li>
<li>Español</li>
<li>Français</li>
<li>Italiano</li>
<li>Nederlands</li>
<li>Norsk</li>
<li>Polski</li>
<li>Português</li>
<li>Pусский</li>
<li>Suomi</li>
<li>Svenska</li>
<li>Türkçe</li>
<li>日本語</li>
<li>한국어</li>
<li>中文(简体)</li>
<li>中文(繁體)</li>
</ul>
</div>
CSS:
.more-space{height : 200px;}
.arrow-down{
float : right;
}
.arrow-down:before{
font-size : 9px;
content: "\25bc";
}
.arrow-down:hover{
transform: rotateZ(-180deg);
}
.dropup{
margin : 2px 5px;
position : relative;
float : left;
}
.dropup-content{
display: none;
position: absolute;
/* left: 20px;
bottom: 25px; */
background-color: #f1f1f1;
width: 195px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 100;
border-radius: 10px;
font-weight: bold;
font-size: 11px;
padding-right: 7px;
color: dimgray;
/* transition: 0.3s color; */
}
.dropup-content a{
color: #000;
padding: 6px 16px;
text-decoration: none;
display: block;
}
.dropup-content a:hover{
background-color: #0057ff;
color: white;
}
.dropup:hover .dropup-content{
display: block;
}
Working Fiddle : https://jsfiddle.net/svamoy9j/
When I hover on the button, it shows the input box (shown in picture number 1) My code is written like this:
.search-btn{
position: relative;
top: 30%;
left: 30%;
transform: translate(-50%,-50%);
transition: all 1s;
width: 50px;
height: 50px;
background: white;
box-sizing: border-box;
border-radius: 25px;
border: 4px solid white;
padding: 5px;
}
.fa{
box-sizing: border-box;
padding: 10px;
width: 42.5px;
height: 42.5px;
position: absolute;
top: 0;
right: 0;
border-radius: 50%;
color: black;
text-align: center;
font-size: 1.2em;
transition: all 1s;
}
.search-btn:hover{
width: 200px;
cursor: pointer;
}
.search-btn:hover .search-txt {
display: inline-block;
}
.search-txt {
position: absolute;
top: 0;
left: 0;
width: 100%;;
height: 42.5px;
line-height: 50px;
display: none;
font-size: 1em;
border-radius: 20px;
padding: 0 20px;
}
.search-btn:hover .fa{
background: #941313;
color: white;
}
The only way I can get rid of the border is if I remove the {display: inline-block} in the search-btn:hover .search-txt and add {border:none} and etc. But then that completely gets rid of the input box itself and I can't write anything in it (shown in picture 2)
What am I doing wrong?? Thank you for the help in advance.
By the way, my html is written like this (all inside the header)
<nav>
<ul>
<li>About</li>
<li>Stories</li>
<li>
Resources and Campaigns
</li>
<li>Contact</li>
<li><div class="search-btn">
<input class="search-txt" type="search" name="" placeholder="Type to search">
<i class="fa fa-search"></i>
</div>
</li>
</ul>
</nav>
You need to use border:none; Replace your .search-txt css with this
.search-txt {
position: absolute;
top: 0;
left: 0;
width: 100%;;
height: 42.5px;
line-height: 50px;
display: none;
font-size: 1em;
border: none;
padding: 0 20px;
}
Isaac you can add following class after your class .search-txt
.search-txt input{
border: none !important;
border-style: none;
padding:10px 5px;
margin:0px 0px;
}
Im working on menu, which is text justified. To make this working, I add an new line. the problem is that it should be zero pixels. However, it's breaking layout
JS fiddle to see it in work
https://jsfiddle.net/z1qsL739/1/
<div class="registration-menu">
<ul class="reg-menu-list">
<li class="active">some </li>
<li>some</li>
<div class="justify-fix"></div>
</ul>
</div>
Css
.registration-menu{
background: white;
border-top: 4px solid green;
border-bottom: 4px solid green;
}
.reg-menu-list{
list-style: none;
display: inline-block;
text-align: justify;
width: 100%;
line-height: 0em;
color: green;
font-size: 0px;
margin: 0;
padding: 0;
.justify-fix{
width: 100%;
line-height: 0em;
height: 0;
display: inline-block;
content: ' ';
}
li{
display: inline-block;
line-height: 1em;
font-size: 18px;
&.active{
background: #fde8be;
border-top: 4px solid #ffb642;
border-bottom: 4px solid #ffb642;
margin: -4px 0 -4px 0;
}
a{
padding: 10px;
display: inline-block;
}
&:hover{
#include transition(all .4s ease);
background: #fde8be;
}
}
}
Try by adding the following rules, height: 46px; to the .registration-menu and padding: 4px 0; to the .reg-menu-list
.registration-menu {
background: white none repeat scroll 0 0;
border-bottom: 4px solid green;
border-top: 4px solid green;
height: 46px;
}
.reg-menu-list {
color: green;
display: inline-block;
font-size: 0;
line-height: 0;
list-style: outside none none;
padding: 4px 0;
text-align: justify;
width: 100%;
}
A div is not allowed inside a list as a direct child. A modern and straightforward way to go is using flexbox positioning, e.g.
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-around;
}
Example: http://codepen.io/anon/pen/dpbWJk?editors=0100
You don't need the div at all, use a pseudo-element
.registration-menu {
background: white;
border-top: 4px solid green;
border-bottom: 4px solid green;
}
.reg-menu-list {
list-style: none;
text-align: justify;
width: 100%;
line-height: 0em;
color: green;
font-size: 0px;
margin: 0;
padding: 0;
}
.reg-menu-list::after {
width: 100%;
line-height: 0em;
height: 0;
display: inline-block;
content: ' ';
}
li {
display: inline-block;
line-height: 1em;
font-size: 18px;
background: pink;
}
li.active {
background: #fde8be;
border-top: 4px solid #ffb642;
border-bottom: 4px solid #ffb642;
margin: -4px 0 -4px 0;
}
a {
padding: 10px;
display: inline-block;
}
a:hover {
#include transition(all .4s ease);
background: #fde8be;
}
<div class="registration-menu">
<ul class="reg-menu-list">
<li class="active">some
</li>
<li>some
</li>
<li>some
</li>
<li>some
</li>
<li>some
</li>
<li>some
</li>
</ul>
</div>
remove display: inline-block from .reg-menu-list
In the organization chart below, when you hover over an element in A, B or C column, there is a weird thing happening. The lines and boxes after hovered element are moving down as the hovered element is changing size, but after it has finished resizing, those lines and boxes return to previous position. (I want to keep this position always, even during resizing of an hovering element)
Can anyone help me fix this?
Code:
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
-webkit-transition: all linear 1s;
-moz-transition: all linear 1s;
transition: all linear 1s;
}
.tree{
width: 50%;
max-width: 1000px;
margin: 0 auto;
padding: 10px 20px;
}
ul{
list-style: none;
padding: 0;
}
ul a{
display: block;
background: #ccc;
border: 2px solid #000;
text-align: center;
font: bold 11px "Times New Roman", Times, serif;
text-decoration: none;
height: 90px;
box-shadow: 5px 5px 10px -5px rgba(0,0,0,0.5);
}
img {
width: 29%;
height: 80px;
float: left;
margin: 3px 0 0 6px;
border: 1px solid #FFF;
border-radius: 5px;
}
a:hover{
font: bold 11.5px "Times New Roman", Times, serif;
}
a:hover span{
font-size: 16px;
}
a:hover > img{
width: 30%;
height: 90px;
}
.tree span{
font-size: 15px;
}
.leader{
width: 35%;
margin: 0 auto;
}
.leader:after{
content: "";
display: block;
height: 60px;
border-left: 2px solid #000;
margin: 0 0 -20px 50%;
}
.leader a{
margin: 0 auto;
border-radius: 10px;
width: 85%;
}
.leader a:hover{
box-shadow: 8px 8px 9px -4px rgba(0,0,0,0.1);
height: 100px;
width: 90%;
margin: -10px auto 0 auto;
}
.teams{
margin-left: -3%;
}
.teams li{
float: left;
width: 30.3%;
margin-left: 3%;
}
.teams:after{
content: "";
display: block;
width: 66.5%;
height: 20px;
border-top: 2px solid #000;
border-right: 2px solid #000;
border-left: 2px solid #000;
margin-left: 18%;
}
.team li{
margin: 0 auto;
}
.team a{
height: 35px;
margin-top: 20px;
}
.team li a{
margin-left: 10%;
}
.team > a:first-child{
pointer-events: none;
}
.employees li{
float: none;
width: 100%;
}
.employees li:before{
content: "";
display: block;
height: 60px;
border-left: 2px solid #000;
border-bottom: 2px solid #000;
width: 9%;
}
.employees li:nth-child(1n+2):before{
height: 100px;
margin-top: -43px;
}
.employees li a{
width: 90%;
height: 90px;
border-radius: 10px;
margin-top: -47px;
z-index: 1;
}
.employees li a:hover{
box-shadow: 8px 8px 9px -4px rgba(0,0,0,0.1);
height: 100px;
width: 95%;
margin: -52px 0 -48px 5%;
}
<body ondragstart="return false">
<div class="tree">
<ul>
<li class="leader">Leader</li>
<ul class="teams">
<li class="team a">A
<ul class="employees">
<li>A1</li>
<li>A2</li>
<li>A3</li>
<li>A4</li>
</ul>
</li>
<li class="team b">B
<ul class="employees">
<li>B1</li>
<li>B2</li>
</ul>
</li>
<li class="team c">C
<ul class="employees">
<li>C1</li>
<li>C2</li>
<li>C3</li>
</ul>
</li>
</ul>
</ul>
</div>
</body>
I would suggest using transform:scale(x) for the hover effect instead of actually changing the element size. Transform does not affect the overall layout so the surrounding elements stay where they are. Also transforms don't cause the browser to repaint and can use the GPU for the animating process so they are generally much smoother.
So, I'm making this context menus, which looks great in all major browsers, even IE plays nice, right down until IE7.
I don't know why it has that weird spacing and was hoping someone could enlighten me.
Here's a JSFiddle
CSS
/* CSS Document */
*{
zoom: 1;
}
.context-menu-container{
border: 1px solid #828790;
padding: 2px;
width: 100px;
background-color: #f1f1f1;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-size: 12px;
position: relative;
margin-left: 5px;
margin-top: 5px;
}
.context-menu{
list-style-type: none;
padding: 0px;
margin: 0px;
display: block;
position: relative;
}
.context-menu li{
position: relative;
height: 20px;
border: 1px solid transparent;
border-radius: 2px;
margin: 0px;
}
.context-menu li.separator{
height: 2px;
border: 0;
background: url(http://img843.imageshack.us/img843/2599/horizontalseparator.png) repeat-x center;
padding: 2px;
margin-left: 26px;
}
.context-menu li.separator:hover{
border: 0;
background: url(http://img843.imageshack.us/img843/2599/horizontalseparator.png) repeat-x center;
}
.context-menu li:hover{
border: 1px solid #afd0f7;
background: url(http://img860.imageshack.us/img860/3511/contextmenuhover.png) repeat-x;
}
.context-menu li.disabled, .context-menu li.disabled a{
color: #8b8b8b;
}
.context-menu li.disabled:hover{
border: 1px solid #d5d4d4;
background: url(http://img823.imageshack.us/img823/31/contextmenudisabled.png) repeat-x;
}
.context-menu li a{
line-height: 20px;
height: 20px;
text-decoration: none;
color: black;
display: block;
cursor: default;
padding-left: 30px;
position: relative;
}
.context-menu a.delete{
background: url(http://img268.imageshack.us/img268/9831/deleteqb.png) no-repeat 2px center;
}
.context-menu .vertical-separator{
width: 2px;
height: 100%;
position: absolute;
left: 25px;
background: url(http://img836.imageshack.us/img836/6873/verticalseparator.png) repeat-y;
margin: 0px;
padding: 0px;
margin-bottom: 10px;
}
.context-menu div.label{
margin-left: 25px;
padding-left: 5px;
float:left;
}
HTML
<div class='context-menu-container'>
<ul class='context-menu'>
<div class='vertical-separator'></div>
<li><a class='delete' href="#">Action</a></li>
<li class='separator'></li>
<li class='disabled'>Action</li>
<li>Action</li>
<li>Action</li>
</ul>
</div>
You need this, unsurprisingly because of an IE7 bug:
.context-menu li.separator {
font-size: 0;
line-height: 0;
}
http://jsfiddle.net/thirtydot/XLRWT/17/
Also, having a <div> as a child of a <ul> is invalid HTML. It may work in browsers, but it's still invalid.