This is my code :
HTML :
<div class="container">
<div class="myBox">My Text</div>
<a class="myLink" href="http://www.google.com"> </a>
</div>
CSS :
.container
{
position:relative;
width:200px;
height:200px;
}
.myBox
{
position:absolute;
top:0;
left:0;
z-index:90;
background-color:#ff0000;
width:200px;
height:200px;
}
.myLink
{
text-decoration:none;
display:block;
position:absolute;
width:50px;
height:50px;
top:0px;
left:0px;
z-index:100;
}
on IE7, the link over "My text" doesnt work as link. If, on myLink I put a background-color, it works as well.
Am I on drugs or it is a normal behaviour? And how can I fix this with a transparent background?
Try to add these lines to .myLink:
background-color:#ff0000;
filter: alpha(opacity=0);
EDIT
If there will be only an image in .myBox, .myLink will work as expected, if the image is added as a background image to .myBox.
Related
So I'm not going to apply code because it's just a super quick question that I hope doesn't have a complex answer. What I want to do is have one picture where when I put my mouse on top of it then a bigger version of that picture will appear to the right of the original small picture.
If anyone knows what elements I need to use for this that would help me get on the right track.
Thanks!
This is the relevant css
#picture {width:100px; height: 250px; background-color:#ffffff;}
#picture a.small, #picture a.small:visited { display:block; width:100px; height:100px; text-decoration:none; background:#ffffff; top:0; left:0; border:0;}
#picture a img {border:0;}
#picture a.small:hover {text-decoration:none; background-color:#000000; color:#000000;}
#picture a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#picture a.small:hover .large {display:block; position:absolute; top: 90px; left:150px; width:200px; height:200px; }
And this is the relevant html
<div id="picture">
<a class="small" href="#nogo" title="small image"><img src="images/jupiter-s.jpg" title="small image" />
<img class="large" src="images/jupiter-l.jpg" title="large image" /></a>
</div>
Let's look at the css and html that make the magnification happen.
#picture a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
You are telling any links within the picture div, with the .large class specified, that they are to display as nothing! Take a look at the code. 0 width, 0 height, 0 border!! Any links with the .large class specified won't be seen UNLESS it’s hovered over AND has the .small and .large classes specified because you have a separate rule for "hover .small .large" which is:
#picture a.small :hover .large {display:block; position:absolute; top:-65px; left:150px; width:200px; height:200px;}
This tells the element that instead of being 0 x 0 in size it's to be 200 x 200 and voila! You can see the picture! Clever isn’t it!
Magnify an image
As you will see from the html code above your anchor’s class is .small and your image class is .large. So if your link is hovered over then
#menu a.p1:hover .large {display:block; position:absolute; top:-65px; left:150px; width:300px; height:300px;
Data shared from: http://www.dreamweaverclub.com/dreamweaver-show-larger-image.php
You can use the adjacent selector +, which applies css to the element directly after.
.small-img:hover + .big-img{
display:block
}
.big-img{
display:none
}
The html would be:
<img class="small-img">
<img class="big-img">
My website is working well on other browser while on Internet explore it's images appear with black box outside it, and also contents are distorted.
Can any one suggest me any option to solve this compatibility issue.
www.natureconnect.in
Please open above website in different browser and IE to test the issue.
Banner logo css code
#maneWrap, #overflowFix{width:100%; height:100%; float:left; position:relative; left:0%;}
#overflowFix{overflow-x:hidden;}
#hearderWrap{ position:fixed; width:100%; height:100px; text-align:center; float:left; background:#448f00; top:0px; left:0px; z-index:1000;}
#logo{ margin:0 auto; margin-top:14px; cursor:pointer;}
#social-icon{ position:absolute; top:0px; right:0px; height:100%;}
#social-icon a{position:relative; float:left; display:block; padding:40px 40px; border:1px solid #448f00; border-left-color:#66d700; border-top:0px; border-bottom:0px;}
#slides{ width:100%; height:100%; float:left; clear:both;}
#slides img{ width:100%;}
#social-icon a span{position:absolute; width:100%; height:5px; left:0px; bottom:0px;}
#social-icon a:hover{ border-color:#66d700; background:#4fa302;}
#social-icon a:hover span{background:#66d700;}
#maneWrap{margin-top:100px;}
banner logo html code
<div id="logo"><img src="images/logo.jpg" /></div>
<div id="social-icon">
<img src="images/facebook.png" alt="Facebook" /><span></span>
<img src="images/twitter.png" alt="Twitter"/><span></span>
<img src="images/Pinterest.png" alt="Pinterest" /><span></span>
</div>
I believe it's a default border that Internet Explorer puts around an anchor tag.
<a> <img src="logo.png" /> </a>
Try something like this:
a img{
border: 0;
}
it removes all borders from images with anchor tags. Or this:
a .className{
border: 0;
}
To remove all borders from images with anchor tags and the class name className.
This question was also asked here on Stackoverflow
And here on Stackoverflow
You had given hyperlink to images, have you tried applied border:0px for the images?
Is there any way I can Name the clickable areas of an image? On mouse hover the name has to be highlighted.
http://www.fifa.com/worldcup/destination/index.html
If you visit the above mentioned link the names of the destinations gets highlighted.
How it is done in the link you provided is they set an image as the background of the div then used absolute positioning to place the click-able areas:
HTML
<div>
<span>Pepperoni!</span>
<span>Cheese!</span>
<span>Tomato!</span>
</div>
CSS
div{
background: url(http://www.lorempizza.com/200/200);
background-size:cover;
width:500px;
height:500px;
position:relative;
}
span{
display:block;
background:white;
border-radius:5px;
width:100px;
text-align:center;
padding:10px;
}
span:hover{
background:lightblue;
font-size:20pt;
}
span:nth-child(1){
position:absolute;
top:100px;
left:300px;
}
span:nth-child(2){
position:absolute;
top:300px;
left:100px;
}span:nth-child(3){
position:absolute;
top:400px;
left:300px;
}
JSFiddle Example
the goal is to make my linkIcon background change background images when I hover my mouse over it. It works completely fine in chrome, but in firefox and safari nothing changes when I hover my mouse over the linkIcon unless I have my mouse button down when my mouse moves on top of the div. I can't figure out what the difference is.
Html:
<div id="tab" >
<div id="swingDownButtonContainer">
<a href="javascript:slideLinks();" style="display:block; position:relative;">
<div id="linkIcon">
</div>
</a>
</div>
</div>
Css:
#tab {
z-index:-1;
background-color:#f0996f;
position:absolute;
left:-10px;
height:20%;
width:50px;
border-radius:10px;
top:40%;
}
#swingDownButtonContainer {
text-align:center;
}
#linkIcon {
z-index:2;
background-image:url('media/circles_noHover.png');
background-size:40px 57px;
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
width:40px;
height:60px;
position:absolute;
left:10px;
}
#linkIcon:hover {
background-image:url('media/circles_Hover.png');
}
You're probably finding your link has no height as it's contents are absolutely positioned. Can you change it to:
<div id="tab" >
<div id="swingDownButtonContainer">
<a id="linkIcon" href="javascript:slideLinks();">
</a>
</div>
</div>
CSS edit:
#swingDownButtonContainer {
text-align:center;
position: relative;
}
Alternatively give the link a height of 60px
I am trying to create a little growl like div for a site. It works great in Firefox, but not IE6 (haven't tried IE7, but I still need to support IE6).
In Firefox: Centered text with image floated to right side of div
In IE6: Centered text with image to the left of text.
I've tried switching the img and span tag order, but that causes a line break in FF between the two, and IE renders the image on the right of the text, but not docked to the right side of the div.
HTML
<div id="growl">
<img src="close.gif" class="action" title="hide" />
<span class="text">Grrrrrr.......</span>
</div>
In css:
#growl {
background-color:yellow;
text-align:center;
position:absolute;
top:0; left:0;
width:98%;
padding:10px 0;
margin-left:1%;
z-index:10;
border:1px solid #CCCCCC;
}
#growl > .text {
font-size:120%;
font-weight:bold;
}
#growl > .action {
float:right;
cursor:pointer;
}
The > selector does not work on IE 6.
Just get rid of it:
#growl .text {
font-size:120%;
font-weight:bold;
}
#growl .action {
float:right;
cursor:pointer;
}
The > css selectors are not supported by IE6, try just removing them.
No point in adding a class to each elements in the div when you only have one img and span. Do this instead for cleaner code.
<div id="growl">
<img src="close.gif" title="hide" />
<span>Grrrrrr.......</span>
</div>
-
#growl {
background-color:yellow;
text-align:center;
position:absolute;
top:0; left:0;
width:98%;
padding:10px 0;
margin-left:1%;
z-index:10;
border:1px solid #CCCCCC;
}
#growl span {
font-size:120%;
font-weight:bold;
}
#growl img {
float:right;
cursor:pointer;
}