|
CSS - Why Dosnt This Simple Rollover Work In Ie6???
Hey there dev pepz
Does anyone know why this little rollover code doesn't work in ie6 but works fine in Firefox? (background changes) PS: Background is originally #777777; CSS: Code: div.cat-div a:hover div.cat-left,
div.cat-div a:hover div.cat-right {
background:#829DB9;
cursor:pointer;}
HTML: Code: <div class="cat-div"> <a href="http://domain.com/gallery"> <div class="cat-left">gallery</div> <div class="cat-right">click here</div> </a> </div> Thanks heaps Similar TutorialsHi, Does anybody know how i can have an image that switches to another image on rollover and also has a link? Thanks Hi, Could someone please help me to fix this error in my code. I created this website for my school, http://www.rit.edu/~cie/ but for some reason the navigation menu rollover does not work in IE. Could someone please point me to the errors as I have been spending so much time and still couldn't see what cause this. Thanks in advance Ok ive never really used this effect on any of my designs but i would like to. How do i make a <td> background color change on mouse over with css?? and also how would i align an image to the bottom right or bottom left part of a paragraph, i allready know how to do it to the top right and top left. thanks in advance. 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 not liking CSS atm. I have spent nearly 3 hours actually on trying to get a rollover to work. I've tried a IRC channel but all the help I've gotten is how to do a image rollover with one image and/or with text. Here is all I want. It's very simple. I want to have a image rollover (the image changes when the mouse moves over it) for several different images. I want to do it in CSS. Code:
#seeallseries
{
background: url('navpictures/seeallseries.gif') no-repeat;
width: 171px;
height: 55px;
display: visible;
}
#seeallseries:hover
{
background: url('navpictures/seeallseriesHover.gif') no-repeat;
width: 171px;
height: 55px;
display: visible;
}
That's my CSS code that I have right now. How do I use that to make a image rollover. I can do Code: <div class="navbar"> <ul id="seeallseriesul"> <a href="http://www.google.com"><li id="seeallseries"></li></a> </ul> </div> Ignore the other CSS code for the moment. Right at that, it works. The image rollover happens. However I need a link which that does not provide. Is what I'm trying to do impossible? Please tell it's not. This should be simple but it's not for me. Thanks for any links or help. Hey guys, Im really new to css, but ive had some friends helping me along the way with my simple template while i learn. There are two things im having problems with. I want to add a bottom gap (i guess its called padding) to my div, so there is a gap between the end of text and the bottom line. Secondly i want to change the colour of the links, ive tried putting what i thought would work in my css file but the only thing it did was lose my bulletin points :0 Here is a link to my template as it is: http://www.hiven.net/server/motd3.php The right columns are what im after changing the bottom padding on. Here is my html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hive MOTD</title> <link href="./css.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="shell"> <div id="header"> HOME SERVER APPLY DONATE </div> <div id="main"> <div id="side"> <div class="tborder"> <h1>Recruitment</h1> <P>Our recruitment status<br /> is currently: <span class="open">Open</span></P> </div> <div class="tborder"> <h1>Server</h1> <P>Hi-Def Custom<br /> 100TICK 333FPS<br /> Internap Connection<br /> Chicago<br /></P> </div> <div class="tborder"> <h1>Forum Topics</h1> <ul> <li class="item"><a href="http://www.hiven.net/forums/showthread.php?p=19207#post19207"><span>I need opinions</span></a></li><li class="item"><a href="http://www.hiven.net/forums/showthread.php?p=19206#post19206"><span>New Serverz</span></a></li><li class="item"><a href="http://www.hiven.net/forums/showthread.php?p=19205#post19205"><span>"kaniho LUL&q</span></a></li><li class="item"><a href="http://www.hiven.net/forums/showthread.php?p=19204#post19204"><span>The Hive Empire - </span></a></li><li class="item"><a href="http://www.hiven.net/forums/showthread.php?p=19202#post19202"><span>Afroclown's applyi</span></a></li><li class="item"><a href="http://www.hiven.net/forums/showthread.php?p=19200#post19200"><span>New Fork!!</span></a></li><li class="item"><a href="http://www.hiven.net/forums/showthread.php?p=19199#post19199"><span>omg T_T</span></a></li></ul> </div> </div> <div id="content"> <p> Work In Progress </p> </div> <div id="clear"></div> </div> </div> </body> </html> And here is my CSS: Code:
@charset "utf-8";
/* Style Sheet */
body {
padding: 0;
margin: 15px 0 15px 0;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #1f1f1f;
color: #EDEDED;
}
#shell {
margin: 0 auto;
width: 100%;
background: #FFFF00;
}
#header {
width: 90%;
margin: 0 auto;
height: 20px;
background: #252525;
border: 1px solid #000000;
}
#main {
width: 90%;
margin: 0 auto;
padding-top: 5px;
border: 1px solid #000000;
border-top: 0;
background: #2D2D2D;
}
#side {
width: 150px;
padding-right: 5px;
float: right;
}
#content {
margin: 0 160px 5px 5px;
padding: 5px;
border: 1px solid #000000;
}
.tborder {
border: 1px solid #000000;
background: #1f1f1f;
margin-bottom: 10px;
}
.thead {
background: #1f1f1f;
font-weight: bold;
color: #FFFFFF;
font-size: 13px;
}
#clear {
clear: both;
}
.tborder h1 {
background: #1f1f1f;
font-weight: bold;
color: #FFFFFF;
font-size: 13px;
margin:0 0 5px 0;
padding:0 3px;
border-top:1px solid #2d2d2d;
}
.tborder p {
margin:0;
padding:0 3px;
}
.open {
font-weight:bold;
color:#80ff80;
}
.tborder ul {
margin:0;
padding:0 3px 0 18px;
list-style-type: circle;
}
If anyone could help me with this it would be much appreciated. James I'm going mad with this, I tested the CSS a:hover function over FF 1.0.7 and IE6, and the style file is simple: PHP Code: h3 { margin:10px; color:#636500; font-family: Arial, Helvetica, sans-serif; font-style: normal; } p { margin:10px; color:#636500; font-family: Arial, Helvetica, sans-serif; font-style: normal; } a { text-decoration: none; } a:hover { color:#636500; } a:visited { color:#cecf9c; } a:link { color:#cecf9c; } searched through the forum but seems nobody has got this problem... I just want the link to change color, I imported the css file to my html and it worked for the first time. I clicked on the link and then use brower's "Back" button to test it again, but the hover feature is not working anymore. I think it may be affected by the a:visited style, but how do I make a:hover work all the time? Thanks for helping. I have this code which changes text into a image, but how do I have an image instead of text? I mean so everythings images and no text. <style type="text/css"> #nav a:hover { background: url("arrow_hover.png") no-repeat; } #nav a img { width: 88px; height: 67px; position: absolute; top: 200px; left: 500px; border: 1px solid black; visibility: hidden; } #nav a:hover img { visibility:visible; } </style> <div id="nav"> <ul> <li><a href="#">Link1<img src="camera.jpg" alt="" /></a> <li><a href="#">Link2<<img src="home.png" alt="" /></a></li> <li><a href="#">Link3<<img src="camera.jpg" alt="" /></a></li> <li><a href="#">Link4<<img src="johnpotter.jpg" alt="" /></a></li> </ul> </div> Hi everyone, I'm having a rollover image problem in IE6. The problem isn't that the rollover isn't working - it's that the initial image before the rollover isn't displaying. You can see what I mean at: http://www.francesli.myubertor.com/ Doctype: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML for Menu: Code: <!-- --------------- main menu --------------- --> <div id='menu_outer'> <div id='menu_inner'> <ul> <li id="up_menu1" class="sel"> <a class="sel" href="/" title="" target="" rel="">Home</a> </li> <li id="up_menu2" class="unsel"> <a class="unsel" href="/Properties.php" title="" target="" rel="">Properties</a> <ul> <li id="up_menu2_1" class="unsel"> <a class="unsel" href="/ActiveListings.php" title="" target="" rel="">Active Listings</a> </li> </ul> </li> <li id="up_menu3" class="unsel"> <a class="unsel" href="/ForBuyers.php" title="" target="" rel="">For Buyers</a> <ul> <li id="up_menu3_1" class="unsel"> <a class="unsel" href="/FirstTimeBuyers.ubr" title="" target="" rel="">First Time Buyers</a> </li> </ul> </li> <li id="up_menu4" class="unsel"> <a class="unsel" href="/ForSellers.php" title="" target="" rel="">For Sellers</a> <ul> <li id="up_menu4_1" class="unsel"> <a class="unsel" href="/20TipsforSellingYourHome.ubr" title="" target="" rel="">20 Tips for Selling Your Home</a> </li> </ul> </li> <li id="up_menu5" class="unsel"> <a class="unsel" href="/Blog.php" title="" target="" rel="">Blog</a> </li> <li id="up_menu6" class="unsel"> <a class="unsel" href="/Links.php" title="" target="" rel="">Links</a> </li> <li id="up_menu7" class="unsel"> <a class="unsel" href="/Contact.php" title="" target="" rel="">Contact</a> <ul> <li id="up_menu7_1" class="unsel"> <a class="unsel" href="/AboutMe.ubr" title="" target="" rel="">About Me</a> </li> </ul> </li> </ul> </div> </div> CSS for Menu: Code:
/* Navigation Menu */
#menu_outer {
top: 77px;
background: transparent url(../../content/image/287.png) repeat-x scroll 0% 0%;
height: 42px;
padding-top: 7px;
text-transform: uppercase;
}
#ubertor #menu_outer li a {
color: #FFFFFF;
font-weight: bold;
}
/* Home */
#up_menu1.sel a{
background: url(http://storage.ubertor.com/cl9438/content/image/307.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 60px;
height: 27px;
}
#up_menu1.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/307.png) #6fcee4 no-repeat bottom;
width: 60px;
height: 27px;
}
#up_menu1.unsel{
background: url(http://storage.ubertor.com/cl9438/content/image/307.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 60px;
height: 27px;
}
/* Properties */
#up_menu2.sel a, #up_menu2.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/309.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 90px;
height: 27px;
}
#up_menu2.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/309.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 90px;
height: 27px;
}
#up_menu2.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 90px;
height: 27px;
}
/* For Buyers */
#up_menu3.sel a, #up_menu3.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/311.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 99px;
height: 27px;
}
#up_menu3.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/311.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 99px;
height: 27px;
}
#up_menu3.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 99px;
height: 27px;
}
/* For Sellers */
#up_menu4.sel a, #up_menu4.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/313.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 101px;
height: 27px;
}
#up_menu4.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/313.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 101px;
height: 27px;
}
#up_menu4.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 101px;
height: 27px;
}
/* Blog */
#up_menu5.sel a, #up_menu5.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/317.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 58px;
height: 27px;
}
#up_menu5.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/317.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 58px;
height: 27px;
}
#up_menu5.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 58px;
height: 27px;
}
/* Links */
#up_menu6.sela, #up_menu6.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/319.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 65px;
height: 27px;
}
#up_menu6.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/319.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 65px;
height: 27px;
}
#up_menu6.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 65px;
height: 27px;
}
/* Contact */
#up_menu7.sel a, #up_menu7.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/315.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 82px;
height: 27px;
}
#up_menu7.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/315.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 82px;
height: 27px;
}
#up_menu7.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 82px;
height: 27px;
}
#ubertor #menu_outer li li a {
text-transform: none;
background-color:#CCCCCC;
background-image:none;
color:#222222;
display:block;
float:none;
padding:2px 10px;
text-indent:0;
width:auto;
height: auto;
}
#menu_inner ul li a, #menu_inner ul li a:hover {padding: 0px 0px}
Help will be very appreciated, I'm supposed to have this done today. :/ Hey folks, I'm having issues with a dropdown menu in IE 6 to the tune of it not showing up when it's rolled over. Here's the page in question. Here's the CSS I"ve used for it: Code:
/* LANDING PAGE MENU LAYOUT */
#landingMenu {
width:960px;
height:450px;
position:relative;
background:transparent none;
}
#landingMenu li {
float:left;
font-size:14px;
font-weight:bold;
}
#landingMenu li a {
width:192px;
float:left;
background:#ffc000 url(images/landingMenu_bg.jpg) no-repeat top;
display:block;
text-align:center;
min-height:255px;
padding-top:15px;
}
/* ENTER TOP PADDING AND ACCORDING HEIGHT FOR EACH DIVISION (NORMAL HEIGHT IS 360PX, ADJUSTED FOR FOOTER HEIGHT CLEARANCE)
#landingMenu li#CDS_menu a { min-height:255px; padding-top:35px;}
*/
#landingMenu li li {
background:transparent none;
float:none;
padding:0;
height:auto;
text-transform:none;
list-style:disc;
margin-left:40px;
margin-top:5px;
font-size:14px;
color:#0f1190;
font-weight:bold;
}
* html #landingMenu li li { margin-left:20px; }
#landingMenu li li.landingCaption { list-style:none;margin-top:10px;margin-left:25px; }
* + html #landingMenu li li { margin-left:-160px;width:150px;}
* + html #landingMenu li li.landingCaption { width:150px;display:block;margin-left:-160px; }
#landingMenu li ul {
display: none;
position: absolute;
margin-top:125px;
background:transparent none;
z-index:600;
width:192px;
}
#landingMenu li > ul { top: auto; left: auto; }
#landingMenu li:hover ul, li.over ul { display: block; }
/* END LANDING MENU */
Main issue is that I don't even have a copy of IE 6 to fix for, and I've been going off of screen shots from the client. Any thoughts? Hi, I have a button as follow: Code:
#memberlogin .login{
background:url(/images/memberlogin_btn.gif) no-repeat left top;
display:block;
width:130px;
height:31px;
border:0;
}
I need to make a rollover. This is one image, same as this method: http://www.nowcss.com/links/image-rollover-with-css I tried it this way Code:
#memberlogin a.login span {
display: none;
}
#memberlogin a.login:hover {
background: url(/images/memberlogin_btn.gif) repeat 0px -31px;
}
but it's not working, do you know what I'm doing wrong here? Thanks in advance. My website is warriorquest.co.nr and for some odd reason, the css rollovers are working in the latest IE, but not in the latest Firefox. THis is something i never expected, here is my css: Code: css a { text-decoration: none; }
a:link { color: #0000FF; }
a:active { color: #C0C0C0; }
a:visited { color: #0000FF; }
a:hover
{
color: #0000FF;
border: 1px solid #0000FF;
padding: 5px;
width: 190px;
background-color: #ffffff;
}
body
{
color: #ffffff;
background-color: #2F4F4F;
}
div
{
margin-top: 50px;
margin-bottom: 50px;
}
Thx for your help =) EDIT: it seams i had to completely reload the page, but now they dont display right. THey are supposed to look like in IE, any suggestions? Hi, q) In css, can you rollover an link in a navigation bar that is replaced by another image instead of text. q)With a dropdown menu eg suckerfish example, can you also use a rollover effect on the drop own choices either with text or an image? I am trying build a bottom bucket with two different links, that when you rollover either one of the images a different image is shown. Well I have all of that working but if you rollover the first image and while the li ul image is being shown take your mouse and move to the right. The hover state of the second ul is now shown. But if you go backwards and start moving your mouse to the left, nothing happens, which is great! I have tired all sorts of things. Right now I have a link that has a very stripped down version of what it is suppose to be. I have tired different z-index's but still nothing. Thanks for the help! http:// www. movementinteractive. com/ clients/ ParkAve_web/web/tab_test.html Hi, I have a problem, I can make a rollover on a link with the hover pseudo class easily, and it will work in IE and FF, but I cant do one over a table cell in IE. My code is below, it works as I want in FF, but not IE. Dom. Quote: .nav-cell-main-nonsel { font-family: "Comic Sans MS", Tahoma, Tunga, Verdana, Arial, Geneva; font-size: 10px; font-weight: normal; color: #333333; vertical-align: middle; text-align: left; padding: 0px 0px 0px 5px; background-image: url(../../images/[ps]triangle1.gif); background-position: left; background-repeat: no-repeat; border-bottom: 1px solid #EDEDED; padding: 0px 0px 0px 20px; } .nav-cell-main-sel, .nav-cell-main-nonsel:hover { font-family: "Comic Sans MS", Tahoma, Tunga, Verdana, Arial, Geneva; font-size: 10px; font-weight: normal; color: #333333; vertical-align: middle; text-align: left; padding: 0px 0px 0px 5px; background-image: url(../../images/[ps]triangle2.gif); background-position: left; background-repeat: no-repeat; border-bottom: 1px solid #EDEDED; padding: 0px 0px 0px 20px; } Cheers, Dom. hi, been trying to do this for a few hours now and pretty much struggling a bit. basically I have a <ul> and when I hover the mouse over one of the list links, I wantt a sub menu to appear which can also be clicked. I have trawled around abit to see if I could get anything but have come up empty handed. can someone point me in the right direction here. thanks!! My current code is very simple, My links are text inside div tags which are placed over an image. I assign the div to the style sheet. Upon rollover of the image the style sheet makes the image invisible so that the background image is viable. Hence the rollover effect. What i need is that when the link is the same as the current page being viewed the image behind the text will be the same as the rollover image and upon rollover, nothing will change. So far i have asigned the Div tags an id and created some code to identify when the link is the same as the current page. My problem is that because of my method of rolling over i have no idea how to get my desired result. Any help please? Below are 2 scripts. The first is the code i created to identify when the link is the same as the current page. The second code is my rollover efect script without the first script in it. Code:
body#home a#home,
body#products a#prodnav,
body#faq a#faqnav,
body#contact a#connav {
background: url(images/02.png) no-repeat;
}
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" />
<style>
.cssnav
{
position: relative;
font-family: BrowalliaUPC;
font-size: 25px;
background: url(images/02.png) no-repeat;
white-space: nowrap;
display: block;
width: 100;
height: 30;
margin: 0;
padding: 0;
}
.cssnav a
{
display: block;
color: #000000;
font-size: 25px;
width: 211px;
height: 44px;
display: block;
float: left;
color: white;
text-decoration: none;
}
.cssnav img
{
width: 100px;
height: 30px;
border: 0
}
* html a:hover
{
visibility:visible
}
.cssnav a:hover img
{
visibility:hidden
}
.cssnav span
{
position: absolute;
left: -1px;
top: -1px;
margin: 0px;
padding: 0px;
cursor: pointer;
width: 100px;
}
</style>
<title>Untitled Document</title>
</head>
<body id="home">
<div class="cssnav">
<a href="http://www.URL.com" id="home"><img src="images/01.png" alt="Alternative text" width="100" height="30" />
<center>
<span>Home</span>
</center></a></div>
</body>
</html>
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? Hello guys Please see the attached .zip, it contains a .swf file which shows what I am trying to accomplish in css, and a html file with the progress i've made. I would like there to be no images involved. I have been trying for a good few days now. I can almost get it to work in IE (Except the 1px gap between button and end-block), but in other browsers its just not working. Any help is greatly appreciated, Cheers, Rob |
|||||||