I have this simple hover effect http://www.mysecretathens.gr/Sera/index.html
#footer ul li:hover {
opacity: 0.7;
filter: alpha(opacity=40);
}
in the social media icons down in the footer, but in IE I see a blue-border all around each of the icons. How to fix that? Do you also see this?
I don't see it, but I suppose they are <a> anchor tags. So for IE you would have to add border:0px; for the anchor tags which are your social media icons.
If you have a link around an image IE automatically puts a border around it.
To remove blue border Add a { border: 0 } in your CSS
Add this to your css:
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
Edit: add it before filter: alpha(opacity=40);
if you have an link (anchor), it is the standard of internet explorer. in this case you have to reset the border with:
a {
border :none;
}
or
a {
border :0px;
}
and for the next time, i recommend you jsfiddle where you can put easily your code to run and debug it on the site for questions here.
Related
I have a fairly simple hover effect on a span inside a button
HTML:
<span class="content">text</span>
CSS:
span.content:hover {
background-color: #2b9385;
background-image: linear-gradient(#2b9385, #007571);
color: red;
}
When I hover over the span, it works fine in Edge and Chrome. In Firefox and IE 11, nothing happens.
Here is the weird part. If I use the dev. tools and inspect the element with hover checked, the CSS changes to the correct values and the background of the span changes correctly on the screen, it just doesn't work when I actually hover over it with the mouse. If I add "color:blue" to the hover section, the text color changes as it should when I hover over it, only the background part doesn't work.
I've tried adding vendor prefixes to the linear gradient part, but it didn't help (and shouldn't be needed in either case). Using #hex color values also didn't help.
Any clues appreciated.
I've added a Pen so you can see that it works in Chrome but not in FF. If you inspect the .content span in Firebug and click on the hover checkbox, the styles will be applied correctly, even though hovering over the button does nothing.
Pen
Just try this. It will definitely help.
.progress-button:hover span#button_content.content {
background-color: #2b9385;
background-image: linear-gradient(#2b9385, #007571);
cursor: pointer;
color: red;
}
I think you are missing colon(:) so just try this
background-image:(red, orange);
When visiting the page in Incognito (removing :visited styles) the link's text is blue, but it should be white.
.button {
color:#ffffff; /* white */
background:#d8eaf0;
}
.button:visited {
color:#ffffff; /* white */
background:#d8eaf0;
}
.button:hover {
color:#ffffff; /* white */
background:#3838a5;
}
.button:active {
color:#ffffff; /* white */
background:#d8eaf0;
}
text
Where your ".button" CSS style is, change it to ".button:link".
Try setting the position to absolute. And if that still doesn't work, go onto incognito mode and go on inspect element and check to see if the text box is overlapping.
If nothing still works, use inspect elements on Google and that should give you a great headstart. Good luck :D
I'm trying to make some text appear over an image when the image is hovered over.
This is typically a simple process, however apparently :hover doesn't work if the first div (for example)
first.div:hover second.div {
over (in my case an image) is using relative positioning instead of absolute.
There are lots of images in this page and they are set up as tables through CSS with attributes such as display:table; so I don't think I have the option of switching to absolute positioning. I know CSS tables aren't generally condoned, but I absolutely have to do it this way.
Right now I'm using opacity changes to try to make the text appear. I've tried using z-index too, but I think the problem is that the :hover effect doesn't work well with absolute positioning. What workarounds, if any, are available?
I'm not opposed to using languages other than HTML/CSS, but I'm pretty inexperienced and I don't understand them, so I'd prefer a CSS work around for this, but beggars aren't choosers.
As requested, here's some code:
HTML
<div class="cell"><img class="box" src="image1.jpg"><div id="text">Text text text</div></div>
CSS
.cell {
position:relative;
display:table-cell;
background-color:black;
width:700px;
height:auto;
}
#text {
display:table;
position:absolute;
z-index:999;
color:#fff;
text-align:center;
width:100%;
top:48%;
left:0;
}
img {
max-height:600px;
max-width:600px;
height:auto;
width:100%;
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
opacity:0.4;
z-index:2;
}
img:hover {
filter: none;
-webkit-filter: grayscale(0);
opacity:1.0;
}
I'm not sure on what's causing this so I included a lot more than necessary... I'm a little new to coding so take it easy on me, but I can't get cell.div:hover #text { opacity:1;} to work. I read somewhere that this is because hover effects don't work with relatively positioned divs...
I am not getting you proper, what is your issue. And if you are clear to you have problem in only opacity, then you can use css as below.
first.div:hover second.div {
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
filter: alpha(opacity=75);
-khtml-opacity: 0.75;
-moz-opacity: 0.75;
opacity: 0.75; }
If it's not work for you, then please share your code or live link, then explain you proper.
you can just use opacity to achieve this. Make sure you are targeting the pic on hover. Check out this fiddle.
http://jsfiddle.net/Davidicus/69ZTN/
Wow, literally 30 seconds after I took the time to post all of my code I found a solution. I used div.cell:hover #text {
opacity:1; }
and everything worked. Not sure what I was doing wrong it was a late night and probably tried to do something dumb like img.box:hover #text commands. Anyway disregard this question guys, and thanks
Take a look at http://www.kickstarter.com.
When you hover over their logo, the image lights up. Is this effect doable without using a different image on hover?
My first idea was to use ::after:hover and add a white square with high transparency that covers the logo, but since my logo is placed on a blue background this would not work. Another idea is to set opacity to 0.9 and on hover set it to 1. But this makes the image look too dark by default.
You may be able to use the css image filters, like this:
img:hover {-webkit-filter: brightness(150%); }
This sometimes looks funny and will only work in webkit browsers, but it's the best solution I could think of. It'll allow you to keep your blue background as well.
Here's a jsfiddle showing the Kickstarter logo on a blue background.
http://jsfiddle.net/62bCB/
Cheers,
As far as I am aware you can't do what you require with pure CSS at this point, due to the blue background. I think your best bet is edit the image in photoshop to be its :hover brightness, and then use something like:
img {
opacity: 0.7;
}
img:hover {
opacity: 1;
}
Changing the opacity on hover will work:
img:hover {
opacity: 0.5;
}
Fiddle
The original CSS has:
img:hover {
filter: alpha(opacity=80);
opacity: .8;
}
Fiddle: http://jsfiddle.net/praveenscience/hfUpk/
You have a few choices depending on what browsers you need to support. You could make the logo a background image and then change the image on hover. (or sprite the image so that you don't get a flicker)
Or you could try a combination of CSS opacity and microsoft filters for older versions of IE.
http://www.w3schools.com/cssref/css3_pr_opacity.asp
Since you mention you have a dark background you can try some of the new CSS filters (saturation, brightness etc) but you're out of luck for IE.
http://www.html5rocks.com/en/tutorials/filters/understanding-css/
You could use this CSS code which makes lighting up a smoother transition than just instantly bright. Techpp.com and Techlivewire.com also use this same css or one similar to it on their frontpage featured sections. I could not get CSS to post on here since stackoverflow kept giving me errors so I put it in a pastie. http://paste2.org/1L9H2XsF
you can use opacity value between 0.1 to 1
very light and 1 value is dark (default)
img {
filter: alpha(opacity=100);
opacity: 1;
}
img:hover {
filter: alpha(opacity=70);
opacity: 0.7;
}
For some reason I cannot display the dropdown menu on IE when I add a z-index in the header of any number. When I remove it, it works. However the dropdown then appears behind the container and content in Firefox and Chrome. So either I take it out or leave it in, I cant seem to satisfy all browsers. So i tried making a separate IE stylesheet without the z-index but that doesnt work either. I know the separate IE CSS is working because I changed the backgrounds but it uses the dropdown menu in the master stylesheet.
Website is www.stingrayimages.ca
Thank you for your help
Edit: So lets just say i got it all to work on IE since its always IE that gives the problems. But now the dropdown menu appears behind the content on other browsers like firefox and chrome. All i did was remove the z-index in the #head div. Anyway to fix the dropdown menu without adding z-index to the head div?
Edit: I got the dropdown to work on IE9 firefox and chrome. Not IE 6, it just blew up.
#head {
position:relative;
height: 140px;
width: 100%;
background: #FFF;
filter:alpha(opacity=93);
padding-top:20px;
/* CSS3 standard */
opacity:0.93;
-moz-box-shadow: 0 0 5px black;
-webkit-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
z-index:1;
}
OK so I had a look and there's good news and bad ;)
the opacity filter in the #head div means that overflow: hidden is being triggered, which is why no menus (it's the unfortunate side effect of filters and overflow I'm afraid).. remove that and you can have your z-index which you need anyway
next to get the transparency (opacity) for your dropdowns you can just use rgba(255,255,255,0.9) on the #nav ul li ul rule instead of #fff; (though leave #fff before that rule for fallback for browsers that can't do rgba() yet.. read more!)
That's nearly everyone happy - now you can also do rgba() transparency for IE using the gradient filter..
so the rule I landed up with looked like this (in an IE conditional comment):
#nav ul li ul {
zoom: 1;
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF); /* IE6 & 7 */
/* behavior: url(PIE.htc);*/ /* yuk filter */
}
and I thought it would be good to go..
BUT the Bad News
the behavior is commented out because you can only have one or the other, transparency or rounded corners, :( apparently
I didn't do too much research though so YMMV
I also noticed a problem or three in IE7, not sure if you want to support that but in case you do.. or want to check my final code which got it to this stage I pasted it in PasteBin
that code replaces your main CSS - the #head rule and whole /*navigation*/ section
Update: more good news and a little bad!
you can have the transparency and the rounded corners thanks to CSS3 PIE's own -pie-background property, but not the box shadow as well, the way PIE deals with box shadow means it fills the div instead of just drawing on the outside so the -pie-background reading of the rgba background is transparent but shows the grey color used for the shadow!
My solution:
I added a border to make up for loss of box-shadow, it's not looking too bad, and it's working across IE's ;)
here's an update to the I conditional comment above:
<!--[if lte IE 9]>
<style type="text/css" media="screen">
#nav ul li ul {
box-shadow: none;
-pie-background: rgba(255,255,255,0.9);
border: 3px double #eee;
border-width: 0 3px 3px 3px;
behavior: url(PIE.htc); /* yuk filter */
}
</style>
<![endif]-->
I am not sure which version of IE you are having a problem with but I tried in IE6 and IE7 and the menu system is completely broken. I don't have IE8, 9 or 10 here to test but I'll take a guess at a solution nonetheless!
If you add a z-index and position to the #container as well, it should solve your problem. z-index only applies to positioned elements.
#container {
position:relative;
z-index:0;
}
It is also worth reading Overlapping and z-index, which summarises the properties and also describes the problems when using z-index and IE.
Edit: Wow, I did not realise what was wrong until I found a machine with IE8 on it. I think you have misunderstood the standard CSS and IE specific CSS principle slightly. The IE specific CSS file(s) should only contain the properties that are different to the standard ones. Your ie-style.css file contains duplicates of all the rules and is being included for all versions of IE. IE8 is much more standards compliant than IE6/7 and you should rarely have to override CSS for that version.
So IE will have multiple copies of the same style being applied. Under normal circumstances most browsers can cope with this duplication, however one of the duplicates is the IE specific filter property.
You have filter:alpha(opacity=93); in both style.css and ie-style.css even though it should really only belong in an IE6/7 CSS file as IE8 filters work differently. If you remove the filter from both stylesheets then the menu correctly displays in IE8.
If you need the opacity to work in IE6 or IE7, I suggest creating a specific CSS file for those browsers and using conditional comments to include it just for those versions.
Have a look at this solution : http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/
Another solution that I used already is quite easy, but a pain in the *. You must all the parent container a specific lower z-index value than the one you want to show on top of the others.
Like so :
<parent>//z-index 1
<child>//zindex 2
<yourdropdown>//z-index3
Update 1
The menu didn't show correctly in my chrome so I fixed the #head z-index to 80 and it did way better. Do the following to get the layout the same in IE and Chrome and Firefox. Watch out though, I only tested those change on the homepage.
Add this to the .conbox class :
.conbox {
position:relative;
}
Place the logo correctly
#logo {
position:absolute;
left:0px;
top:0px;
}
Remove the #nav positioning
#nav {
margin-top:80px;
z-index:3;
}
The problem is, I can't even see any effect on the menu mouseover in IE!!
Setting z-index: -1 for elements that menu overlays and z index of men div resolved this problem for me.
#bodyWrapper
{
background: none repeat scroll 0 0 #E4F7FE;
overflow: hidden;
position: relative;
width: 100%;
padding: 0 0 60px;
z-index: -1;
}