HTML - Dotted Border On Active Links In Ff2
Hi Guys,
If you use this page in firefox you get an active link, dotted border on the up/down arrows. Anyone know of a way to stop this happening with styles? Code: http://www.stompfrog.co.uk/rp/ I guess you could use a js function to take the focus off the link but would prefer a css solution if possible. Stomp Similar TutorialsPerhaps it's just me, but I recently noticed this and I'm curious as to how it works. I don't even know if this is the right forum for this though. Take a look at these two pictures and websites. http://www.slidedeck.com/examples/reddal http://www.friendgiftr.com/ If you notice in the picture and the actual website, the first example does not show a tiny dotted border around the link that you click. But on the second site, clicking on a link will have that link surrounded by the thin dotted border. At least that's how it is for me on the latest version of Firefox and Internet Explorer. Is this something browser based? Or what? Why the inconsistency? Hey. Does anyone know why sometimes, after clicking on a link on my site, a dotted line appears around the link??? It doesnt matter if its a jpg, text or image map link. It doesnt always do it, but sometimes it does and looks ****ty.... thx I have had this problem on almost all the websites I've made and I'm too picky to let it go... When I make the navigation images/buttons for a website, I set the border to zero as usual and link each image to its respective page. But, when I click on the image to take me where it's supposed to, this pesky dotted border appears around the edge of the image after it has been clicked and it remains there until I click on something else on that page. (This also happens to text links when clicked, but I'm not too worried about the text links.) For the websites I've made that go to an entirely new page after an image link is clicked, the dotted line appears around the linked image after it's clicked and before the next page has loaded, but then after the new page loads the dotted line is gone. But, for websites I have built that utilize frames, because the new page that loads is in an iframe, and because the page the navigation buttons are located on never changes, the dotted border stays around the image after its been clicked and, like I mentioned earlier, doesn't go away until I click on something else on that same page. An example of this can be seen when you click the images in the navigation column along the left side of a website I built located at the following URL: http://www.djprogress1.com/ This border problem could be specific to my website browser (I use Firefox), but I am not sure. And the border could be added entirely by the browser and there may be no way to get rid of it through coding, but again, I am not sure of this. So, does anyone know if anything can be done to fix this or am I stuck with these dotted borders? Thanks, Jase Ok its so easy & I dont know why its not working, but I want to make Models@PunkRockPrincess.com & Photographers@PunkRockPrincess.com both active links so that when you click them they open up as an email <p><h1 style="text-align: center;"><a href="http://www.myspace.com/punkrockprincess.com"><span style="color: ##00BFE1;">PunkRockPrincess.com on Myspace! </span></a></h1> <p style="text-align: center;"><span style="color: #cc99ff;"></span><img src="http://www.searchviews.com/wp-content/themes/clean-copy-full-3-column-1/images/myspace_logo.jpg" height="46" width="137" /></p> <h1 style="text-align: center;"><span style="color: #ffffff;">Models@PunkRockPrincess.com <br />Photographers@PunkRockPrincess.com</span></h1></p> So what do I change to this code? I'm trying to come up with a way to mimic a "tab fill" in html: Like this only the page numbers would be justified to the same line, and the . .. is "auto generated" to fill the empty space: 1. The First Line ................................... 25 2. Below The First ................................. 32 3. After That .......................................... 47 The "titles" would be in column 'a', and the numbers would be in column 'b' The space after the "titles" would be filled with ... I have come close using 'bottom border' but that puts the ... under the text as well. I tried using span and div, but that will either putt the ... on a new line below the text, or if i use 'display:inline;' it puts it on the same, but it no longer fills the empty space to the edge, and only displays the ... when there is text inside. I tried stretching it out with a clear image but it didn't work either. Also tried using a 'highlight' (background color) on the text to cover the bottom border but that didn't really work. (the closest i got was using this method with a background image of a dot. but that wasn't much better...) Any thoughts? Thanks. Hi, I'm trying to find a way to fill the empty space between a description and its relative letter for example: blablablalbalbalblablabla (***carry over to the second line because out of space) blabla----(white space)----a. (** the letter) the description is done by cold fusion query and the structure is in a table with the vertical align = bottom to ensure the letter match the last line of the description. now I need to make change to this so that the whitespace between the last line do the description and the letter is filled with dots like this: blablablalbalbalblablabla (***No dots on the line above the last line) blabla ............................ a. I've tried number of methos but none of them sync well with my situation, Any suggestion on how to do this will be greatly appreciated, Thanks in Advance!! Hi, I am using Dreamweaver CS3 to create a site, by default i have learnt that when you use an image as a link to another page, dreamweaver creates a coloured border around your linked image. I have since been able to get rid of this border by adding border="0" into my img tag however this now has caused my rollover not to work before clicking on the image to take you to the linked page. this is my code; any ideas how i can fix this? <td colspan="4"> <a href="About Us.html"><img src="images/About_Off.jpg" border="0" alt="About Us" name="Aboutus" width="120" height="64" id="Aboutus" onMouseOver="MM_swapImage('Image2','','images/About_On.jpg',1)" onMouseOut="MM_swapImgRestore()"></a></td> <td colspan="6"> Any help would be greatly appreciated. Hi everyone, I hope I have posted this in the right area. This is my first time posting here. I currently have my main pages listed at the top of my site as graphics (see fussybaby.ca). I would like to potentially remove these graphics and use text links instead - I had the graphics designed for me, so I can't just go in and make new ones, however I'd like to change/rearrange the links and add some new ones. So my question is: How hard is this to do? Is this something I need to hire someone to do for me? Thanks in advance for any advice! Hi there, I`ve been doing some programming in java and delphi, but now its time for me to try to learn some html/css, and later some php. Anyways, I`m making this test site, where the meny consists of 4 text elements, all containing a href: <a href="foto.html" target="myFrame" id="menu_items">foto</a>; I`m using an external .css file to controll the graphics of the site, and there I have edited the a:visited, hover, active... When I click on one of the menu items, the color changes, as when I hover too. But I would like the first element of my menu, home, to be active when the page loads. How can I do this? Hope you understand my question. Thanks in advance! EDIT: Ok, there has to be an easy answer to this one, so maybe I just didn't explain my problem good enough. =) When I enter the page for the first time (after writing the adress in the adressbar and clicking "GO"), the page loads, and shows the "home" section. My page contains the site-logo, menu, and an iframe which shows the pages (home, foto, contact, and so on) as html files included in the site. As a default, it loads with the home.html in the iframe, and therefor the text "home" in the menu wont change color to the active color, which I set in the external .css file. But when I click on either of the menu items now, after loading the page, it changes color and works fine. What I want, is to set the "home" text in the meny to the active color (or in the active state) when the page is loaded. Sorry for any bad english, doing my best. And again, thanks using IE7 this is fine but in IE6 not so much. we have a page where we have a javascript function which can sort columns when the user presses an html hyperlink. This is fine but in IE6, when you click on a link, it seems to also highlight the oher links as purple (visited) when this is not true. how can we stop it from doing this and what about "resetting" it back to the default blue color when the page is navigated to again? Thanks when I preview my website a active x bar shows up and another thing is that my pictures are not showing. What can I do? Hi there, When running a website from my Hard Drive or CD, the Active X message pops up, saying: "To help protect your security, Internet Explorer has restricted this file from showing active content that could access your computer. Click here for options..." I know that if you disable the Windows security, this message goes away. I would like this message to not pop up regardless of your security settings... much like the format /y command in the good ol' DOS days. Is there a command that will force the computer to accept the page without user intervention? Thanks in advance! I Hello. I am having a tough time fixing this problem I'm having. I am creating a site using web expression 2. So far, everything is working fine, except for a couple of browser issues regarding active x controls. When I open the site on firefox, which from what I've read, doesn't use active x controls, everything loads fine. But, when I open the site on IE, the latest IE8, contents of my site aren't displayed properly due to blocked active x controls. How and what can I change in my code so that people viewing my site in IE8 can see it normally? Here is the source code and css: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="en-us" http-equiv="Content-Language" /> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Facpros</title> <link rel="stylesheet" type =" text/css" href="1css.css"/> </head> <body> <script type =" text/javascript"> //code for showing/hiding div dropdown comming soon </script> <div class="head" > <div id="Navigation" style="left: 313px; top: 244px" > <ul class="nav" > <li class="notparent"><a href="location"><span>Home</span></a></li> <li class="notparent"><a href="location"><span>About Us</span></a></li> <li class="notparent"><a href="location"><span>Contact Us</span></a></li> <li class="notparent"><a href="location"><span>Leadership</span></a></li> <li class="notparent" ><a href="location"><span>Events</span></a></li> <li class="notparent"><a href="location"><span>Our Members</span></a></li> <li class="notparent"><a href="location"><span>Inquiry</span></a></li> <li class="parent"><a href="location"><span>Language</span></a></li> </ul> </div> </div> <div class ="body" > </div> <div class ="foot"> </div> </body> </html> Code: body{ background-color:gray; background-image:url('backgroundimg.png'); } p{ font-family:Copperplate33bc; } ul.nav{ font-family:Copperplate33bc; list-style:none; padding: 0; margin: 0; font-size:14px; height:29px; } div.head{ top:0px; background-color:maroon; height: 275px; width: 1000px; margin-left:auto; margin-right:auto; } div.body{ background-color:teal; height:600px; width: 1000px; margin-left:auto; margin-right:auto; } div.foot{ background-color:black; height:100px; width: 1000px; margin-left:auto; margin-right:auto; } li.notparent{ } li.parent{ } a:link{ text-decoration:none;color:black; } a:hover{ color:white; } #Navigation{ width:723px;;position:relative; } #Navigation li { float: left; display: block; text-decoration: none; text-align: center; padding-left:5px; padding-right:5px; width:auto; height:29px; line-height:3em; } Reference: http://test2.tarashryniw.com I have the following the css code: HTML Code: .tab-text a:link { text-decoration: none; color: #000; } .tab-text a:visited { text-decoration: none; color: #000; } .tab-text a:active { text-decoration: none; color: #adcce8; } .tab-text a:hover { text-decoration: none; color: #000; } This code is for the links in the tabbed menubar. a:active should be a bluish color, and it's my understanding that if you're on the page for which that link is then a:active should apply. Well go to a few different pages, the link colors don't change. Why? Css document this code is in is css/default.css. Thanks for the help! Hello! I have a horizontal bar with links, when you hover on one of the links, it changes colour and adds a tiny background image. That's perfect.- BUT I want this bgimage and the color to remain on the ACTIVE link, so that the user can know what page he/she is on. This si my code: <div class="bar"> <div id="filters"> <ul> <li><a class="" href="#all" rel="all">Alla</a></li> <li><a class="" href="#webdesign" rel="webdesign">Webdesign</a></li> <li><a class="" rel="print" href="#print">Print</a></li> </ul> </div><!-- .filters --> </div><!-- .bar --> CSS /* - Portfolio bar - */ .bar { height: 32px; background: url(http://blankest.com/theme/images/portfoliobar_bg.png) repeat-x 0 0; position: relative; padding: 2px 135px 2px 0; margin-bottom: 45px; } .bar a.hire { display: block; position: absolute; right: 0; top: -5px; height: 43px; width: 137px; background: url(http://blankest.com/theme/images/hire.png) no-repeat 0 0; } .bar a.hi hover { background-position: 0 -44px; } .bar li { display: block; float: left; margin-right: 2px; } .bar li a { display: block; padding: 0 23px; font-weight: bold; color: #545454; font-size: 13px; line-height: 28px; } .bar li a.active, .bar li a:hover { color: #ffffff; background: url(http://blankest.com/theme/images/bar_active_li.png) repeat-x 0 0; } Is there any way to embed windows media video into html without using active-x. This would be for a computer without administrative priveledges (unable to download active-x components) to view video through an html interface. I can only think of using a direct link to the file, which would require the player to be used externally. I think any embedded call up of the player will need to use embed or object tags, which need active-x (as far as I can tell, and my testing has shown) Any light shone on this black math would be greatly appreciated-- Thanks, Tim Hi all, Im building a mock-up website for a project im working on. Since the first version was built in PPT, i dont wanna build it from scratch - so the entire website is built from image maps. The problem im having is the need to add activeX controls to some of the pages. i.e., my page (reminder - just a big photo mapped) has a right-side menu, a left-side menu and the middle of the page (square shaped) is a form with radio buttons, drop down lists, checkboxes and a submit button. as far as i understand, its impossible to add such elements to an image map. so i was thinking about writing the form section in a separate HTML file, and "call" it from the original page (the map). I just have no idea how to do that. Can i define coordinates in which that image part will be replaced with another HTML file? Thanks for any ideas/help!! Hi there, Not sure if this is HTML or CSS - I've got a <ul> menu that I've set up and it's changing nicely in colour when you mouseover (using a:hover etc.) I've seen a few menus though where if you click on home, it loads home and that option stays a different colour to show you what page you're currently on.. any ideas? Not too sure this is in the right forum part but as the title says, I have an activex powered video stream which I would like to be able to change the size of. I can change the size of the video by changing the values of the Height and Width in this code: <object classid="clsid:6F5A0B29-5C26-49A1-9462-4C9910F085F3" codebase="http://192.168.0.100/ICLAXPlayer.cab" width="720" height="576" align="absmiddle" id="ICLPlayer" events="True"> but that is in the code and not very accessible from the front end. So I thought about putting in a drop down menu which is shown he <form id="form1" name="form1" method="post" action=""> Zoom <select name="Zoom" id="Zoom"> <option value="1">50%</option> <option value="2">75%</option> <option value="3" selected="100%">100%</option> <option value="4">125%</option> <option value="5">150%</option> <option value="6">175%</option> <option value="7">200%</option> </select> </form> So my question is this: Firstly, how can I relate for example.. 50% to 720 x 576 and then when I have that value, how can I put it in the Width and height boxes so that the video is the correct size? Thanks in advance Hi all, If you go to http://kvc.dk/CTC7/index.htm Press "ctc-info" in the top menu you goes to a page with an iframe and links on top. When you press these links i want the current link to stay active until you press on another link. I have tried this: http://forums.htmlhelp.com/index.php...ndpost&p=38645 But i cant get it to work. Heres the code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/> <title>CTC</title> <link rel="stylesheet" type="text/css" href="../stylesheet.css"/> </head> <body> <table border="0" width="950" cellspacing="0" cellpadding="0" height="500"> <tr> <td align="right" bgcolor="#000000" valign="top" style="padding-right: 10px; padding-top: 70px" background="../images/Frontimages/ombygning.jpg"> <table border="0" width="500" cellspacing="0" cellpadding="0" > <tr> <td style="border: 2px solid #FFFFFF"> <table border="0" width="100%" cellspacing="0" cellpadding="0" background="../images/hvidbg.png" > <tr> <td style="padding-left:5px; padding-right:5px; padding-top:5px; padding-bottom:14px"> <a target="menu" href="Text/CTCinfo/omctc.htm">Om CTC</a> | <a target="menu" href="Text/CTCinfo/ansatte.htm">Ansatte</a> | <a target="menu" href="Text/CTCinfo/samarbejdspartnere.htm">Samarbejdspartnere</a> | <a target="menu" href="Text/CTCinfo/dopingpolitik.htm">Dopingpolitik</a> | <a target="menu" href="Text/CTCinfo/job.htm">Job</a> | </font><a target="menu" href="Text/CTCinfo/downloads.htm"> Downloads</a></td> </tr> <tr> <td> <iframe name="menu" src="Text/CTCinfo/omctc.htm" width="500" height="329" frameborder="0" allowtransparency="true" background-color="transparent"></iframe> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html> |