0

I know what you're thinking - who cares about IE anyway? Well, my client does. The problem is that a dotted outline appears around the menu bar links when you click on one. I tried it in IE 11 and there's no problem. So it's only a problem for people using older versions of IE. Also fine in Chrome, Firefox, and any other relevant browser, but I figured I'd ask anyway.

The website is precisionimagerycorp.com

The HTML

<ul id="menu-bar">
<li><a href="">Home &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; |</a></li>
<li><a href="about.html"> About&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; |</a></li>
<li><a href="">Blog &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; |</a></li>
<li><a href="contact_us.html">Contact&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; |</a></li>
<li><a href="loginform2.php">Client Login</a></li> <br /><br />
<li><a href="register.php">

The CSS

a:link{
color:#003;
text-decoration:none;
}
a:visited{
color:#003;
text-decoration:none;   
}
#menu-bar {
margin-left: 0px;
margin-top: 0px;    
padding: 25px 0px 0px 115px;
height: 34px;
line-height: 100%;
/*border-radius: 24px;
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
box-shadow: 2px 2px 3px #666666;
-webkit-box-shadow: 2px 2px 3px #666666;
-moz-box-shadow: 2px 2px 3px #666666;
background: #8B8B8B;
filter:alpha(opacity:0);
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#000));
background: -moz-linear-gradient(top,  #FFF,  #000);
border: none;*/
}
#menu-bar li {
margin: 0px 0px 0px 0px;
padding: 0px 0px 6px 0px;
float: left;
position: relative;
list-style: none;
}
#menu-bar a {
font-weight: bold;
font-family: arial;
font-style: normal;
font-size: 14px;
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 8px 20px 8px 0px; /*The value on the far right determines menu bar placement */
margin: 0;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
text-shadow: 2px 2px 3px #000000;
}
/*#menu-bar .current a, #menu-bar li:hover > a {
background: #0399D4;
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#EBEBEB, endColorstr=#A1A1A1);
background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1));
background: -moz-linear-gradient(top,  #EBEBEB,  #A1A1A1);
color: #570058;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 2px 2px 3px #FFFFFF;*/
}
#menu-bar .current a, #menu-bar li:hover > a {

}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
background: none;
border: none;
color: #666;
-box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu-bar ul a:hover {
background: #0399D4 !important;
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#04ACEC, endColorstr=#0186BA);
background: -webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA))       `enter code here`!important;
background: -moz-linear-gradient(top,  #04ACEC,  #0186BA) !important;
color: #FFFFFF !important;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 2px 2px 2px #FFFFFF;
}
#menu-bar ul {
background: #DDDDDD;
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#CFCFCF);
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));
background: -moz-linear-gradient(top,  #FFFFFF,  #CFCFCF);
display: none;
margin: 0;
padding: 0;
width: 180px;
position: absolute;
top: 30px;
left: 0;
border: 0;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: 2px 2px 3px #222222;
-moz-box-shadow: 2px 2px 3px #222222;
box-shadow: 2px 2px 3px #222222;
}
#menu-bar li:hover > ul {
display: block;
}
#menu-bar ul li {
float: none;
margin: 0;
padding: 0;
}
#menu-bar ul a {
padding:10px 0px 10px 15px;
color:#424242 !important;
font-size:12px;
font-style:normal;
font-family:arial;
font-weight: normal;
text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul li:first-child > a {
border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
}
#menu-bar ul li:last-child > a {
border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
}
#menu-bar:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu-bar {
display: inline-block;
}
html[xmlns] #menu-bar {
display: block;
}
* html #menu-bar {
height: 1%;
}
misterManSam
  • 24,303
  • 11
  • 69
  • 89
fifomatic
  • 1
  • 1
  • Your CSS & HTML are awful. Do not use ` ` and `
    ` to adjust layout, use CSS instead. Also in CSS, `0` has no unit; and please learn CSS short form. Make JSFiddle as well
    – Raptor Sep 30 '14 at 02:18
  • By the way, your DOCTYPE is still XHTML 1.0, use of deprecated `` tag, missing `alt` for images, and mixing up images, CSS and HTML files in same directory. Please learn how to create a site first. – Raptor Sep 30 '14 at 02:22
  • 1
    try `a { outline: none; }` – Tamil Selvan C Sep 30 '14 at 02:23
  • possible duplicate of [How to remove dotted border around active hyperlinks in IE8 with CSS](http://stackoverflow.com/questions/1142819/how-to-remove-dotted-border-around-active-hyperlinks-in-ie8-with-css) – misterManSam Sep 30 '14 at 02:54
  • Take [this example as a gift](http://jsbin.com/balib/1/edit). No more ` ` or `
    `!
    – misterManSam Sep 30 '14 at 03:13
  • Thank you Tamil, and misterManSam. Raptor, not all of us were born perfect like you, ya giant douche. You're so insecure and condescending. Which might be OK if you offered a solution. – fifomatic Oct 01 '14 at 20:40
  • Anyway, {outline:none} did the trick. misterManSam, I really appreciate the effort, but the I used the code you wrote and it came out looking kinda weird. But my problem's solved. Thanks guys! – fifomatic Oct 01 '14 at 20:42

0 Answers0