|
CSS - Dotted Box When Clicked
Hi all,
Not Sure if this is an css issue but when you click on a menu item for example a hyperlink. How do you get rid of the dotted box when a item is clicked. Stephen Similar TutorialsWhy does firefox render the dotted line so different than IE? I think IE does a much better job of rendering it, is there a way to get the same look in firefox? I have a dotted line on the right side of the left column (the blog) and a dotted line on the left side of right column (the menu). I would like a double dotted line with white space in between, so that the lines at the bottom close at the same height. How can I do this? Do I have to make a double dotted line on the right side of the blog column? Or do I have to make a third column in the middle of my blog with dotted lines on left and right side? You can find my website here and my css here It works fine in FF but in IE the buttons stick. I can't figure out what to do. I've searched and read the sticky on resources. Please don't mind the unordered list. It will be a drop down menu I'm working on. Your help is much appreciated. -Garrick- HTML 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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div> <!-- Header --> <div id="header"></div> <!-- Top Navigation --> <div id="nav"> <div id="top_nav"> <div id="top_nav_home"><a href="#"></a></div> <div id="top_nav_shop"><a href="#"></a></div> <div id="top_nav_bag"><a href="#"></a></div> <div id="top_nav_account"><a href="#"></a></div> <div id="top_nav_checkout"><a href="#"></a></div> <div id="top_nav_service"><a href="#"></a></div> <div id="top_nav_email_signup"><a href="#"></a></div> </div> <!-- Product Category Navigation --> <div id="lower_nav"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> <div id="content"> <p>Content goes here.</p> </div> <div id="footer"></div> </div> </body> </html> CSS Code:
body {
background-color: #DBE6F2;
color: #373737;
font: normal 18px Verdana, Arial, Helvetica, sans-serif;
height: auto;
margin: 0 auto;
padding: 0;
width: 760px;
}
table, ul, li {
margin: 0;
padding: 0;
}
img {
margin: 0;
padding: 0;
}
p {
margin: 0 0 10px 0;
padding: 0;
}
a:link, a:visited {
color: #FF0000;
text-decoration: underline;
}
a:hover, a:visited:hover {
color: #FFFF00;
text-decoration: underline;
}
#header {
background: url(images/header.jpg) scroll no-repeat;
height: 89px;
margin: 0;
padding: 0;
width: 760px;
}
#nav {
background: url(images/nav.jpg) scroll no-repeat;
height: 58px;
margin: 0;
padding: 0;
width: 760px;
}
#nav a {
float: left;
}
#nav li {
display: inline;
text-align: center;
width: 13%;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
#top_nav_home {
background: url(images/top_nav.jpg) no-repeat scroll;
width: 80px;
height: 27px;
display: block;
float: left;
}
#top_nav_home a {
width: 80px;
height: 27px;
display: block;
}
#top_nav_home a:active {
background: url(images/top_nav.jpg) no-repeat scroll 0 -27px;
}
#top_nav_shop {
background: url(images/top_nav.jpg) no-repeat scroll -80px 0;
width: 110px;
height: 27px;
display: block;
float: left;
}
#top_nav_shop a {
width: 110px;
height: 27px;
display: block;
}
#top_nav_shop a:active{
background: url(images/top_nav.jpg) no-repeat scroll -80px -27px;
}
#top_nav_bag {
background: url(images/top_nav.jpg) no-repeat scroll -190px 0;
width: 105px;
height: 27px;
display: block;
float: left;
}
#top_nav_bag a {
width: 105px;
height: 27px;
display: block;
}
#top_nav_bag a:active {
background: url(images/top_nav.jpg) no-repeat scroll -190px -27px;
}
#top_nav_account {
background: url(images/top_nav.jpg) no-repeat scroll -295px 0;
width: 95px;
height: 27px;
display: block;
float: left;
}
#top_nav_account a {
width: 95px;
height: 27px;
display: block;
}
#top_nav_account a:active {
background: url(images/top_nav.jpg) no-repeat scroll -295px -27px;
}
#top_nav_checkout {
background: url(images/top_nav.jpg) no-repeat scroll -390px 0;
width: 90px;
height: 27px;
display: block;
float: left;
}
#top_nav_checkout a {
width: 90px;
height: 27px;
display: block;
}
#top_nav_checkout a:active {
background: url(images/top_nav.jpg) no-repeat scroll -390px -27px;
}
#top_nav_service {
background: url(images/top_nav.jpg) no-repeat scroll -480px 0;
width: 125px;
height: 27px;
display: block;
float: left;
}
#top_nav_service a {
width: 125px;
height: 27px;
display: block;
}
#top_nav_service a:active {
background: url(images/top_nav.jpg) no-repeat scroll -480px -27px;
}
#top_nav_email_signup {
background: url(images/top_nav.jpg) no-repeat scroll -605px 0;
width: 155px;
height: 27px;
display: block;
float: left;
}
#top_nav_email_signup a {
width: 155px;
height: 27px;
display: block;
}
#top_nav_email_signup a:active {
background: url(images/top_nav.jpg) no-repeat scroll -605px -27px;
}
#content {
background-color: #ffffff;
margin: 0;
padding: 0;
width: 760px;
}
#footer {
background: url(images/footer.jpg) scroll no-repeat;
height: 10px;
margin: 0;
padding: 0;
width: 760px;
}
I am working on a slide show that uses css for formating. The problem is when I click on any of the navigation icons they jump down by about 10-15px when using IE6 or less. All I can do is direct you to the page and look at the source code. I worked on it all day yesterday without success. http://www.discovervoyages.com/ships/polar-star/12/ thanks for your help Hi there, I was wondering how I would go about creating input fields have a different colour background when teh user has clicked on it and ins typing. I tried using :active, bit it didn't work. Any ideas? Good day all, I have set up my index page for my site with css rollovers instead of javascript rollovers, and I really like the loading time, the problem that I am having is that when I click on the image rollover link there appears a white box around the image. how can this be avoided? Please see the link below for what I am trying to explain... http://www.karmaimports.net/indexcss.htm thanks in advance... Brook Okay, so I'm having a little bit of a problem with setting the background color through an onClick event on an option tag. Here is what I mean. Code: <div id = "move">
<form name = form2>
<span style="float:left;">
<select name= theDay size=1>
<option value=0 selected>Default [themes]
<option value=1>White</option>
<option value=2 onClick = "red()">Light Blue</option>
<option value=3>Aqua
<option value=4 value = "document.body.style.backgroundColor= '#98AFC7';">Lighter Blue</option>
<option value=5 onClick = "document.body.style.backgroundColor= 'white';">Saturday</option>
<option value=6 onClick = "document.body.style.backgroundColor= 'white';">Sunday</option>
</select>
When I click one of the options, nothing changes, although I set the body.style.backgroundColor to register to a different color when the option tag is clicked. Any ideas? |
|||||||