|
CSS - Hover Button Problem
Hey, im just looking at putting some images on my website that change with the users mouse hovering over them, nothing spectacular. With google's help ive managed to figure out the Css code, for one image like this but im struggling to see an easy way to get more images with the same spec without repeating myself in endless lines of code.
Code:
<html>
<head>
<title>Button attempt</title>
<style type="text/css">
.btnContinue {
width: 80px;
height: 10px;
display: block;
font-size: 10px;
text-decoration: none;
background-repeat:no repeat;
background-image:url(image link here);
}
.btnContinue:hover {
background-image:url(image link here);
}
</style>
</head>
<body>
<a class="btnContinue" href="##"> </a>
</body>
</html>
Is there a simple method to use these styles on more than one image, without starting btnContinue2, btnContinue3 etc... thanks Similar Tutorialsi know that IE doesnt support the :hover being added to anything but links, is this the same with :active? was just wondering whether i could have a style change when the user clicks on a form button How do i change img button to 3d on hover or mouseover using css. Please advise. thanks Hello, Basically I have a problem with my CSS regarding an on hover option in IE5. My CSS works fine on IE7 and IE6, however on IE5 it does not work properly and instead of displaying me a menu on IE5 (on Apple) it just creates empty spaces at the bottom of the page. The following is the CSS I use to make the menus work: Code: ul {
margin: 0;
padding: 0;
list-style: none;
width:300px;
background-color: #EAEAEA;
}
ul li {
position: relative;
/* need for IE*/
float: left;
background-color:#EAEAEA;
text-decoration: none;
}
li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
background-color: #EAEAEA;
text-decoration: none;
}
ul li a {
display: block;
text-decoration:none;
color: #777;
background-color: #EAEAEA;
padding: 5px;
/* need for IE*/
height: 1%;
text-align: left;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}
li:hover ul, li.over ul {
display: block;
}
As I already said this works fine on IE7 but a disaster on IE5 (on Apple). Also the doc type I am using is Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> I have also searched google, but can not really find a solution to my problem! Any sugestions are most welcomed Thank You bormli Hi all u experts I have some problems which I list them below : 1-I just used a simple css style, it works in FF but not in IE7, it means font size and and bold, is shown in FF but not in IE Quote: #tbtd2 { font: 12px Arial bold; color: #8F2222; } 2-also hover effect is not the same in FF and IE , the same as above (looks disable in IE) : Quote: #tbtd2:hover { font: 14px Arial bold; color: #8F2222; } 3-how can I have hover effect for row of a table ? ( css style not js ) like change font color or size ? best regards How do you fix this hover problem http://www.svprosquad.com/test.htm It's the top nav that's the problem that's the one that is done using CSS. I'm having a problem with the following piece of code. Code:
.menuitem
{
position:relative;
border:0px solid;
border-color:#fff;
z-order:auto;
padding:1px;
text-align:center;
text-size:10px;
width:300px;
padding:2px;
}
div.menuitem:hover
{
background-color:#06f;
color:white;
}
With Mozilla and Opera, the code highlights the div areas in blue as I expected. However, in IE6, this does not happen. The divs have been wrapped in anchor tags like so: Code: <a href="wherever.htm"> <div class="menuitem"> menuitem1 </div> </a> Anybody have any ideas? Hi I am having some problems with using hover and background images. My code is this: a:hover.buttons { color:white; width:53px; height:33px; background-color:#3366CC; background-image: url(images/council1.jpg); padding-top: 9px; padding-bottom: 10px; padding-left: 8px; padding-right: 8px; } It is loading a background image into a table cell. It works OK in mozilla based browsers, but there is a delay of about a second when using IE, which makes the page look rather untidy. The page I am working on can be viewed he http://www.northstar-newmedia.co.uk/oic (the links ath the top of the page) Does anyone know why this is happening, and if there is a fix/hack? Any help would be much appreciated. Hiya, Hoping for a bit of help with a menu I've made. Basically it's a tabbed menu with another line underneath for an explanation of what you'll find if you click on the tab. The explanation shows up when you hover over the appropriate tab. I also have an 'active' class that highlights whatever section you're on and shows that explanation as default. It all works fine until you're halfway through the menu, and the explanations won't show for any menu item previous to the active one. I know this is something to do with z-index, but I can't for the life of me figure out where to put it. Can anyone help? This is only happening in IE. Full Code he 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>Menu Problem</title> <link href="menu.css" rel="stylesheet" type="text/css" /> <!-- The line below starts the conditional comment --> <!--[if IE]> <style type="text/css"> body {behavior: url(csshover.htc);} </style> <![endif]--> <!-- This ends the conditional comment --> </head> <body> <div class="container"> <p>First Active Tab:</p> <div class="nav"> <ul> <li class="active"><a href="#" title="Item 1"><span>Item 1</span></a> <ul class="item1"> <li><span>Caption for Item 1. Caption for Item 1. </span></li> </ul> </li> <li><a href="#" title="Item 2"><span>Item 2</span></a> <ul class="item2"> <li><span>Caption for Item 2. Caption for Item 2. </span></li> </ul> </li> <li><a href="#" title="Item 3"><span>Item 3</span></a> <ul class="item3"> <li><span>Caption for Item 3. Caption for Item 3. Caption for Item 3. </span></li> </ul> </li> <li><a href="#" title="Item 4"><span>Item 4</span></a> <ul class="item4"> <li><span>Caption for Item 4. Caption for Item 4. </span></li> </ul> </li> <li><a href="#" title="Item 5"><span>Item 5</span></a> <ul class="item5"> <li><span>Caption for Item 5. Caption for Item 5. </span></li> </ul> </li> <li><a href="#" title="Item 6"><span>Item 6</span></a> <ul class="item6"> <li><span>Caption for Item 6. Caption for Item 6.</span></li> </ul> </li> </ul> </div> <!-- End nav --> <p style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #000;">Middle Active Tab:</p> <div class="nav"> <ul> <li><a href="#" title="Item 1"><span>Item 1</span></a> <ul class="item1"> <li><span>Caption for Item 1. Caption for Item 1. </span></li> </ul> </li> <li><a href="#" title="Item 2"><span>Item 2</span></a> <ul class="item2"> <li><span>Caption for Item 2. Caption for Item 2. </span></li> </ul> </li> <li><a href="#" title="Item 3"><span>Item 3</span></a> <ul class="item3"> <li><span>Caption for Item 3. Caption for Item 3. Caption for Item 3. </span></li> </ul> </li> <li class="active"><a href="#" title="Item 4"><span>Item 4</span></a> <ul class="item4"> <li><span>Caption for Item 4. Caption for Item 4. </span></li> </ul> </li> <li><a href="#" title="Item 5"><span>Item 5</span></a> <ul class="item5"> <li><span>Caption for Item 5. Caption for Item 5. </span></li> </ul> </li> <li><a href="#" title="Item 6"><span>Item 6</span></a> <ul class="item6"> <li><span>Caption for Item 6. Caption for Item 6.</span></li> </ul> </li> </ul> </div> <!-- End nav --> </div> </body> </html>
CSS He Code: /* CSS Document */ body{margin: auto; text-align: center; background: #fff; font-size: 80%;} .container{ margin: auto; padding-top: 6px; width: 1000px; text-align: left; background: #fff;} /* Main Menu */ .container .nav{background: #fff; height:68px; line-height:34px;left:0px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color: #fff; text-transform:uppercase;margin-left: 6px; } .container .nav ul{list-style: none; position:relative;} .container .nav ul li{display: inline; float: left; position:relative; font-size: 0.9em; } .container .nav ul li a{text-decoration:none; color:#fff; background: #A90100; padding-left: 20px; } .container .nav ul li a, .container #nav ul li a span{ display: block; float: left;} /* Hide from IE5-Mac \*/ .container .nav a, .container .nav a span{float: none} .container .nav ul li a:hover{text-decoration:none; color:#fff; background: #351405; } .container .nav ul li.active a{text-decoration:none; color:#fff; background: #351405; } .container .nav ul li.active a span{text-decoration:none; color:#fff; background: #351405; } .container .nav ul li.active ul{display: block;} .container .nav ul li a span{background: #A90100; padding-right: 20px; } .container .nav ul li a:hover span{text-decoration:none; color:#fff; background: #351405; } .container .container .nav li > ul {top: auto;left:auto;} .container .nav ul li ul{ display:none; position: absolute; width: 700px; left: 0px; top: 0px; float: left; font-family:Arial, Helvetica, sans-serif; font-size: 12px; text-transform:none; font-weight: normal;} .container .nav ul li:hover ul{ z-index:100;} .container .nav ul li ul.item1{ left: 10px; z-index: 0;} .container .nav ul li ul.item2{ left: -67px; z-index: 0;} .container .nav ul li ul.item3{ left: -144px; z-index: 0;} .container .nav ul li ul.item4{ left: -221px; z-index: 0;} .container .nav ul li ul.item5{ left: -298px; z-index: 0;} .container .nav ul li ul.item6{ left: -375px; z-index: 0;} .container .nav ul li:hover ul.item1{z-index: 100;} .container .nav ul li:hover ul.item2{z-index: 100;} .container .nav ul li:hover ul.item3{z-index: 100;} .container .nav ul li:hover ul.item4{z-index: 100;} .container .nav ul li:hover ul.item5{z-index: 100;} .container .nav ul li:hover ul.item6{z-index: 100;} .container .nav ul li ul li{ display:inline; position: absolute; float: left; left:10px; top: 39px; height: 24px; line-height: 24px; width: 700px; float: left; color: #fff; font-family:Arial, Helvetica, sans-serif; font-size: 1em; text-transform:none; font-weight: normal; background: #351405;} .container .nav ul li:hover ul {display: block;}
My nav menu works 100% in IE8, FF, Opera and Chrome... but it's doing something weird in IE7 that can kindof affect it's functionality but I have no idea really where to look for the problem. It's most easily seen on two pages. The front page, he http://www.skullcrow.com ...and on the product pages he http://www.skullcrow.com/proddisp.php?id=skull01 On the main page when you hover over the menu and get the drop downs, if you move your cursor so you're also over the text div in the background, the menu goes away. You can tell easiest when viewing the "Community" and "Help" lists. On the product display page is the same thing over a larger area. Anytime you move the cursor to a part of the menu that's covering the text or (only some of?) the background div, it disappears. The menu is obviously on top, and this problem does not occur in basically any other browser. The main reason I need to fix this is that these menus will probably only get bigger and the navbar will become barely unusable in IE7 after a while. I don't exactly what code I would need to post for this, I was just hoping for some general information that could point me in the right direction. Thanks for any help. Hi, I have the following CSS: .class2 a:hover {text-decoration: none; background-color: #333366; color: #ffffff; width: 100%; height: 100%; font-weight: bold;} for this javascript/HTML: menu1[0]='<span class="class2"><a href=""> About our trees</a></span><br>' It's part of a drop down menu and in IE when a user hovers over the About our trees, the entire box is highlighted with my chosen color. In Firefox, only the text in the box is highlighted. Can someone help me with this one? I tried switching from a <span> to a <div> and still no good. AAUGH. Happy Thanksgiving to all who are celebrating! Kimber Hello, I'm trying to create a menu for my NGO to replace the one they have currently but I'm running into some problems. The highlight color in this photo is one - how do you get around this issue? I'd like to keep the colors the same, if possible, but I recognize that might not be acceptable. the menu img is at kburke - org slash menuhover.jpg Thanks! here's the code: /*** DEMO SKIN ***/ .sf-menu { float: left; margin-bottom: 1em; font:11px Verdana, sans-serif; font-weight:bold; } .sf-menu a { border-left: 1px solid #fff; border-top: 1px solid #CFDEFF; padding: .75em 1em; text-decoration:none; color: #FFFFFF; } .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/ color: #ffffff; } .sf-menu li { background: #b6791e; } .sf-menu li ul li a { color: #769841; } .sf-menu li li a:active, .sf-menu li li a:focus { color: #ffffff; } .sf-menu li li { background: #ffffff; } .sf-menu li li li { background: #ffffff; } .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background: #769841; outline: 0; color: #FFFFFF; } /*** arrows **/ .sf-menu a.sf-with-ul { padding-right: 2.25em; min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */ } .sf-sub-indicator { position: absolute; display: block; right: .75em; top: 1.05em; /* IE6 only */ width: 10px; height: 10px; text-indent: -999em; overflow: hidden; background: url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */ } a > .sf-sub-indicator { /* give all except IE6 the correct values */ top: .8em; background-position: 0 -100px; /* use translucent arrow for modern browsers*/ } /* apply hovers to modern browsers */ a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator { background-position: -10px -100px; /* arrow hovers for modern browsers*/ } /* point right for anchors in subs */ .sf-menu ul .sf-sub-indicator { background-position: -10px 0; } .sf-menu ul a > .sf-sub-indicator { background-position: 0 0; } /* apply hovers to modern browsers */ .sf-menu ul a:focus > .sf-sub-indicator, .sf-menu ul a:hover > .sf-sub-indicator, .sf-menu ul a:active > .sf-sub-indicator, .sf-menu ul li:hover > a > .sf-sub-indicator, .sf-menu ul li.sfHover > a > .sf-sub-indicator { background-position: -10px 0; /* arrow hovers for modern browsers*/ } I had to make a hover menu that was full CSS, and i couldn't make it work in IE, because of the old issue of IE not supporting :hover for anything else but the a tag. So i modded some example i found on the internet that was using js for ie, attached through behaviours, in the css file. The url is this. The menu works fine in mozilla but it has a problem in IE, and i think it's css, not js. If you hover over the Products button and then over one of the items that appear, the item right under it will get a few pixels higer, which causes the whole menu to move down as you movewr over those ites. And it's annoying. Can some one give me a hint please? I've tried all sorts of things, adding empty level 3 menus to the items that don't need it, but still nothing... Thanks in advance... Hi Everyone, I am working on redesigning a website in WordPress that I had previously built in HTML. Most things seems to be working well, except some styling of some JavaScript. The script has a special hover image, but in the new site I can't get the descriptions to be inside the hover box. You can see an example of the old, correctly working site he e3ncw [dot] com And the new, broken one he e3ncw [dot] com /page/1 If you hover over any button in the sidebar you'll see the problem. I'm using float:left on both the image and the description, but can't get it to work. Here's the current CSS I'm using: Code: .sb-blocks li em {
background: url(images/hover.png) no-repeat center top;
width: 350px;
height: 200px;
position: absolute;
top: 0px;
left: -100px;
padding: 5px 0 0;
font-style: normal;
z-index: 2;
display: none;
}
p.url {
font-weight: bold;
color: #a82125;
text-align: center;
font-size: 1em;
line-height: .5em;
}
.sb-blocks em img {
float: left;
padding: 5px 5px 15px 15px;
}
.sb-blocks p.description {
color: #a82125;
float: left;
width: 275px;
}
Any help is greatly appreciated. Thanks! check out parrisstudios(dot)com/mirage_framing In firefox it is normal, but in ie 6 when you hover over one of the links it gives you a weird drop down box type thing, but it wont go away until you refresh. I wan't to say it is like that peek-a-boo bug but backwards.... Code: ul{
margin: 0;
padding: 0;
list-style:none;
width: 410px;
float:left;
position:relative;
line-height:20px;
}
ul a{
line-height:10px;
float:left;
display:block;
padding: 0 12px;
text-decoration:none;
color: #C0AEA0;
position:relative;
}
li a:hover {
margin: 0;
padding: 0 12px;
float:left;
position:relative;
background-color:#EADED2;
line-height:20px;
}
ul li{
float: left;
background-color:#ffffff;
position:relative;
line-height:20px;
}
li a{
display:block;
text-decoration:none;
color: #C0AEA0;
float:left;
position:relative;
line-height:20px;
}
THANKS! I am using a CSS hover image enlarge which when you hover over a thumbnail, it then shows the large version. It works fine in IE7 onwards, but in IE6 the enlarged image is now showing at all when you hover over the thumbnail. Can anyone help? here is the HTML Code: <div id="side-b"> <div class="news-box-container"> <div class="sidebar"><img src="includes/side2barsmall.jpg" alt="" /></div> <div class="news-box"> <div class="staffpics"> <a class="p1" href="#" title=""><img src="includes/staffone.jpg" title="" alt="" /> <img class="large" src="includes/staffonelarge.jpg" title="" alt="" /></a> </div><!-- end staffpics --> </div><!-- end news-box --> <div class="sidebar"><img src="includes/side2barsmall.jpg" alt="" /></div> </div><!-- end news-box-container --> </div><!-- end side b --> here is the CSS Code: .staffpics {
width:96px;
}
.staffpics a.p1, a.p1:visited {
width:96px; height:78px; border:0px none;
}
.staffpics a img {
border:0px none;
}
.staffpics a.p1:hover {
color:#000;
}
.staffpics a .large {
position:absolute; width:0; height:0; border:0px none; top:0; left:0; padding:0px
}
.staffpics a.p1:hover .large {
position:absolute; top:125px; left:400px; width:300px; height:243px; border:10px solid #FABA32; padding:0px;
}
Newb Disclaimer: I know a little about CSS, but I'm just now making the conversion over from tables. The answer may be obvious, but I still can't see it. I have a list that I'm trying to get to render correctly between browsers. I keep running into the same problem. First of all, the link is: frontlinescreative.com/aljc2/indexCSS.html In the top right column I've got a list of three menu items, with subnavigation underneath. When you hover over the list item, the colors change, and all is well with the world. This works cross-browser. My problem is positioning. In Firefox and IE the list is flush against the blue box at left. In Safari and Opera it's about 30 some-odd pixels shifted to the right. Any ideas on where I've gone wrong? Hi Guys, Firstly, I'd like to apologise for posting this, this is my first css site that I'm working on and I've just noticed some problems that have appeared with testing with IE6 (I normally use Firefox and last time I tested in IE 6 things were working ok!) The problem is that my Block hover doesn't now seem to work and neither does my image border hover either. On top of that my positioning for 2 small boxes has suddenly gone a little awol too! Site is fine in Firefox, see here However when I check this in IE, the hovers and a couple of boxes have really messed up and I've spent hours with this, but not getting anywhere, so any assistance would be greatfully received! My style sheet is here Again, any pointers would be much appreciated Best regards Jon P.S I've been using Firebug with much success for Firefox, but not sure what to use for IE, any suggestions? Thanks for taking the time to read my question. I am having problems with my #MenuItem a:hover in IE. I really don't know why. It refers to the left nav on the page. In IE the links at the bottm of the left nav list act funny. Place the mouse around the area between the text (the line separating the two boxes) It seems that IE is not sure which one to activate for the hover event. If that makes no sense, just move you mouse over all the links in the left nav from top to bottom and hopefully you'll see what I mean. It works fine in Fire Fox.... ya I know typical. Any suggestions? Brad Pierced is my band name. I don't have any other URL to post this under for people to view. http://www.pierced.ca/FeedProductionRecordsHelp.htm http://www.pierced.ca/FeedProductionRecordsHelp.css |
|||||||