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?
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">
In my last question I asked how could I add text onto the gray area of the picture, some guys suggested using <span>, I ended up with all the text (because it is a span after all, inline) on top of each other in a single line (left picture), even though it was set to display:block. How can I break it into seperate lines as seen in the picture on the right?
and does it make sense using h4/h5 for the styling or I should use different div's or something?
HTML:
<div class="rightCol1">
<img src="pic1.png"><span><h4>2014 02 16</h4><h5>po pirmojo etapo <br> naudingiausi - osvaldas <br> sarpalius ir lukas šukutis</h5></span>
<img src="pic2.png"><span><h4>2014 02 16</h4><h5>geriausias sezono <br> startas per visą klubo <br> istoriją </h5></span>
</div>
CSS:
.rightCol1{
float:right;
margin-right:150px;
margin-top:10px;
}
.rightCol1 a {
background:green;
display: block;
position:relative;
height:200px;
width:100px;
margin-bottom: 160px
}
.rightCol1 a span {
line-height:0px;
display:block;
margin-left:15px;
width:234px;
height:70px;
position:absolute;
bottom:-80;
left:0;
z-index:1;
}
h4{
padding:0;
margin:0;
font-style:;
color:#e6540c;
font-weight:bold;
font-size:14;
}
h5{
padding:0;
text-transform:uppercase;
color:rgb(193,193,193);
}
It's because your span has no line height, so each on the lines will come out ontop of each other. I suggest removing line-height from your span CSS:
.rightCol1 a span {
display:block;
margin-left:15px;
width:234px;
height:70px;
position:absolute;
bottom:-80px;
left:0;
z-index:1;
}
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
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.
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;
}