Archdeacon Posted February 22, 2011 Share Posted February 22, 2011 After I click an Href to a new image the dotted border still remains. I have tried 'a {outline:none}' but does not seem to work.I am just a beginner at CSS so please forgive my ignorance (Javascript is no problem). The page has 2 '<a HREF>' elements. Link to comment Share on other sites More sharing options...
birbal Posted February 22, 2011 Share Posted February 22, 2011 border-style:none; Link to comment Share on other sites More sharing options...
Archdeacon Posted February 22, 2011 Author Share Posted February 22, 2011 Sorry, but that does not work either! It's still there every time. Link to comment Share on other sites More sharing options...
kshawkeye Posted February 22, 2011 Share Posted February 22, 2011 outline:none; text-decoration:none; Link to comment Share on other sites More sharing options...
Ingolme Posted February 22, 2011 Share Posted February 22, 2011 The outline: none should be applied to the a:active selector. Link to comment Share on other sites More sharing options...
Archdeacon Posted February 25, 2011 Author Share Posted February 25, 2011 Not working I am afraid. Still it persists with all these attempts! Link to comment Share on other sites More sharing options...
dsonesuk Posted February 25, 2011 Share Posted February 25, 2011 a {outline:none;} should work in all cases whether a:hover, a:visited or a:active etc, only if you change the outline within one of these states will it revert to the styling assigned to this specific state.make sure the style tag and type are correct, clear browser history/Private Data and refresh page<style type="text/css">a {outline:none;}</style> Link to comment Share on other sites More sharing options...
cousineaug Posted February 25, 2011 Share Posted February 25, 2011 Not working I am afraid. Still it persists with all these attempts!ok so post the codeif it is lengthy, just post the HTML around the image and related styles Link to comment Share on other sites More sharing options...
Archdeacon Posted February 26, 2011 Author Share Posted February 26, 2011 We are getting somewhere: it is working now for Firefox! Link to comment Share on other sites More sharing options...
Synook Posted February 26, 2011 Share Posted February 26, 2011 If you've been testing in IE6 (and 7, maybe) the outline thing won't work, as those versions of IE don't understand the outline property. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 26, 2011 Share Posted February 26, 2011 True!, ie6 and ie7 do not support css outline property, and IE8 only does so if doctype is used. In IE6/7 the outline appears when using keyboard to tab through links, input fields etc as it is an accessibility feature. Link to comment Share on other sites More sharing options...
Archdeacon Posted February 26, 2011 Author Share Posted February 26, 2011 Thank you all again. I am indeed running IE7 on XP(sp3), but also have Windows 7 installed as a VM here and that has IE8 so I will crank it up and give it a test. Link to comment Share on other sites More sharing options...
george Posted February 27, 2011 Share Posted February 27, 2011 It is a focus issue. If you have a javascript function called by your href, then in that JavaScript change focus to a nutral place on you page. I tried the blur method, but that did not work. Refocus to another area. That worked for me accross the browsers. Link to comment Share on other sites More sharing options...
Archdeacon Posted March 3, 2011 Author Share Posted March 3, 2011 Sounds good - but I am just a beginner to JS so how would I go about that please? By the way, IE8 on Windows 7 works (ie no dotted border). Link to comment Share on other sites More sharing options...
Synook Posted March 3, 2011 Share Posted March 3, 2011 Basically: window.onload = function() { // bind a function to the window load event anchors = document.getElementsByTagName("a"); // get all anchors for (x in anchors) { // loop through them if (anchors[x].getElementsByTagName("img").length) { // if there is an image anchors[x].onfocus = function() { // bind a function to the focus event... this.blur(); // blurring it again } } }} Note that this is bad for accessibility, though, as users will not be able to select the anchor using devices other than the mouse, e.g., keyboards. Link to comment Share on other sites More sharing options...
Archdeacon Posted March 4, 2011 Author Share Posted March 4, 2011 Many thanks for that, Sir. I can filter the <a> tags to the only 2 I need so that the outlines will still show on the others. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.