Remove Blue border in IE 10 Compatibility View - html

How can I remove or just don't display the border links in every anchor with image? By the way, browser settings is in compatibility mode. Answers from other question doesn't suffice to solve my problem. I guess because it only applies with lower version of IE.
EDIT:
I'm currently creating a Custom share buttons where my client requires me.
<div>
<a onClick="window.open('https://twitter.com/intent/tweet?original_referer=#shareLink#&text=#shareTitle#&tw_p=tweetbutton&url=#shareLink#','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">
<img height="20" src="/images/chicklets/Twitter_Tweet.png" />
</a>
</div>
<div>
<a onClick="window.open('http://www.facebook.com/sharer.php?s=100&p[title]=#shareTitle#&p[summary]=#shareDesc#&p[url]=#shareLink#&p[images][0]=images/Telos.jpg','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">
<img height="20" src="/images/chicklets/FaceBook_Share.png">
</a>
</div>
<div>
<a onClick="window.open('http://www.linkedin.com/shareArticle?mini=true&url=#shareLink#&title=#shareTitle#&summary=#shareDesc#','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">
<img height="20" src="/images/chicklets/LinkedIn_Share.png">
</a>
</div>
<div>
<a onClick="window.open('https://plus.google.com/share?url=#shareLink#','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">
<img height="20" src="/images/chicklets/Google_PlusOne.png">
</a>
</div>
CSS:
a {
outline : none;
text-decoration: none;
}
a img {
outline : none;
}
img {
border : 0;
border-style: none;
}
div {
float: left;
padding-right: 10px;
}
Here's what it looks like with IE10:

how about this, try to add something like this
<img src="blah" style="border-style:none;">

I usually use this as part of my normal defaulting set up in my CSS:
img {border: none;}
This doesn't effect the other browsers negatively and is easy to over-ride at a later point if you place this near the top of you general css file e.g
img {border: none;}
img.some-class {border: 1px double blue}
Where the increased specificity will add an ugly border to your image just like IE loves doing.

I was having the exact same issue with IE10. I've just set up a CSS rule for the a tag and set the text colour to white. This removes the blue line from around an anchor image.

Related

html, displaying a link as normal text

I was wondering if you could display a link as normal text.
<a id="" href="" target="_parent"><img src="" width="121" height="20" alt="">
<div style="position:absolute;left:163px;top:1px;font-size: 12px; display: block">
<font color="white">Log in</font></a>
I'm trying to overlap an image that is also a button, with the text "Log in", it works as it is with the code above, but I was wondering if I can change the "log in" which displays as blue and underlined to appear as normal text.
In css:
a {
color: inherit;
text-decoration: inherit;
}
These values can also be stuck in your anchor tag's style attribute.
Should result in your anchor tags looking the same as the text color and decoration of the parent(s).
If you have a look at Cascading Style Sheets (CSS) you can change the colour and the text style of the link.
In your example, you could use
<a id="" href="" target="_parent" style="color: white; text-decoration: none;"><img src="" width="121" height="20" alt="">
<div style="position:absolute; sleft:163px;top:1px;font-size: 12px; display: block">
<font color="white">Log in</font>
</div>
</a>
However I would learn how to use external stylesheets and link them to your HTML through the <link> tag in the <head> of your html. You can then style up individual tags through the tag name, an id or a css class. So an updated example would be:
<link rel="stylesheet" href="link-to-your-css-file" />
in your css file have
a.imgLink{
color: white; text-decoration: none;
}
div.imgLink{
position: absolute; left: 163px; top: 1px; font-size: 12px; display: block;
}
Then your html would be
<a class="imgLink" id="" href="" target="_parent">
<img src="" width="121" height="20" alt="">
<div class="imgLink">
Log In
</div>
</a>
Not only does it make your HTML "dry" but it gives you greater control over the styles of your html by only changing the css file.
If you don't want the link to be underlined,
set " text-decoration:none"
use this code in your html file
<style>
a {
text-decoration: none;
color: #000; /* or whatever colour your text is */
}
</style>
Short answer: yes.
Longer answer:
Yes, here is a fiddle, but you probably don't want to hide links from your user.
stslavik makes a good point with "text-decoration: inherit". Here is another fiddle. On my browser the "blam" and "stslavic" both show with strike-through, but I'd go with the "inherit" versus the "none"; just seems better to me.
(P.S not advertising this and no spam. Click on 'Hate AI' to reach my project)
You can do this =>
<h1><a style="text-decoration: none; color: inherit;" href="https://obnoxiousnerd.github.io/hate-ai">Hate AI</a></h1>
<p>A personal assistant that hates you but still helps you.</p>
The logic here was adding a style to the a tag which contains the following:-
text-decoration: none;
color: inherit;
text-decoration for removing the underline under the text.
color: inherit for removing the usual purple color of links.
Sure - just adjust the CSS for 'a' elements on the page.
Just a simple snippit to show some size/coloring possibilities, to make your link fit thematically when the rest of your text a bit better.
Wow, Look at this website! It's called Website! It's a shame that this link looks horrible, though!
<h2><a style="color: #A52A2A;; text-decoration: none;" href="https://www.website.com/">Oh, boy! You can now click here to visit Website's website without the link looking bad!</a></h2>
<h2><a style="color: #A52A2A;; text-decoration: none;" href="https://www.bing.com/">Uh oh, the Website website is broken! Visit the pinnacle of innovation, Bing, instead!</a></h2>

Image and text inside of <a> tag

This is the html asp.net generated (with some client-identifying details removed)
In Windows XP / IE 7 clicking on the image does nothing. Click on the text executes the hyperlink. Right-clicking anywhere and then selecting open in new window or open also works.
In other browsers, it all works as expected.
Is there anything simple anyone can see that I could do to this to get it to work correctly in IE7?
<div id="hdrXXX">
<a id="ctl00_XXX" title="XXX" class="hdrXXX" href="http://google.com" target="_blank">
<div style="float:left;display: block;">
<img id="ctl00_XXX" src="Images/XXX.png" style="border-width:0px;" />
</div>
<div style="float:left; display: block; padding:15px 0 0 0;">
<span id="XXX">Some text right here</span>
</div>
</a>
</div>
You can only put block-level elements inside anchor elements with HTML5 and browser support is still a bit iffy on it. IE7 obviously does not support this.
You don't need to use division to do this:
<div id="hdrXXX">
<a id="ctl00_XXX" title="XXX" class="hdrXXX" href="http://google.com" target="_blank">
<img id="ctl00_XXX" src="Images/XXX.png" style="border: 0; float: left; margin-right: 15px" />
<span id="XXX">Some text right here</span>
</a>
</div>
This should work to the same effect...
Try removing the divs, as the img tag and span are naturally display-inline. Add display block, float left if you need margins right to the tags themselves as supposed to adding divs. Also, to the anchor tag, add overflow:hidden (if you use floats), so that it takes up the total space of the two child elements.
Because of your floats, the anchor collapses. Also, you can't put block level elements <div/> inside inline elements <a/>.
Keeping with the non-W3C code you've got there, you'd need to clear your floats with this code right before the closing </a>
<div style="clear: both"></div>
You'll want to probably create a class called .clear and move the styles to that. Here's an example from my site:
.clear-fix {
clear: both !important;
display: block !important;
font-size: 0 !important;
line-height: 0 !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
A better way to do your code which is W3C compliant is the following:
<div id="hdrXXX">
<a id="ctl00_XXX" title="XXX" class="hdrXXX" href="http://google.com" target="_blank">
<span style="float:left;display: block;">
<img id="ctl00_XXX" src="Images/XXX.png" style="border-width:0px;" />
</span>
<span style="float:left; display: block; padding:15px 0 0 0;">
<span id="XXX">Some text right here</span>
</span>
<span class="clear-fix"></span>
</a>
</div>

Li display inline within a div that has max width

<div class="actions-wrapper">
<ul>
<li>
<a class="" href="#answer-form">
<img src="images/icons/answer.gif" class="answer-icon icon"/>
</a>
<a class="" href="">
Action1
</a>
</li>
<li>
<a class="" href="">
<img src="images/icons/answer.gif" class="answer-icon icon"/>
</a>
<a class="" href="">
Action2
</a>
</li>
</ul>
</div>
Hello, I have the previous code.
My div has a max size, and i want to display the li inline, but at the end of the line, i dont want the containing the icon to be separated from its text within the same li.
In my css i have the following :
.actions-wrapper ul { line-height: 25px;padding: 0; margin:0; list-style-position: outside; list-style-type: none;display: block; }
.actions-wrapper ul li { display:inline; margin-right: 12px;padding:3px 0;}
I have tried to put : white-space: nowrap; to the li, but it doesnt work in IE.
Here's a jsfiddle of my code : http://jsfiddle.net/wSTQy/1/
In this example the "Another action" is not on the same line of its icon.
If i add the white-space : nowrap; it wont work anymore in IE6
does adding the text-alignment to the ul achieve what you want?
.actions-wrapper ul {
text-align: right;
}
Updated after new information
changing the display of the li to inline-block instead of inline (needs a hack for IE7 and below) seems to work, even without the white-space: nowrap;
Updated fiddle (with hack included) : here
By looking at your markup, seems you want the icon and the text to make the same action.
Why not use css to add the icon next to the text, like so:
<li>
<a href="#answer-form" id="icon-label">
Action1
</a>
</li>
With the CSS:
#icon-label {
background: transparent url(path/to/image) no-repeat x y;
}
You can do this by removing all the whitespace from between the anchors, and separating them with a .
I think the easiest solution would be to change display:inline to float:left. That way the icons and the text never get separated.

How to make <a> wrap around a small image with out padding?

I have the following:
<a href="#" style="border:solid 1px gray; line-height: 5px;">
<img src="x.gif" style="border:solid 0px gray;">
</a>
Lets say x.gif's dimensions are 5x5 px. How can i make the hyperlink wrap tightly around x.gif? Right now the width is right but there seems to be padding on top and bottom of x.gif.
Try something like this:
<a href="#" style="border:solid 1px gray; display: inline-block;">
<img src="x.gif" style="display: block;">
</a>
If you need to support IE7 then you'll probably have to replace the inline-block with block in an IE7-specific stylesheet.
Try adding margin:0; padding:0; to your image.
This is MSIE specific behaviour. It's sensitive to whitespace around the <img> tag as well.
To fix it, you could just remove any whitespace around it:
<img src="x.gif" style="border: 0;" width="5" height="5">
Note that giving a zero-wide border a color and style doesn't make sense, so I removed it from the image's style as well.
This worked for me across the latest browsers I tested on including IE9
<a href="#" style="font-size:0;text-decoration:none;">
<img src="x.png" style="border:1px red solid;">
</a>
However while it looked pretty close in IE6/7 they produced a weird artefact on the bottom let corner of the border. I had to mimic the look in IE6/7 by cheating the border with background-color and padding. I also had to give the A element "layout" using zoom:1 to get it to behave (and loose some extra padding).
<a href="#" style="font-size:0;text-decoration:none;background-color:red;padding:1px;zoom:1;">
<img src="x.png" style="border:none">
</a>
Annoyingly this didn't work with the "Standards" browsers so you'd have to use conditional comments and target low versions of IE with their own styles if you can't live with the artefact.

Link problem on IE6 and IE7

I'm having a hard time with IE6 lately on a particular problem, here's the bit of html I'm on :
<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;">
<span style="display:block;width:100px;height:100px;">
<img src="img.jpg" alt="My image" />
</span>
</a>
Everything is fine with Firefox etc, but the link won't work by clicking directly on the image on IE6 (but will do work anywhere else on the link).
Here is a link:
http://www.daniel-rico.com/demos/ie/
Someone has an idea?
Thanks!
edit: This does not work on IE7 either :/
Thanks for your answers!
I do need the span tag. I should have explained a little more what I was trying to do; here it is:
I need a box clickable. Inside of it I need:
another box with a fixed size which will contain a dynamic image (random ratio)
some text
i just tried it on:
<span style="display:block;width:100px;height:100px;">
<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;">
<img src="img.jpg" alt="Click your image now" />
</a>
</span>
Remove the span tag, I don't think you need it
<div style="width: 200px; height: 200px;">
<a href="http://www.mylink.com" style="display: block; width: 100px; height: 100px;">
<img src="img.jpg" alt="My image"/>
</a>
</div>
If you have control over the markup then extract the inline styles and use
<div id="link">
<a href="http://www.mylink.com">
<img src="img.jpg" alt="My image"/>
</a>
</div>
In the head of the document add a reference to an external stylesheet
<head>
<link rel="stylesheet" type"text/css" href="/Css/Style.css"/>
</head>
Create style.css and add
div#link
{
width: 200px;
height: 200px;
}
div#link a
{
display: block;
width: 100px;
height: 100px;
}
If you are using this style of link in multiple places remove the id on the div and replace with
<div class="link">
...
</div>
And change the selector in the css from # to .
div.link
...
If you are having problems only in IE6 you can also use conditional comments to include a stylesheet that fixes IE6 specific problems
<head>
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/Css/IE6.css"/>
<![endif]-->
</head>
Oddly enough, removing the width and height properties from the span allows you to click on the image.
<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;">
<span style="display:block;">
<img src="img.jpg" alt="My image" />
</span>
</a>
Of course this completely changes the layout but it might help solve the IE bug.
An alternate method would be to use a div with a background-image instead of an img element:
<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;">
<span style="display:block;width:100px;height:100px;">
<div style="background-image:url(img.jpg);width:100px;height:100px;" title="My Image"><div>
</span>
</a>
Edit:
The background-image solution doesn't work for random ratio image you mentioned in your comment.
If you just want to achieve the layout in the mockup:
<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;padding-left:10px;">
<img src="img.jpg" alt="My image" />
<span style="padding-left:10px;">some text</span>
</a>
I was facing almost an identical problem building a nav in a content-managed site, but compounded by the fact that some of the nav items needed to open in new windows - meaning the solution to use javascript became problematic.
Eventually, I ended up losing the <img... /> tag and replacing with a <span... /> and setting the background image inside the span (I could have used div's but that's bad form according to the W3C).
So referring back to your original example, I'd go with:
<a href="http://www.mylink.com" style="display:block;width:200px;height:200px;">
<span style="display:block;width:100px;height:100px;">
<span style="background-image=url(/img.jpg); width: 50px; height: 50px; display: block;">
<span class="Hidden">My image</span>
</span>
</span>
</a>
The easiest way to make that area clickable is to add position: relative to your link style; to preserve the cursor style under IE6, you can add cursor: hand to your span element.
a{ position: relative; display: block; width: 200px; height: 200px; }
span{ display: block; width: 100px; height: 100px; cursor: hand }
As other suggested, it is better to separate the IE6 specific styling with a conditional comment block.
Hope it helps and good luck ;)
Try to apply to span css property "zoom:0;". It works in my case.
I wasn't able to solve this with CSS only, I used Javascript to force the area to be clickable.
Disappointing, but well, it works...
Thanks everyone for your help ! I appreciate it :)