When using
filter:alpha(opacity=60);
on a div containing an unordered list which has :hover on the list items, IE8 will only activate the :hover event on the first item that is hovered over.
Moving up/down to another list item will no longer activate the :hover event. This works in firefox however.
There is an example at http://www.ithinkimlost.com/paul/ese/test.html
Any ideas what would be causing this?
Try this syntax:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60)";
filter: alpha(opacity=60);
opacity: 0.60;
Some ideas that might fix it:
reset the opacity on the :hover
set an height on the lis
add a position and remove the clear
move #homeOptions above the :hover in the code
try this sheet:
#homeContent {
margin-left: 15px;
}
#homeMainPic {
background:url(main_pic.jpg) no-repeat;
height: 216px;
}
#homeOptions {
height: 216px;
width: 300px;
}
#homeOptions ul {
height: 216px;
overflow: hidden;
padding: 0;
margin: 0;
}
#homeOptions li {
display: block;
padding: 0 0 0 30px;
margin: 0;
vertical-align: middle;
text-align: left;
zoom:1;
background-color:#009;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60)";
filter:alpha(opacity=60);
opacity: 0.60;
}
/* it is needed - don't ask why */
#homeOptions li:hover {
background-color:#009;
}
#homeOptions a {
display: block;
width: 100%;
vertical-align: middle;
line-height: 72px;
height: 72px;
color: #fff;
text-decoration: none;
font-size: 1.1em;
border-bottom: 1px dashed white;
display: list-item;
list-style-type: disc;
list-style-position: inside;
padding-left: 30px;
}
#homeOptions a:hover {
background-color: #000;
}
Change this:
#homeOptions ul li img {
vertical-align:middle;
margin-right: 20px;
filter:alpha(opacity=60);
opacity: 0.60;
}
#homeOptions {
background-color:#009;
height: 216px;
width: 300px;
float: left;
}
Related
I have a problem when try to make transition effect on fixed element from right to left. When I hover, all li elements transition too.
https://jsfiddle.net/k0fow2jb/
You got it fixed here
https://jsfiddle.net/k0fow2jb/3/
the important thing was to add margin-left:auto to your .side-menu li
.side-menu {
z-index: 999;
overflow: hidden;
position: fixed;
top: 25%;
right: 0;
}
.side-menu li{
cursor: pointer;
display: block;
list-style-type: none;
width: 40px;
height: 40px;
overflow: hidden;
position: relative;
transition: width 0.5s;
margin-left:auto;
}
.side-menu li a{
position: relative;
text-decoration: none;
color: #FFFFFF;
}
.ask-questions {
background: #19b5fe;
}
.ask-questions:hover{
width: 150px;
}
.facebook-link {
background: #3b5998;
}
.side-menu li:hover{
width:150px;
}
.support-box{
background: #dd4b39;
}
I've been struggling with getting my hamburger menu to slowly open. It took me a long time to even create it. :) Can anyone tell me if this CSS code allows for having it gradually open?
http://codepen.io/kiddigit/pen/EKRgQz
#media only screen and (max-width: 700px) {
body {
background-color: #white;
}
img {max-width: 100%; padding-bottom: 10px;
}
h1 {
font-size: 30px;
}
.wrapper {
border: 0px;
padding: 1px;
background-color: white;
}
.content {
background-color: white;
border: none;
margin-left: 100px;
margin-right: 100px;
}
.menu-btn div{
float: left;
padding-right: 0px;
margin-top: 0em;
line-height: 1.2;
font-size: 18px;
font-weight: 200;
vertical-align: middle;
z-index: 99;
}
.menu-btn span {
display: block;
width: 25px;
height: 4px;
margin-bottom: 5px;
background: rgb(0,0,0);
z-index: 99;
}
.menu-btn span:last-of-type {
margin-bottom: 0;
}
.responsive-menu{
display: none;
overflow: hidden;
}
.responsive-menu ul {
width: 80px;
float: left;
margin-right: 0;
margin: 0;
}
.main-nav {
border: none;
}
a {
font-size: 10px;
color: white;
}
.responsive-menu li {
padding-left: 5px;
font-size: 10px;
line-height: 25px;
list-style-type: none;
background-color: black;
}
.expand {
display: block !important;
}
$( '.menu-btn' ).click(function(){
$('.responsive-menu').slideToggle('slow');
});
UPD: Smooth appearing of element when it changes display from none to block can't be achieved with CSS. JQuery has some functions for that, toggle() and slideToggle(). slideToggle looks better for dropdown as it changes height of element from 0 to its natural height. In brackets you can add animation speed, slow is equal to 600 milliseconds, time in milliseconds also can be used: $('.responsive-menu').slideToggle(500)
Okay, so I am trying to align 5 list items in a row of width 980px.Each of the 5 list items have an anchor tag in them.The anchor tags have a fixed width of 184px and there is 15px padding between two list items.But it is working only in Chrome and Safari. The width in Firefox and IE browsers are showing up as 186px though I have given the fixed width. So,the last list item is coming in to a second row which is not what I wanted.
li {
list-style: none;
float: left;
content-align: center;
padding-right: 15px;
display: table-cell;
a{
width: 184px;
height: 230px;
span{
padding-top: 161px;
padding-right: 8px;
padding-left: 8px;
}
}
a:hover {
text-decoration: none;
}
}
li:last-child{
padding-right:0;
}
Can't understand why this is working only for two browswers
That is because <a> tag is inline by default and cannot accept height or width properties, you have to make it a block.
Also why are you using display: table-cell for the lis?
This code should work (SCSS):
ul {
width: 980px;
background:red;
list-style: none;
margin: 0;
padding: 0;
}
li {
float: left;
display: block;
padding-right: 15px;
background: blue;
&:last-child {
padding-right: 0;
}
a {
width: 184px;
height: 230px;
color: #FFF;
display: block;
span {
padding-top: 161px;
padding-right: 8px;
padding-left: 8px;
}
&:hover {
text-decoration: none;
}
}
}
See my jsFiddle.
I've setup a list where each list element contains two container: a title and a description container. What I need is to show dots at the bottom of each line.
It's working fine in Chrome and Safari. But unfortunately it doesn't work in firefox.
jsfiddle
Any suggestions on how to make this also work in firefox?
ul.basic {
display: table;
overflow: hidden;
}
ul.basic li {
position: relative;
display: table-row;
}
ul.basic li .title, ul.basic li .description {
display: table-cell;
background-color: #fff;
}
ul.basic li .title {
color: #999;
position: relative;
overflow: hidden;
padding-right: 60px;
}
ul.basic li .title span {
position: relative;
z-index: 10;
background-color: #fff;
}
ul.basic li .title:after {
content: '....................................................................... .......................................................................................................................................... ....................................................................................................................................... .............................................................................................................................................................................................';
position: absolute;
width: 300%;
margin-left: -100%;
word-wrap: break-word;
}
ul.basic li .description {
padding-left: 2px;
color: #000;
}
I see 2 behaviour really different between FF and CHrome. Aniway why don't just use a
border-bottom: 1px dotted;
as css rule for css .description ? (also for .title if you need)
I had to use an image to display the desired result properly in all browsers.
Issue I'm having is the background image on the anchor as a before element needs to move with the text as you resize your screen.
I need the background image to maintain it's position ( e.g left: 20px;) with the text as you resize your screen.
Here is my CSS:
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li {
float: left;
width: 50%;
}
ul li a {
display: block;
padding: 15px 20px;
text-align: center;
text-decoration: none;
font-weight: bold;
position: relative;
color: #717171;
}
ul li a:before {
background: url(http://graphicclouds.com/wp-content/uploads/img/73-google-style-icons-thumb.jpg) no-repeat -11px -26px;
content: '';
display: block;
width: 34px;
height: 33px;
position: absolute;
top: 10px;
}
.link-1:before {
left: 20px;
}
.link-2:before {
left: 0px;
}
Here is a working example: http://jsfiddle.net/2KHS6/
All suggestions welcome
New version:
http://jsfiddle.net/2KHS6/5/
Hope it fills your needs. You might want to set a min-width to avoid problems with small screens though. I did this basically:
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li {
display: inline-block;
width: 50%;
margin: 10px 0;
/* So things don't get crazy */
min-width: 160px;
/* center the child, the <a> */
text-align: center;
}
ul li a {
display: inline-block;
text-decoration: none;
font-weight: bold;
color: #717171;
/* Should be the same height as the img so it stays centered */
line-height: 33px;
}
ul li a:before {
background: url(http://graphicclouds.com/wp-content/uploads/img/73-google-style-icons-thumb.jpg) no-repeat -11px -26px;
content: '';
display: block;
width: 34px;
height: 33px;
position: absolute;
/* position the image at the left of the a. There are many methods to do this actually */
margin: 0 0 0 -50px;
}