I have embeded images as link in href tag, but the images are not working as link in ie7 although the same page is working fine in firefox and ie8. Can anyone help me out of it?
Here is the code
<a href="example.com">
<div class="banner_box_1">
<img src="images/facilities.jpg" width="156" height="70" alt="facilities" />
</div>
</a>
The css applied on image div
.banner_box_1{
width:156px;
height:70px;
float:left;
margin:5px 13px;
}
I think the problem is bcoz of css which is messing up in ie7
Images converted to base64 do not work in ie7, it's an ie7 bug :(
http://dean.edwards.name/weblog/2005/06/base64-ie/
Edit:
Can you even use <div> inside anchor ?
Related
I have to use an inline-block span as that is the only way that I can format text for an older version of Telerik RadTreeView.Net2 and I need to use an iframe as there is quite a bit of underlying logic and formatting in my subpage snippet. I cannot get the scrolling to work no matter what I seem to do. I have tried all variations on overflow combinations for both parent SPAN and child iframe. I am not sure if there is another path to take but any suggestions would be appreciated. In the html below I only have control over the SPAN and the iframe and not the parent div, corresponding img or the span where class="TreeNode".
<div id="cRadTree_t1_t0"><img src="javascript:false" alt="" style="display:none;" class="4" /><img src="javascript:false" id="cRadTree_t1_t0c" alt="" style="display:none;cursor:pointer;" class="2" />
<span class="TreeNode">
<SPAN style="display:inline-block;
text-align:center;
vertical-align:middle;
width:400px;height:100px;
padding:0px;
border:0px;
overflow-y:scroll"
>
<iframe style="height:100px;width:100%;padding:0px;overflow-y:hidden;"
src="../../Folder/Page.aspx?Ref=00000000-0000-0000-0000-000000000000">
</iframe>
</SPAN>
</span></div>
Here is an HTML code to reproduce the problem:
<!DOCTYPE html>
<html>
<body>
<div style="width:800px; margin:0 auto;">
<img src="logo.gif" width="100" height="40" />
</div>
</body>
</html>
When it is rendered in a desktop browser, the height of the only <div> becomes 45 pixels but not 40 as I expect (tested this in IE11 and Opera Next v20). logo.gif is 100x40, and the situation remains the same even if I apply zero border through CSS to the <img> tag (border, border-width, etc).
Why does it happen and how to fix it?
I believe it is not a bug as it is rendered the same way in all major browsers. The problem is fixed if we set just the display:block style. Without this, the image is rendered as an inline element, and its bottom border is aligned to the so called text baseline.
Let's change our code to demonstrate this:
<!DOCTYPE html>
<html>
<body style="background-color: #FFFF99;">
<div style="width:800px; margin:0 auto; background-color: #00CCFF;">
<img src="logo.gif" width="100" height="40" style="border: 3px solid black;" />
Some text yyy qqq
</div>
</body>
</html>
The result is the following:
As you can see, the extra space is needed to render the text without clipping!
I found a confirmation of that in the well-known book by Eric Meyer CSS: The Definitive Guide - in the section dedicated to alignment, when it describes the {vertical-align: baseline} attribute for the <img> tag. Here is the corresponding excerpt:
This alignment rule is important because it causes some web browsers always to put a replaced element's bottom edge on the baseline, even if there is no other text in the line. For example, let's say you have an image in a table cell all by itself. The image may actually be on a baseline, but in some browsers, the space below the baseline causes a gap to appear beneath the image. Other browsers will "shrink-wrap" the image with the table cell and no gap will appear. The gap behavior is correct, according to the CSS Working Group, despite its lack of appeal to most authors.
Same issue in FireFox and IE and Chrome.
You can fix this with a hack and add a Height:40px; to your div (I had to use an image to with the same width/height as your logo so don't be surprised that I have a different picture)
<div style="width:800px; margin:0 auto;border:solid;height:40px;">
<img src="http://a2.mzstatic.com/us/r30/Video/16/96/5f/mzi.rxlappss.100x100-75.jpg" width="100" height="40" />
</div>
Or, add some CSS to your image tag and keep the original code as is (will affect all images which may not be desirable)
img {padding:none;margin:none;display:block;}
http://jsfiddle.net/h6wrA/
Or, you can do this for only certain images with http://jsfiddle.net/h6wrA/2/
The only way I found to fix this problem correctly without height hacks, etc. is to set the container to line-height:0; (see demo example below).
.image { background:red; }
.image-fix { line-height:0; }
Image without Fix:
<div class="image">
<img src="http://via.placeholder.com/100x100" alt="">
</div>
<br>
Image with Fix:
<div class="image image-fix">
<img src="http://via.placeholder.com/100x100" alt="">
</div>
This is not a issue , you just need to write a correct CSS. Try
height:40px;display:block; for div tag and keep margin:0,padding:0
Thats all...
I have three icons (links with images inside) on my website that I want to link to my GitHub, Linked In and email accounts. It works fine on Chrome but for some reason Safari adds a bunch of styles to the Linked In icon that make it hidden.
Here's the code for the three links (the links have been changed):
<a href="http://github" target="_blank">
<img src="img/github.png" alt="GitHub">
</a>
<a href="http://linked in" target="_blank">
<img src="img/linkedin.png" alt="LinkedIn">
</a>
<a href="mailto:me#mail.com">
<img src="img/email.png" alt="E-mail">
</a>
This is the styling for the links (I'm using SASS so the styles are nested):
a {
position:relative;
padding-right:25px;
padding-left:25px;
img {
width:64px;
height:64px;
}
}
In Chrome, this works exactly the way I want it to, when I inspect the page, this is what it shows:
But for some reason, in Safari, the Linked In icon is hidden, and the inspector shows this:
The inspector shows this for the Linked In image:
<img src="img/linkedin.png" alt="LinkedIn" style="display: none !important; visibility: hidden !important; opacity: 0 !important; background-position: 0px 0px;" width="0" height="0">
Any thoughts on why Safari is doing this, and how I could fix it would be appreciated, thanks!
Doh! I had AdBlock installed on Safari, and that was blocking the image. Disabled AdBlock and it works just fine.
Why won't three elements on the same line get vertically aligned at the same height when using floats?
It appears this is browser specific: the layout is broken in Gecko (Firefox), the right elements is placed on a separate line, whilst the layout is fine in Chromium.
HTML markup:
<div>
<p>
<a class="left" href="left">left</a>
<a class="center" href="center">center</a>
<a class="right" href="right">right</a>
</p>
</div>
CSS styles:
div{width: 100%;margin: 20px 0; }
div p{width: 100%; white-space: nowrap; text-align: center;border: 1px solid blue;}
a.left{float: left;}
a.center{}
a.right{float: right;}
This is the layout result in FireFox:
For convenience: take a look at this fiddler.
I know I have seen this problem before, but I just pull my hair and cannot find a solution for this!
Ok, it appears that there is a very simple workaround that actually "just works" for me. I post it as a question since I did not receive any (usable) answer for such a basic question.
The layout is fine in Gecko (Firefox) when the right element is placed before the center element in the html markup:
<div>
<p>
<a class="left" href="left">left</a>
<a class="right" href="right">right</a>
<a class="center" href="center">center</a>
</p>
</div>
I have no idea why this logic applies, but I am convinced that the Mozilla people will have perfect reasons why this behaviour is just right...
I have got this div..:
<div id="logoCover" style="position: absolute;width: 341px;height: 100px;z-index: 9999;top: 0px;left: 0px;"></div>
The problem with the div, is that, it would only show in ie8, if i give it a background color.
Otherwise the div wont exist, which means the user cant click on it.. why is that behavior common in ie8 and how do I prevent it
UPDATE:
This is the element on which I try to place my div:
#logo {
float: left;
height: 93px;
}
logo is an image
FULL HTML:
<div id="logo" style="position:relaive;">
<a href="/" style="position: absolute;padding:60px;padding-right: 300px;z-index: 9999;top:-20px;left: 0px;;display:block;" ></a>
<img src="images/BestCam_logo.png" width="1009px" />
</div>
<div> tags are not supported as content for <a> tags inside of standard HTML. Some browsers try to acommodate for this, but you really can't depend on every browser implementation to handle it the same way.
However, you can make an <a> tag a block element (it is an inline element by default) and move the style from the <div> tag to the <a> tag. This would also eliminate the need for the inner <div> tag in your example.
try adding display:block or insert a ' '
also, check that your relative div is also rendering right.
hope that helps.
<div id="logo" style="position:relaive;">
<a href="/" style="position: absolute;padding:60px;padding-right: 300px;z-index: 9999;top:-20px;left: 0px;;display:block;background-image: url('images/emptyImage.png')" ></a>
<img src="images/BestCam_logo.png" width="1009px" />
</div>
Solved the problem, What I had to do is to use a transparent image, as a background.