|
CSS - Javascript Rollover To Change Background Color - Quirky In Ie 6 + 7
Hello all,
Working on this page: http://gatehouse.graffetto.com/rollover.html When you roll over a story, the background color changes with javascript and CSS. However, in IE 6 and 7, you have to rollover the text in order for the background color to change. Mac FF, Mac Safari, and PC FF change background color when mousing over the containing div. Any ideas how to rig this up for IE? Here's the simple version of the code: Code: <div class="story" onmouseover="this.style.background = '#E8E4D7'; style.cursor = 'pointer'" onmouseout="this.style.background = '#ffffff'; style.cursor = 'default';"> <div class="storyTitle"><a href="VAR_LINK_TO_STORY">Seniors lose a friend</a></div> <div class="storyByline">1/7/07 - By Max Bowen</div> <div class="storyTeaser">Flags at town hall were flown at half-staff to mark the passing of Beverly Borges, the town's council on aging director, who often went above and beyond in her work with Rockland's seniors.</div> </div> any help would be great, thanks! Similar TutorialsHi Everyone, I'm new to Dev Shed so appologises if I miss anything vital! I'm also quite new to CSS, but do have some experience. I am trying to develop a rounded corners, drop shadow solution for a header: Here it is so far, now the problem occurs when I have added the navigation bar, if you roll the mouse over any of the nav links a small chunk of border appears on the bottom right of the header?? The hoover div tag is: a.nav:hover {background-color: #99CDFF;} The nav images are gifs that do not change on rollover just the back ground color. If I remove the hover div tag the strange chunk of border does not occur. Can anyone advise why this may be happening? Or what I could do to improve this? I am having this issue in IE6.0 firefox 2.0 seems fine. I appreciate any help! Thanks in advance, Jon I am using a Wordpress template called Arthemia Premium. I want to change the background color in the headline section, but nothing "sticks" when I change the hex color codes in the style.css. Tell me what to post here and I will. Thanks BTW I have very basic knowledge of CSS I'm trying to create a hover effect that changes the background color behind a link, but instead of ending with the text, the color change extends to the width of the div. It's hard to explain, so here's an example: checkout the sidebar at pastemagazine.com. I've tried dissecting their source code, but they have about 5 different stylesheets and it's really hard to follow. As far as I can tell, this is what makes the hover effect and I just can't figure out how they make the background color change extend beyond the text. I have my links in a ul just as they do and they don't seem to be doing anything else special. Code: #sect1 ul.stories a:hover{
background-color:#d9f7ff;
color: #71808F;
}
Thanks! cae I have these two areas. Code:
.MenuItem {
color:#FFFFFF;
font-size:12px;
background-color:#CC0000;
font-weight:bold;
height:18px;
padding-top:5px;
padding-bottom:5px;
border-top:0px solid #FF0000;
border-left:2px solid #FF0000;
border-bottom:2px solid #FF0000;
border-right:2px solid #FF0000;
}
.MenuItemTop {
color:#FFFFFF;
font-size:12px;
background-color:#CC0000;
font-weight:bold;
height:18px;
padding-top:5px;
padding-bottom:5px;
border-top:2px solid #FF0000;
border-left:2px solid #FF0000;
border-bottom:2px solid #FF0000;
border-right:2px solid #FF0000;
}
which refer to the left nav. My code only changes the color behind the text, not the entire area (box) behind the text. Code:
.MenuItemTop a:hover, .MenuItem a:hover {
color:#FFFFFF;
text-decoration:underline;
font-size:12px;
background-color:#000000;
}
Any ideas why? example at : http://www.pierced.ca/FeedProductionRecordsHelp.htm Brad hey guys, this has been bothering me for several days and really don't think theres a solution to it, but I might as well post it up to see if anyone else has a similar problem. the problem is when using CSS to change background colors on rollover, it is being slow in IE, but works perfectly fine in firefox. this, however, only happens when I have an extra div beneath the rollovers. i can't really explain it well, so I will show you what i mean. on the following page of a website I am developing you there are rollover effects on the right hand side for 'galleries' 'site statistics' and even the div below that. the link is: http://rollinlow54.com/galleries/ now, in firefox, the background change is instant, no lag whatsoever. in IE, there is a good bit of lag, driving me crazy. so i played around with it forever, and realized that the only way to prevent IE from lagging is to remove the div with 'popular galleries'. so i did that he http://rollinlow54.com/fixme.php Here is the CSS for the code in the first page: Code: #links a
{
margin-left: 8px;
margin-right: 8px;
margin-bottom: 0px;
margin-top: 4px;
padding: 3px;
text-decoration: none;
width: 170px;
float: left;
background-color: #3A628A;
color: white;
font-family: arial, verdana, sans serif;
font-size: 11px;
}
#links a:hover
{
text-decoration: none;
background: #0A2F54;
}
that controls the 'galleries' 'site statistics' and other main links, and there are similar controls for the 'popular galleries' div beneath that. here is the HTML: Code: <div id="links">
<a href="http://rollinlow54.com/">galleries (18)</a>
<a href="http://rollinlow54.com/">site statistics</a>
<a href="http://rollinlow54.com/">download my resume (pdf)</a>
<a href="http://rollinlow54.com/">contact information</a>
<a href="http://rollinlow54.com/">visit company site</a>
</div>
there are similar HTML controls for the 'popular galleries' links as well. is there anyway around this?? Hi All I wonder if someone can help me, I would like to change background and foreground colour of two <td>'s that are in One <tr> . This is the tricky part, I want it so that when I Hover on <tr> one <td>'s Foreground colour is changed and other <td>'s Background colour. To me that seem impossible in css alone and if that is not the case can someone please enlighten me. Thanks Hi, I have 5 input textbox in my page. I want to change the background color of one input textbox to red. How to change the color of the input box to red? Thank you Thanks for taking the time to read my question. I have a <li> that has a background-color and border. I would like it to become transparent when the user hovers over it. In my a:hover I have background-color: transparent; but that is not working. Any ideas? Thanks, Brad I would like to have the background-color of a complete table row changed when I move the mouse over it. Any ideas how to realize this within a CSS file (not with javascript) Thanks in advance Nevermind, fixed. Changed Pixels into Percentages. Delete thread. i was able to have the image button links hover and change colors using 2 different image buttons, however i came to realize that i want to have the hovered image stay active once the button is clicked. can someone assist me with this? this is what my code looks like: Code:
a:hover#index {
background: url("./images/home-red.png") 0 0 no-repeat;
}
a:hover#howto {
background: url("./images/howtobuild-red.png") 0 0 no-repeat;
}
a:hover#installation {
background: url("./images/installation-red.png") 0 0 no-repeat;
}
a:hover#design {
background: url("./images/dande-red.png") 0 0 no-repeat;
}
a:hover#dean {
background: url("./images/deansblog-red.png") 0 0 no-repeat;
}
a:hover#forum {
background: url("./images/userforum-red.png") 0 0 no-repeat;
}
a:hover#plan {
background: url("./images/planbike-red.png") 0 0 no-repeat;
}
a:hover#search {
background: url("./images/search-red.png") 0 0 no-repeat;
}
a#index, a#design, a#howto, a#installation, a#dean, a#forum, a#plan, a#search {
width: 86px;
height: 27px;
float: left;
margin-top:6px;
position:relative;
left: 115px;
}
a#index {
background: url("./images/home-grey.png");
}
a#design {
background: url("./images/dande-grey.png");
}
a#howto {
background: url("./images/howtobuild-grey.png");
}
a#installation {
background: url("./images/installation-grey.png");
}
a#dean {
background: url("./images/deansblog-grey.png");
}
a#forum {
background: url("./images/userforum-grey.png");
}
a#plan {
background: url("./images/planbike-grey.png");
}
a#search {
background: url("./images/search-grey.png");
}
In the HTML below I use CSS-code of Bonrouge (see http://bonrouge.com/br.php?page=rollover2) to make a rollover for an image. I would like to change the code so that onMouseOut the image doesn't change back to the original one but remains the rollover image. I have tried a lot of things but cannot get it working. Could someone help? This is the code I use now: Code: <html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<style type="text/css"><!--
/** rollover 2 (pure css) **/
#rollover2 a {text-decoration:none; display:block; height:100%; }
* html #rollover2 a {width:100%; }
#rollover2 {list-style-type:none; width:150px; margin:auto; padding:0;}
#rollover2 li {float:left; height:145px; width:145px; }
#rollover2 li#a a{background-image:url(http://www.deacademievoorinnovatieftrainen.nl/images/acteuropt.jpg);}
#rollover2 li#a a:hover {background-image:url(http://www.deacademievoorinnovatieftrainen.nl/images/kopmetprisma3opt.jpg); }
#rollover2 li#b a{background-image:url(http://www.deacademievoorinnovatieftrainen.nl/images/goudvisbovenopt.jpg); }
#rollover2 li#b a:hover {background-image:url(http://www.deacademievoorinnovatieftrainen.nl/images/denk2opt.jpg); }
#rollover2 a img {border:0; width:0; height:1px; margin-top:-1px; font-size:0; overflow:hidden; }
-->
</style>
</head>
<body>
<div id="cssrollovers">
<h1>Pure CSS Rollovers</h1>
On hover, the background-image changes.
<br>The :hover images don't preload, so we can fix that by putting them in the links but styled so that they are invisible.
<br><br>
<ul id="rollover2" class="cfix">
<li id="a"><a href="#"><img src="http://www.deacademievoorinnovatieftrainen.nl/images/denk1opt.jpg" width="30px"; height="30px" border="0" /></a></li>
<li id="b"><a href="#"><img src="http://www.deacademievoorinnovatieftrainen.nl/images/johnhopt.jpg" width="30px"; height="30px" border="0"/></a></li>
</ul>
</div>
</body>
</html>
I developed a site years ago using JavaScript for a roll-over function. Now the client is having issues with customers not being able to use the roll-over function because they have Java Script disabled. Is it possible to do this using css? For an example, see this page: chellatextiles.com/Textfab/cocotweed.html Rollover a color thumbnail and it replaces the fabric details. There are about 500 thumbnails through the site that I would need to change. I have a button which is drawn using css background-image and it has a hover effect using css a:hover. I also need to have a click state for this button, so that each time the button is clicked it switches between two different states (4 states total). Is this possible? I'm assuming this will probably require JavaScript which I have little experience. Thanks in advance for any help! I would like to create a text rollover that not only changes color but also changes the word being displayed. For example: the link on the screen would first appear to be red and would read "A". When rolled over, the link would turn black and the would read "ABOUT". I have read about transparencies and visibility, but am not sure how to impliment it. I want to keep the coding as simple as possible. Nothing is worse than too much code! Thanks. Hey guys, I'm hoping what I need to do involves only CSS (though, it wouldn't shock me if I needed a lot more!) Anyways, the basic thing I'm doing is a table that hold lots of numbers. I'm creating a "times table" - which looks roughly something like this: ......1 2 3 //top row (multiples) 1.....1 2 3 2.....2 4 6 3.....3 6 9 Now, when you rollover, let's say, the '6' - the TD background color for the '6', left '2' and top '3' would change to a different color (bolded in this example). This would work the same way for every other number as well, which involves overlapping classes. I can only get one rollover working, with simple 'hover' commands. I've search for an answer for hours, to no avail. any suggestions? And here's a more "code specific" example of the table: <table> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>1</td><td>1</td><td>2</td><td>3</td> </tr> <tr> <td>2</td><td>2</td><td>4</td><td>6</td> </tr> <tr> <td>3</td><td>3</td><td>6</td><td>9</td> </tr> </table> Thanks so much guys! discovered whilst working on asp where i use '' for comments and tried to comment out a line in the css file the same way... this should technically work by breaking the whitespace and create an invalid rule but IE yet again responded differently... Code: ""item:attribute; ''item:attribute; //item:attribute; ignored by opera 7.54 netscap 7.02 firefox 1.0.4 read by IE 5.01 IE 5.5 IE 6.0 "item:attribute;" 'item:attribute;' ignored by all read by IE 5.01 interested to see how the mac browsers respond but it looks like a better IE5.0 inline filter than Code: _item /**/: /**/attribute; ! 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 Hey peeps, having trouble getting background images to display rollOvers for a <td> tag in IE (pc and mac). Works fine in firefox and safari. Heres me code: CSS: Code: .house_menu_cell {
background-image: url(../images/nav/homes/glo_house_nav_bg_0.gif); cursor:pointer;
}
.house_menu_cell:hover {
background-image: url(../images/nav/homes/glo_house_nav_bg_1.gif); cursor:pointer;
}
HTML: Code: <td class="house_menu_cell"> Any help would be great. Ive spent about an hour trauling the net with no luck! Cheers mish Hi guys. This is my first post and I'm relatively new to CSS so I apologize if my post reeks of newcomer! I'm currently setting up my site with an external stylesheet. Everything has been coming along fine until I decided to setup a menu with css rollover image links. For some reason I simply cannot get the image to appear whatsoever. Everything else is working (such as position and size (I have temporarily given it a border for locational purposes)) within the code but the image just does not appear. I have looked this up for some time now and cannot come to a resolution. I have tried altering the code, changing paths, etc. etc. But I can't get it. Would really appreciate some help. Here is the rollover portion of my css: Code: #rollhome
{
display:block;
float:left;
margin: 0 auto;
width:122px;
height:50px;
text-decoration: none;
background-image:url("images/topmenu_home.png") no-repeat 0 0;
border:#000000 solid 2px;
text-indent:-99999px;
z-index:20;
}
#rollhome:link, #rollhome:visited
{
background-position: 0;
}
#rollhome:hover
{
background-position: 0 -50px;
}
And here is the rollover portion of my html: Code: <div id="rollovers"> <a id="rollhome" href="#"title="rollhome">Home</a>< /div> Any help would be most appreciated! |
|||||||