|
CSS - Css Rollover Images Have White Box When Clicked?
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 Similar TutorialsI've been trying to solve this problem about my website. My site What it is suppose to look like. Image Thanks in advance. All, I have a header on this page backup.whiteslimo.com with 3 images inserted into it listing the company name, service, and contact info. My problem is that when they are displayed there is a thin white border on the bottom and right hand sides of each image. But the image doesn't have these borders. If you are in Firefox/Mozilla and you right click on the individual images and select View Image, you will see that the image itself does not have these borders. I am thinking that somewhere along some attribute is being added that is causing this but since I am a CSS neophyte (This is still my first week lol) I am not sure. Any help is much appreciated. in IE the hourglass flickers...so i need to put a image on it and stuff......should i just overlap the image with negative margin or write text to a picture? currently at my site i have rollover images on my menu which are gif files and have parallel gif files that are "lit up" which show when the user puts their mouse over the gif which looks very pretty and i like it, unfourtnatly it uses javascript. this creates a couple issues, one is that the user needs javascript for this too work, the other is i think it's casuing my page to load slow. someone said something about doing rollover images with CSS. im willing to try it but i don't understand or have a clue how to do this. also is using CSS any better? (speed wise most importantly) hi all, I am trying to figure out how to have multiple CSS Rollover images with links on one page. Any ideas, tips, suggestions or samples are greatly appreciated! Brook I am just learning CSS and I found this site and they have a step through example, but I am having problem where they use body.about dt#about, body.about dt#about a, body.services dt#services, body.services dt#services a, body.portfolio dt#portfolio, body.portfolio dt#portfolio a, body.contact dt#contact, body.contact dt#contact a { background-position: 0 -100px; } to select different parts of an image to display. Also, supposedly, you put in the body tag of the index.html file <body class="about"> and it is supposed to use the about image, but I am unsure how to enable the others. Anyone have an idea. The code is too much to post here, but I could possibly email it if anyone needs it. I can't seem to find this solution anywhere I want an image rollover with CSS to work in IE, but IE hates me so I can't get it. Here is one of my buttons: CSS: #tab_nav #home_tab { background: url(images/home.jpg) no-repeat; width: 97px; height: 33px; cursor: pointer; } #tab_nav #home_tab:hover {background: url(images/home-over.jpg) no-repeat; width: 97px; height: 33px; } Here is the HTML too in case you want it: <div id="tab_nav"> <div id="home_tab" onClick="javascript:window.location.href='index.php';"></div> </div> Now, the rollover works well in Mozilla, but it doesn't work in IE. Does anyone know how I can acheive this? Thanks BTW, here is the page So, I'm pretty new to all this, and any help is really key. So, on my site, I have a lot of rollover images. I may be breaking usability rules! The site has a lot of hand drawn elements that are supposed to act as nav. So, we implemented hand drawn nav that changes color when you rollover it. The problem is that when you click on those rollovers, a big dotted box appears around the selected one... it looks especially tacky if you don't go over to the next page. All of these elements have this box. Is there a way to tell the browser not to show that selection box?? i have a basic html page which includes a number of hyperlinks using jpeg images... essentially <img> tags wrappped in <a> tags. i want to create a rollover effect with these links so that when a link is highlighted (mouseover) the jpeg image changes to another seperate jpeg impage. is it possible to do this with html/css and if so how can i do this? i have read about a method of doing this which combines both the original image (before mouseover) and the mouseover image into one single jpeg and changing the image's x-coordinate using css so that there is no preload/image flicker issues when the link is clicked on, but i'm not sure exactly how to code this. any help is appreciated. Hello everyone, I wanted to ask, how to place a text over a rollover image. Most ppl recommend to set the image as background in table or div tag, but that would prevent to make the image a rollover. To put it simply, I want to create an effect, I have seen e.g. at ehow.com When you place your cursor on a button in the menu, the text gets underlined. When you place your cursor on a button in the submenu ("Browse How Tos"), the text gets ubderlined AND the image changes. Is this somehow a combination of rollover text and image? My question basically is: HOW DO YOU CREATE SUCH AN EFFECT? Thank you for your replies, Tomas Hi ! Me again :P So this is a simple test i made to try this out. But I ran into a problem. Take a look for yourself: (view-source for xhtml and css) http://fotoz.hit.bg/test/menu.html The problem is that annoying flickering that happens when you roll over. Any ideas how to fix it ? And most importantly why does it occur? Thanks! p.s I should explain what i wanted to do here. Basicly 1 big background image to the <div>. It will be holding the "over" state of all the buttons. At the same time the <a> elements will be holding images of the "normal" state buttons, and when you hover over them they will disappear and you will see the "hover" state below. It works but I get the flickering with visibility:hidden and even if i just move the img out of the way I am trying to create a Horizontal Multilevel Drop Down Navigation Menu, but instead of the css creating text i would like them to be images and when you hover over the links they rollover into a new image. I would really like your help on this been trying to do it for weeks now!! Cheers 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 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? 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? I have layed out the page but cannot seem to get the hang of the floats and positioning....!! If anyone can give me a hint how I can position my text in the main white space I would be so grateful as I am confusing myself as to what i am doing wrong!! the site is hosted at www dot getatrader dot com PLEASE HELP!! here is the CSS: Code:
body {
background: white;
font-size: smaller;
font-weight: bold;
font-family: Verdana,Arial,Helvetica,sans-serif;
}
#topnav {
float:left;
position: absolute;
}
#topnav img{
display: block;
border: none;
}
#header{
position: relative;
text-align: right;
border: solid thin #999999;
margin: 0px 0px 0px 0px;
background: #336699;
font-family: Verdana,Arial,Helvetica,sans-serif;
color: #ffffff;
height: 155px;
}
#headerright{
position: relative;
top: 20px;
right: 10px;
}
#headerright li {
display: inline;
list-style: none;
padding: 40px;
}
#headerright img {
border: none;
}
#headerright a:link {
color: #ffffff;
text-decoration: none;
}
#headerright a:visited {
color: #ffffff;
text-decoration: none;
}
#headerright a:hover {
color: #ffffff;
text-decoration: none;
}
#headerright a:active {
color: #ffffff;
text-decoration: none;
}
h1 {
}
h2 {
width: 200px;
text-align: center;
color: white;
background-color: black;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: large;
font-weight: bold;
}
#container {
width: 956px;
padding: 10px;
margin: 0px auto 0px auto;
height: auto;
text-align: left;
border: 1px solid #ddd;
}
#button {
position: relative;
display: block;
width: 152px;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: Verdana,Arial,Helvetica,sans-serif;
background-color: #336699;
color: #333;
}
#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
height: 500px;
}
#button li {
border-bottom: 1px solid #90bade;
margin: 0;
}
#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #button li a {
width: auto;
}
#button li a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
#maintext {
position: absolute;
float: left;
}
#footer
{
color: white;
background-color:#336699;
font-size: small;
font-family: Verdana,Arial,Helvetica,sans-serif;
margin: 0px 0px 0px 0px;
}
Hi; I am trying to get rid off white space from the bottom of the navigate bar, and tried with height=23px for th or td, but they don't not work, could anyone help me, please. 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=utf-8" />
<title>Yourheadstone.com</title>
<style type="text/css">
html head title{
border:0;
padding:0;
margin:0;
}
body{
padding:0;
border:0;
background-color:#3399FF;
margin:0;
}
table tr td{
border: 1px solid #000000;
}
table{
width:1024px;
height:25px;
padding:0;
border:2px solid #000000;
margin-top:5%;
margin-right:auto;
margin-bottom:auto;
margin-left:auto;
background-color: #E5FFFF;
}
tr td{
padding:0;
margin:0;
}
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#nav li {
float: right;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #c00;
background-color: #fff; }
</style>
</head>
<body>
<table>
<tr>
<td>
<ul id="nav">
<li><a href="#">About Us</a></li>
<li><a href="uploadform.php">FAQs</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Headstones</a></li>
<li><a href="#">Home</a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>
|
|||||||