I am having problems with the following link:
the play image is a <span> element with a background image used with a css sprite.
When i hover over the isotope hydrology image like in the image above everything works fine (link and css sprite). The problem is in IE9, when the cursor hovers over the css sprite(play button) the sprite goes back to the non-hover look and you cannot click to the link from inside (see image below).
If anyone knows why this is happening that would be awesome. Here's a jsfiddle I made for it, but it doesn't recreate the problem.
I have the following html and css:
html:
<div id="video-box-left">
<div class="video-img">
<a href="#" onclick="window.open('http://wwwindex.html','photoessay','scrollbars=no,resizable=yes,width=850,height=722')">
<span class="video-play-q-left">play</span>
<img src="resources-na/images/forum.PNG" width="200" height="155" border="1"></a>
</div>
<div class="video-text">
<p><strong>Food for the Future</strong></p>
</div>
</div>
css:
#video-box-left{
margin-left: 10px;
margin-right: 20px;
float: left;
width: 210px;
}
.video-img {
background-color: #EEEEEE;
border: 1px solid #DDDDDD;
margin-bottom: 5px;
padding: 4px;
width: 200px;
height: 155px;
}
.video-text {
}
.video-play-q-left {
background: url("../images/video-play-q-big.png") no-repeat scroll 0 0 transparent;
background-position: center top;
height: 50px;
position: absolute;
text-indent: -9999em;
width: 50px;
left: 100px;
top: 127px;
}
a:hover .video-play-q-left{
background-position: center bottom;
}
I'd guess this is due to an issue with the DOCTYPE of your document which causes IE9 to render the document in quirks mode. That would explain why the JSFiddle doesn't reproduce the problem. Try opening the Developer Console in IE9 and make sure Document Mode and Browser mode are both set to IE9. If that solves your problem, make sure your DOCTYPE tag is set to HTML 5, e.g.
<!DOCTYPE html>
Related
I've HTML, CSS, JS application working with cordova. I'm trying to show an whatsapp icon image on the page using CSS background image.
The image is loaded. However, the image isn't showing and the console doesn't show an error of image access forbidden, image not found, etc...
I've tried to show image using <img /> But with no use.
I've tried using this css property : background-size: contain !important;
I've tried to change background-position value.
I've tried to use background-image in the inline css style of the element.
I've tried adding text to <a> element.
None of them worked !
Here's My code :
.whatsapp-icon {
background-size: contain;
border-radius: 5px;
margin-top: 10px;
height: 35px;
width: 35px;
display: block;
float: right;
text-decoration: none;
}
<div class='theDownBar'>
<a style='background-image: url(img/whatsapp-icon.png);' href='https://api.whatsapp.com/send?phone=phonenumber' class='whatsapp-icon'></a>
</div>
EDIT : Added some images to clarify
The element is showing and has width and height
There's no console error, and the image loaded successfully when I check the source
Bro for me your code is working fine i just changed the image url see this:
<style>
.whatsapp-icon {
background-size: contain;
border-radius: 5px;
margin-top: 10px;
height: 35px;
width: 35px;
display: block;
float: right;
text-decoration: none;
}
</style>
<div class='theDownBar'><a style='background-image:url(https://lh5.googleusercontent.com/-GuUP5Jaz3Rg/AAAAAAAAAAI/AAAAAAAAAAc/HwaA1tNmtd0/photo.jpg);' href='https://api.whatsapp.com/send?phone=phonenumber' class='whatsapp-icon'></a></div>
You should check it again but if it still didn't work then try this code:
<div class='theDownBar'>
<a href='https://api.whatsapp.com/send?phone=phonenumber' class='whatsapp-icon'>
<img src='https://lh5.googleusercontent.com/-GuUP5Jaz3Rg/AAAAAAAAAAI/AAAAAAAAAAc/HwaA1tNmtd0/photo.jpg'/>
</a></div>
Don't forget to replace image url to your own.
.whatsapp-icon {
background-size: contain;
border-radius: 5px;
margin-top: 10px;
height: 35px;
width: 35px;
display: block;
background-repeat:no-repeat;
background-position: center;
float: right;
text-decoration: none;
}
<div class='theDownBar'>
<a style="background-image: url('https://imageog.flaticon.com/icons/png/512/33/33447.png?size=1200x630f&pad=10,10,10,10&ext=png&bg=FFFFFFFF');"
href='https://api.whatsapp.com/send?phone=phonenumber' class='whatsapp-icon'></a>
</div>
i did this and its work! probably check your image is invalid!
I can't remove border from my images. I've tried many times with different atributes. Still see white border. If you have any suggestion what causes the problem - please explain to me. I'm kinda newbie.
<head>
<style>
img{
border : none;
text-decoration: none;
}
#forum
{
background:url(forum_button.png) 0px 0px no-repeat;
width: 300px;
height: 81px;
}
#forum:hover
{
background:url(forum_button.png) -300px 0px no-repeat;
width: 300px;
height: 81px;
}
#facebook
{
background:url(social_buttons.png) 0px 0px no-repeat;
width: 29px;
height: 29px;
}
#facebook:hover
{
background:url(social_buttons.png) 0px -33px no-repeat;
width: 29px;
height: 29px;
}
#twitter
{
background:url(social_buttons.png) -31px 0px no-repeat;
width: 29px;
height: 29px;
}
#twitter:hover
{
background:url(social_buttons.png) -31px -33px no-repeat;
width: 29px;
height: 29px;
}
</style>
</head>
<body style="background:url(landing.png) no-repeat top #111111; width: 1280px; height: 1024px; border:0;">
<img id="forum" />
<div id="social">
<img id="facebook">
<img id="twitter">
</div>
It's because an img tag MUST have a src="" with a proper link otherwise it will be showing the image as a background like in your case (because of the css on the img) and a broken image on top of it
="#"><img id="facebook"></
It's not a border, what you see is the broken image border.
If you want to keep your code, change the img tag to a div..
Change
border: none;
to
border: none !important;
This way it will override all the parent's declarations and thus has to work.
That's probably because you have no src attribute on your img tags. I'd reccommend using transparent pixel as src in your case.
Insert Image by using img src with proper height and width.
Use Paint or other tools to edit image.
example.
make sure that your original image dont have any border, if it have simply select and crop the image.
maybe the border is not html given but its in your img ?
So open your image in an image program tool like photoshop and zoom to the places where the border is and have a look, if there is a border or not.
You are trying to set an icon image on a link using a background image that can be repositioned on a hover event.
The simplest way of doing this is as follows.
The HTML can be as simple as:
<a class="test" id="test" href="#"></a>
and apply the following CSS:
.test {
background: beige url(http://placekitten.com/50/50) center center no-repeat;
display: inline-block;
width: 50px;
height: 50px;
border: none;
}
Apply the background image on the link (a tag) instead of an img tag, which is not needed.
See demo at: http://jsfiddle.net/audetwebdesign/qAeHL/
I have this landing page. I'd like the email to be a link to mailto:info#domain.tld.
I tried to use a map (usemap="#mail" on body and then map name="mail">) but it doesn't work. I tried also with a blank transparent png image (to set the usemap to) but the link isn't clickable.
How can I achieve the area of the email to have a link upon it? Of course it should work on different resolutions.
Why don't you just render the email link as text? It looks like it can be similar to Open Sans: http://www.google.com/webfonts/specimen/Open+Sans
You could do something like this:
ADD CSS:
div#mail {
margin-left: 67%;
margin-top: 31.8%;
overflow: hidden;
width: 16%;
}
a {
color: transparent;
}
ADD HTML:
<div id="mail">info#gioiellidisapone.it</div>
Demo: http://jsfiddle.net/fXats/
It's not perfect, but maybe it's good enough. :)
This is how I modified your page directly using Inspect element, and the link stays on top of the image text. This is another option, but has fixed width and height to support the positioning of the email.
<body>
<div style="
width: 1430px;
position: absolute;
border: 1px solid #000;
height: 700px;
background-image: url(home2.jpg);
background-repeat: no-repeat;
background-position: top center;
display: inline-block;
"><a href="#" style="
position: relative;
top: 450px;
right: 294px;
display: inline-block;
float: right;
">Info#gioiellidisapone.it</a>
</div>
</body>
Here is a toughie.
JSfiddle
I have a link that opens up a video player(see below). The isotope hydrology image is the links image, and the play button image is within a span as a background image.
I am using a css sprite so that when someone hovers over any part of the image, the play image will change to what is below.
This works fine in all browsers except IE. In IE9, when I hover over the the isotope hydrology image it changes color and is clickable(like the image above). But when I hover over the actual play button, it switches from the blue "active" play button(above) to the grey "inactive" play button (top image) and it is not clickable.
I created the images below to illustrate what is happening:
This is when you hover over the isotope hydrology image (which is what i want to happen)
Once I hover over the play button (which is a span background image), this is what it looks like.(the cursor becomes a text cursor and the css sprite changes back to the non-hover color)
any help with this would be awesome.
Here is the html:
<div id="news-video" class="news-tab">
<div id="video-box-left">
<div class="video-img">
<span class="video-play-q-left">play</span><img src="resources-na/images/video-amano-scientific-forum.PNG" alt="Isotope Hydrology - The Fingerprints of Water" width="200" height="155" border="1">
</div>
<div class="video-text">
<p><strong>Food for the Future - Meeting Challenges with Nuclear Applications - Statement to 2012 Scientific Forum</strong></p>
</div>
</div>
<div id="video-box-right">
<div class="video-img">
<img src="resources-na/images/video-isotope-hydrology.jpg" alt="Isotope Hydrology - The Fingerprints of Water" width="200" height="155" border="1"><span class="video-play-q-right">play</span>
</div>
<div class="video-text">
<p><strong>Isotope Hydrology - The Fingerprints of Water</strong></p>
</div>
</div>
Here is the css:
#news-video {
color: #8A8A8A;
font-size: 1.1em;
line-height: 1.6667;
padding-left: 0px;
}
#video-box-left{
margin-left: 10px;
margin-right: 20px;
float: left;
width: 210px;
}
#video-box-right{
margin-right: 10px;
float: left;
width: 210px;
}
.video-img {
background-color: #EEEEEE;
border: 1px solid #DDDDDD;
margin-bottom: 5px;
padding: 4px;
width: 200px;
height: 155px;
}
.video-text {
}
.video-play-q-left {
background: url("../images/video-play-q-big.png") no-repeat scroll 0 0 transparent;
background-position: center top;
height: 50px;
position: absolute;
text-indent: -9999em;
width: 50px;
left: 100px;
top: 127px;
}
.video-play-q-right {
background: url("../images/video-play-q-big.png") no-repeat scroll 0 0 transparent;
background-position: center top;
height: 50px;
position: absolute;
text-indent: -9999em;
width: 50px;
left: 321px;
top: 127px;
}
a:hover .video-play-q-right{
background-position: center bottom;
}
a:hover .video-play-q-left{
background-position: center bottom;
}
My DOCTYPE tag was forcing IE to go into "IE9 Compatibility View".
I changed the tag and it was fine.
Thanks for the help everyone.
So I have this page and if you look at the 4 buttons "Take a Test Drive" "Lease To Own Options" ext...They are not lining up with the bottom of the div in IE. In firefox it looks fine..here is the html
<div class="main-img-box">
<img alt="Retail POS Systems" src="/images/software/video_pos_software.png">
<div class="main-cont-software">
<span></span>
<span></span>
<span></span>
<span></span> </div>
</div>
Here is some of the relevant CSS
.main-img-box {
height: 398px;
position: relative;
width: 100%;
}
.main-cont-software {
bottom: 0;
color: #FFFFFF;
height: 76px;
left: 14px;
position: absolute;
width: 100%;
}
.video-testdrive {
background: url("../images/software/pos-sw-btn-video-testdrive.png") repeat scroll 0 0 transparent;
display: inline-block;
height: 57px;
margin-right: 9px;
width: 169px;
}
.video-lease {
background: url("../images/software/pos-sw-btn-video-lease.png") repeat scroll 0 0 transparent;
display: inline-block;
height: 57px;
margin-right: 9px;
width: 169px;
}
Any ideas on what i am missing
Also is there a good tool to test IE..i use firebug on firefox and it works great but I always have a tough time with IE ..any suggestions there as well
You need to add vertical-align: top ..again.
.main-cont-software a {
vertical-align: top;
}
More info:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
http://www.brunildo.org/test/inline-block.html
Also is there a good tool to test IE..i use firebug on firefox and it
works great but I always have a tough time with IE ..any suggestions
there as well
By far the best option is the built-in (to IE8+) Developer Tools (hit F12).
If you want to use them while testing in IE6/7, you must download it. Though for IE7, you can just use Compatibility Mode in IE8/9 to test.