|
CSS - Suckerfish Drop-down Menu, Image Replacement
So I'm a student working on my first real project. I've done Suckerfish drop-downs before, but I'm having trouble doing them with graphic text instead of system text. The image replacement works fine on the first level, but the nested li's just repeat the image of the main li.
For example, the main nav item with the drop-down is "Our Coffee". In the drop-down menu instead of having the different images for the corresponding links, "Our Coffee" is repeated. Here's a selection of my code where I think the problem is happening: Code: <div id="nav">
<ul id="dd">
<li id="hm"><a href="menu.html">Menu</a></li>
<li id="au"><a href="about_us.html">About Us</a></li>
<li id="oc"><a href="#">Our Coffee</a>
<ul>
<li id="oc_dd_ko"><a href="oc_kona.html">Kona</a></li>
<li id="oc_dd_ma"><a href="oc_maui.html">Maui</a></li>
<li id="oc_dd_ka"><a href="oc_kauai.html">Kauai</a></li>
</ul>
</li>
<li id="os"><a href="os_hy.html">Our Stores</a></li>
<li id="ols"><a href="online_store.html">Online Store</a></li>
<li id="oct"><a href="our_culture.html">Our Culture</a></li>
</ul>
</div>
Code:
#nav ul li ul li a {
display: block;
height: 0px;
overflow: hidden;
}
#dd li#oc a {
display: block;
width: 95px;
}
#dd li#oc {
float: left;
width: 95px;
}
#dd li#oc ul {
position: absolute;
width: 95px;
left: -9999px;
}
#dd li#oc:hover ul {
left: auto;
}
#dd li#oc:hover ul, #dd li.sfhover ul {
left: auto;
}
li#oc ul li a {
height: 0px;
display: block;
overflow: hidden;
}
#oc_dd_ko a {
background: url(../images/oc_ddnav-01_lo.gif) no-repeat;
padding-top: 13px;
width: 58px;
}
#oc_dd_ko a:hover {
background: url(../images/oc_ddnav-01_hi.gif) no-repeat;
padding-top: 13px;
width: 58px;
}
#oc_dd_ma a {
background: url(../images/oc_ddnav-02_lo.gif) no-repeat;
padding-top: 15px;
width: 58px;
}
#oc_dd_ma a:hover {
background: url(../images/oc_ddnav-02_hi.gif) no-repeat;
padding-top: 15px;
width: 58px;
}
#oc_dd_ka a {
background: url(../images/oc_ddnav-03_lo.gif) no-repeat;
padding-top: 16px;
width: 58px;
}
#oc_dd_ka a:hover {
background: url(../images/oc_ddnav-03_hi.gif) no-repeat;
padding-top: 16px;
width: 58px;
}
#dd, #dd ul {
padding: 0;
margin: 0;
list-style: none;
}
Any suggestions would be appreciated. Similar Tutorialshey guys, im not the greatest with css and html but i do it for fun to try and teach myself. Anyways I have a css drop menu set up on my site and I am having a problem with the width sizes in the actual drop down. The text length is of various sizes in the drop down. (some are long single words, some are 2 words etc) and I am using a width size of 11em which in all browsers using a standard screen res shows up fine. but if somebody uses a smaller screen res the text starts wrapping. Where you get the 2 word lines split into 2 lines. and then If i increase the size sometimes I get separate <li>'s on the same line. Its pretty frustrating. What I want to do is be able to increase the width size of the drop menu and even have all kinds of extra padding on the right if I want but without <li>'s spilling onto the next line or without <li>'s sitting on the same line cause its too big. Here is my CSS for the drop. Code: #nav li ul {
background: #FCDFFF;
background-image: url('images/background.png');
border-style: ridge;
border-width: 5px;
border-color: #000000;
margin-top: 0px;
position: absolute;
font-size: 95%;
width: 11em;
left: -999em;
line-height: 2;
z-index: 999;
}
anybody know how I can do what Im looking for? Thanks in advance! Hi everyone, So I'm implementing the suckerfish dropdown into one of my sites. I'm having a bit of trouble getting something to work correctly. I did most of the grunt work on getting it customized, but I was hoping someone could help me figure out a few minor details. The version of the drop down I had to make has images for the top level (main level) of the navigation, and each image is a unique size. In doing so, as well as adding padding to the second level li for aesthetic purposes, in IE the menu doesn't drop but floats over to the right. I'm not sure why this is. Also, I know this may be more fit for the JavaScript area, and I'll repost there if necessary, but I'd like to keep the top level image in the "over" state while the cursor is on that 2nd level dropdown. Is that possible? I'll be anxious for your feedback, this has been driving me crazy all day. Here's the code. XHTML: Code: <div id="nav"> <ul> <li class="one"><a href="#"><img src="images/home.gif" /></a></li> <li class="two"><a href="#" onmouseover="document.two.src='images/nav-our_products_on.gif';" onmouseout="document.two.src='images/nav-our_products_off.gif';"><img name="two" src="images/nav-our_products_off.gif" /></a> <ul> <li><a href="#">sublink 1</li></a> <li><a href="#">sublink 2</li></a> </ul> </li> </ul> </div> CSS Code:
#nav {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #67670f;
}
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav ul li.one {
float: left;
margin: 0;
padding: 0;
width: 51px;
list-style: none;
}
#nav ul li.one img {
border: 0;
}
#nav ul li.two {
float: left;
margin: 0;
padding: 0;
width: 118px;
list-style: none;
position: relative;
}
#nav ul li.two img {
border: 0;
}
/* - begin level 2 - */
#nav ul li ul {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
left: -999em;
border: solid 1px #ddd;
width: 118px;
voice-family: "\"}\"";
voice-family:inherit;
width: 116px;
}
#nav ul li ul li a {
display: block;
padding: 3px 0 3px 3px;
margin: 0;
color: #67670f;
text-decoration: none;
width: 118px;
voice-family: "\"}\"";
voice-family:inherit;
width: 113px;
}
#nav ul li.two ul li a:hover {
color: #52432c;
background-color: #e4e2db;
text-decoration: none;
}
#nav ul li:hover ul, #nav ul li.sfhover ul {
left: auto;
}
JavaScript Code:
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
It seems that in IE something isn't being cleared, as it almost appears that the second level is in place directly next to the top level link that is activating the dropdown menu. I look forward to your insight! Thanks! -Brian This method is just awesome, but how on earch does someone get the font color to stay on its hover state? http://htmldog.com/articles/suckerfish/dropdowns/ This should be a sticky and lets solve this problem together. This question is always asked but never answered. Hi all, The following CSS and HTML work fine in Mozilla, Netscape and Firefox. It can be viewed in action at: http://www.sirfragalot.com/wikindx2/ (choose the 'chocolate vanilla fudge sundae' from the Wikindx/preferences menu.) I have two questions: 1/ I'm aware that Konqueror does not support CSS drop-downs. It doesn't concern me as I've programmed a way around it. However, the menu items occasionally stack up vertically on the left side of the browser window: they're supposed to be horizontal. This stacking and subsequent un-stacking seems to be quite random. What's the fix? 2/ In IE, the drop-downs are rendered from the bottom right corner of the originating top menu item (they should be directly underneath). What is the fix? HTML CODE: 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" xml:lang="en" lang="en">
<!-- begin header template (+ 3 lines up!) -->
<head>
<title>WIKINDX</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="chocolate.css" type="text/css" />
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
</head>
<body>
<!-- begin menue template -->
<table class="menuTable" border="0" cellspacing="0" cellpadding="0" align="left">
<tr class="" align="left" valign="top">
<td class="" align="right" valign="top">
<ul id="nav">
<li><a class="menuLi" href="index.php?action=frontNoMenu">Wikindx</a>
<ul>
<li><a class="menu" href="index.php">Home</a></li>
<li><a class="menu" href="index.php?action=preferencesDisplay">Preferences</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=fileNoMenu">File</a>
<ul>
<li><a class="menu" href="index.php?action=exportRtf">Export RTF</a></li>
<li><a class="menu" href="index.php?action=exportBibtex">Export BibTeX</a></li>
<li><a class="menu" href="index.php?action=showFiles">Show Files</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=editNoMenu">Edit</a>
<ul>
<li><a class="menu" href="index.php?action=editCreator">Creator</a></li>
<li><a class="menu" href="index.php?action=editJournal">Journal</a></li>
<li><a class="menu" href="index.php?action=editPublisher">Publisher</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=resourceNoMenu">Resources</a>
<ul>
<li><a class="menu" href="index.php?action=listDisplay">List</a></li>
<li><a class="menu" href="index.php?action=searchDisplay">Search</a></li>
<li><a class="menu" href="index.php?action=selectDisplay">Select</a></li>
<li><a class="menu" href="index.php?action=resourceNew">New</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=textNoMenu">Text</a>
<ul>
<li><a class="menu" href="index.php?action=allMusings">Musings</a></li>
<li><a class="menu" href="index.php?action=randomMusing">Random Musing</a></li>
<li><a class="menu" href="index.php?action=allParaphrases">Paraphrases</a></li>
<li><a class="menu" href="index.php?action=randomParaphrase">Random Paraphrase</a></li>
<li><a class="menu" href="index.php?action=allQuotes">Quotes</a></li>
<li><a class="menu" href="index.php?action=randomQuote">Random Quote</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=adminNoMenu">Admin</a>
<ul>
<li><a class="menu" href="index.php?action=superadminLogonDisplay">Logon</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=helpNoMenu">Help</a>
<ul>
<li><a class="menu" href="index.php?action=helpDisplay">Wikindx Help</a></li>
<li><a class="menu" href="index.php?action=aboutWikindx">About Wikindx</a></li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
<br />
<!-- end menu template -->
</body>
<!-- end footer template (+ 1 line down!) -->
</html>
CSS CODE: Code: body {
background : #74664a;
font-family : sans-serif;
font-size : 0.9em;
color : #f6eedf;
}
/* SuckerFish CSS drop down style */
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav a {
display: block;
width: 7em;
}
#nav li {
float: left;
width: 7em;
background : red;
}
#nav li ul {
position: absolute;
width: 7em;
left: -999em;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
/* End Suckerfish Style */
/* Standard links such as top menu links */
A:visited, A:link, A:active {
text-decoration : none;
color : #74664a;
background : #efd197;
border-left : 1px groove #f6eedf;
border-top : 1px groove #f6eedf;
border-right : 1px groove #f6eedf;
border-bottom : 1px groove #f6eedf;
font-size : 0.9em;
}
A:hover {
text-decoration : none;
background : #f6eedf;
color : #74664a;
border-left : 1px groove #f6eedf;
border-top : 1px groove #f6eedf;
border-right : 1px groove #f6eedf;
border-bottom : 1px groove #f6eedf;
font-size : 0.9em;
}
/* .menu = submenu links */
A.menu:visited, A.menu:link, A.menu:active {
text-decoration : none;
color : #74664a;
display : block;
border-bottom : 1px solid #f6eedf;
width : 6em;
background : #efd197;
font-size : 0.9em;
text-align : left;
}
A.menu:hover {
text-decoration : none;
background : #f6eedf;
display : block;
color : #74664a;
border-bottom : 1px solid #f6eedf;
width : 6em;
font-size : 0.9em;
text-align : left;
}
/* normal links and paging links */
A.link:visited, A.link:link, A.link:active, A.page:visited, A.page:link, A.page.active {
text-decoration : none;
color : red;
background : transparent;
border : none;
}
A.link:hover, A.page:hover {
text-decoration : none;
background : #f6eedf;
color : #74664a;
border : none;
border : none;
}
/* resource links for resource URLs */
A.rLink:visited, A.rLink:link, A.rLink:active {
text-decoration : none;
background : transparent;
color : #f6eedf;
border : none;
}
A.rLink:hover {
text-decoration : none;
background : #f6eedf;
color : #74664a;
border : none;
border : none;
}
/* image links */
A.imgLink:visited, A.imgLink:link, A.imgLink:active {
text-decoration : none;
background : transparent;
border : none;
}
A.imgLink:hover {
text-decoration : none;
background : transparent;
border : none;
}
/*****
* .titleTable: the table containing the title bar
*****/
.titleTable {
width : 90%;
}
/*****
* .menuTable: the table containing the drop-down menus
*****/
.menuTable {
margin : 0 0 0 5%;
}
/*****
* .menuLi: text-color in list items of the drop-down menus
*****/
.menuLi {
color : black;
}
/*****
* .mainTable: the table containing the main content of WIKINDX
*****/
.mainTable {
border : none;
width : 90%;
padding : 0.2em;
clear : both;
}
/*****
* redefine HTML headings - see /core/html/MISC.php
*****/
h1, h2, h3, h4 {
color : #f6eedf;
margin : 0 0 1em 0;
}
/*****
* .footerFooter: footer information at end of script - part of a table
*****/
.footerTable {
font-size : 0.6em;
color : #f6eedf;
width : 90%;
}
/*****
* .error: <p>error messages</p>
*****/
.error {
background : red;
color : black;
}
/*****
* .success: <p>success messages</p>
*****/
.success {
background : #33ff00;
color : black;
}
/*****
* .small: small text
*****/
.small, .hint {
font-size : 0.8em;
}
/*****
* .hint: text hints given to provide further information usually on form input. Often used in conjunction
* with .small and usually the class of <span>....</span>
*****/
.hint {
color : #f6eedf;
}
/*****
* alternate background colours and font sizes for <td>resources</td> in a bibliographic list
*****/
.alternate1 {
/* background : #efd197; */
/* background : #f8efdf; */
border : 2px groove #583b04;
font-size : 0.9em;
color : #f6eedf;
}
.alternate2 {
/* background : #ede5d8; */
/* background : #f6eedf; */
border : 2px groove #583b04;
font-size : 0.9em;
color : #f6eedf;
}
/*****
* .highlight: highlight <span>search terms</span> in text
*****/
.highlight {
color : #583b04;
background : yellow;
}
/*****
* .required: highlighting for <span>required</span> form input elements (asterisk).
*****/
.required {
color : red;
}
I'm trying to use suckerfish style drop downs, based on CSS with javascript only for an Internet Explorer hack. It's working fine for a single horizontal row of menus, however I wanted to setup a few rows of other menus underneath the first row. The problem is that the dropdown goes underneath the menus under it and I can't figure out how to fix it. This is an example of the problem. Any suggestions? I've messed with this for a couple days now. I can't seem to get it to do what I need it to. Any help would be much appreciated I need to add a 3rd column to the menu My code between the body and /body tags I marked the place I need the 3rd column with: *** ( Need to add a 3rd column for the filters ) *** Code: <ul id="nav"> <li><a href="#">Home</a> </li> <li><a href="#">Maps</a> </li> <li><a href="history.php">History</a> </li> <li><a href="#">Contractors We Recommend</a> </li> <li><a href="#">Products We Recommend</a> <ul> <li><a href="#">Pool Accessories</a> <ul> <li><a href="#">Pool Accessories</a></li> <li><a href="#">Pool Accessories</a></li> <li><a href="#">Pool Accessories</a></li> <li><a href="#">Pool Accessories</a></li> <li><a href="#">Pool Accessories</a></li> </ul> </li> <li><a href="#">Pool Chemicals</a> <ul> <li><a href="#">Pool Chemicals</a></li> <li><a href="#">Pool Chemicals</a></li> <li><a href="#">Pool Chemicals</a></li> <li><a href="#">Pool Chemicals</a></li> <li><a href="#">Pool Chemicals</a></li> </ul> </li> <li><a href="#">Pool Filters</a> <ul> <li><a href="#">Pool Filters</a></li> <li><a href="#">Pool Filters</a></li> <li><a href="#">Pool Filters</a></li> <li><a href="#">Pool Filters</a></li> <li><a href="#">Pool Filters</a></li> </ul> </li> *** ( Need to add a 3rd column for the filters ) *** <li><a href="#">Pool Heaters</a> <ul> <li><a href="#">Hayward</a></li> <li><a href="#">Pentair</a></li> <li><a href="#">Sta-Rite</a></li> </ul> </li> <li><a href="#">Pool Motors</a> <ul> <li><a href="#">Pool Motors</a></li> </ul> </li> <li><a href="#">Pool Sweeps</a> <ul> <li><a href="#">Hayward</a></li> <li><a href="#">Pentair</a></li> <li><a href="#">Sta-Rite</a></li> </ul> </li> <div id="content"> </div> Thanks for any help! So I tried this popular drop-down menu technique and is all good except that the second-level menu links line up beside the top-level headers in IE6 instead of, well, dropping down (which thankfully does happen in FF). This would be very confusing for visitors trying to navigate! I have seen this problem described on forums and blogs but not found a solution. The example page at HTML Dog displays properly in IE6, which offers no insights . . . See the page in question: hire.karenjeane.com/web/site2.php Thanks for any help! Hi, q1)I can't move the menu to the right without problems as i set a margin on #headlinks2 and the links get cluttered? Code:
#headlinks2 {
height:25px;
}
#headlinks2 a {
color:green;
display: block;
text-decoration:none;
width: 100px;
font-size:13pt;
padding-right:5px;
//margin-left:205px;
}
#headlinks2 a:hover {
color: white;
}
#headlinks2, #headlinks2 ul {
padding: 0;
margin: 0;
list-style: none;
}
#headlinks2 li {
float: left;
width: 100px;
}
#headlinks2 li ul {
position: absolute;
width: 100px;
left: -999em;
}
#headlinks2 li:hover ul {
left: auto;
}
#headlinks2 li:hover ul, #headlinks2 li.sfhover ul {
left: auto;
}
</style>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
//html
<div id="headlinks2">
<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a></li>
<li><a href="#">Tilefishes</a></li>
<li><a href="#">Bluefishes</a></li>
</ul>
</li>
<li><a href="#">Anabant</a>
<ul>
<li><a href="#">Climbing perches</a></li>
<li><a href="#">Labyrinthfishes</a></li>
<li><a href="#">mex</a></li>
</ul>
</li>
<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a></li>
<li><a href="#">Tilefishes</a></li>
<li><a href="#">Bluefishes</a></li>
</ul>
</li>
<li><a href="#">Anabant</a>
<ul>
<li><a href="#">Climbing perches</a></li>
<li><a href="#">Labyrinthfishes</a></li>
<li><a href="#">mex</a></li>
</ul>
</li>
<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a></li>
<li><a href="#">Tilefishes</a></li>
<li><a href="#">Bluefishes</a></li>
</ul>
</li>
<!-- etc. -->
</div>
Hey everyone. I'm trying to create a cool menu system for my site and I wanted it to be images only. Its he - http://www.how-to-pass.info/topf2.html I wanted this to have cool mouse over images, as well as displaying drop down menus. Unfortunately, there are two problems: 1. Mouseover images don't display 2. Drop down menu disapears when you move over the menus. Can anyone tell me how I can get this to work in a simple way? I dont much hardly anything about style sheets and javascript etc. Many Thanks. I was working on a menu following the suckerfish tutorial at Alist Apart and I've got it working in FF but not IE6. Big surprise. There's 2 issues with IE 6: 1. The menu is sitting lower in IE than in FF. 2. The dropdowns aren't working in IE at all. I've applied the js hack and it's still not working. I can't find what I'm missing but I know it's there somewhere. Here's the url: menu Please help. Thanks. Brad Hi I hope this is going to be a simple question!! I have used the suckerfish menu and all I would like to do is have the menu in the center of the page with a blue border extending from the sides of the menu to the edge of the page. The page can be viewed on http://uk.geocities.com/g_foxon/example1.htm cheers Wistar I'm trying to wrap my brain around image replacement (Learning CSS ATM) and Just not quite getting it I've made a design and begun some of the coding at http://www.psyberarts.com/work/prism The nav bar at the top is supposed to be an image replacement on hover. the image is at http://www.psyberarts.com/work/prism/images/selector.gif Here is the code: css Code: Original - css Code #nav li a:hover { background: url("../images/selector.gif") no-repeat; overflow: visible; color: #fff; }
#nav li a:hover {
Now, the image is supposed to overflow the div on the bottom, but for some reason, It just isn't working. Help? Dear clever CSSers I am currently changing my flyout menu from something rather complex, to the Suckerfish version. I have one problem: I have been using some mouseover tooltip-like information boxes giving extra details of the contents of a link, by having a div within the text of the hyperlink, to come visible when hovered. It has worked very well in my old version. Here's my test page In the new version, there are two lines of CSS allowing the popup to open, which is also enclosed in a balloon-style info graphic, actually in two halves so that it can open like a clamshell if there is extra text in there, or a user has a larger than normal font setting: Code: #nav a span {visibility:hidden;position:absolute;top:-120px;left:175px;background: url(http://www.internetevangelismday.com/images/balloontop.png) no-repeat transparent top left;width:196px;height:105px;line-height:1.2em;text-align:left;word-wrap:break-word;text-wrap:normal;white-space:normal;padding:0px;} #nav a:hover span {visibility:visible;z-index:9999;min-height:130px;}
This CSS does allow the popup to appear, but unfortunately it positions each popup at the same position on the page. I would prefer it that they appeared with the 'point' of the balloon pointing at the relavent link. You can see that if you hover '2nd level here', and then 'page 1', or 'page 2' or 'another page', the info balloon appears in exactly the same place on the page. Changing the positioning from position absolute to position relative causes the popup to appear in about the correct position, but it also expands the link area on the menu itself to a huge blank area and misses off the balloontop.png graphic from the popup, which I presume is staying inserted, hidden, within the menu item and causing it to expand. Thanks for any ideas on this. BTW, the javascript is a neat one that repositions submenus where necessary so they can't vanish below the bottom of the page. Best wishes Tony Hi there, I'm playing around with a menu that is based on the 'suckerfish' method and basically, I am trying to change the background colour of one of the menu options. The problem is, I can't seem to do this in isolation - i.e. without messing up the other items in the menu. I've tried applying a background image to the <li> item, with no joy and I've also tried creating a separate div layer for this one option - again with no joy. **EDIT** Just worked out how to do this.... All I did was add [CODE]id="selected" I'm using the following method for replacing the h1's with images. The problem is that in IE7 the margins above and below the header image seems to be ignored. It works fine in Firefox and Safari. I can't figure this one out. Any ideas? Thank you so much for your help! CSS: Code: .titleHome {
background-image: url("../images/home_title.gif");
background-repeat: no-repeat;
text-indent: -9999px;
margin-top: 16px;
margin-bottom: 20px;
width: 429px;
height: 42px }
HTML: Code: <h1 class="titleHome">Title Here</h1> Hi all, I'm really baffled as to why this code is not replacing the images on :hover in IE. Could anyone give me a pointer or two? Thank you so much if so. Stylesheet: Code:
#header {
margin-left: auto;
margin-right: auto;
position: relative;
width: 950px;
height: 100px;
background-image: url("img/headerimg.png");
background-repeat: no-repeat;
text-align: left;
}
#header a:hover {
border: none;
opacity: 0.0;
filter: alpha(opacity=0);
z-index: -1;
}
Web Page: Code: <div id="header"> <a href="#"><img src="img/image1.png" /></a><a href="#"><img src="img/image2.png" /></a><a href="#"><img src="img/image3.png" /></a> </div> Thanks. Hi, I've done a bit of reading around about image replacement in <h1> tags and I've only found articles from 2003, which refer to the traditional using display: none, visibility: hidden, or various methods of shifting the text outside the view of the screen by indenting, outdenting, or covering the text behind with the image. I was just wondering if there had been a consensus since 2003 on which was the best method or if anyone could point me to any further developments / better ideas that have appeared since then, as all of the ones I've seen suggested seem to have disadvantages of their own. Many thanks in advance for any help. Hi, I have a menu of made of images, each one is a link to a certain page. I want to replace the current image with a new slightly different image when the user hovers on it. I have 5 menu items so 10 images. My question is, can I do this in CSS without having to make a CSS rule for each image? Thanks in advance I'm having problems with a javascript rotating picture overlapping my drop down menu! I've fiddled around the the z-index but cant seem to get the drop down menu to drop ABOVE the picture. Everything is contained inside my <div id="wrapper"> and my layout scheme works like: Banner = top image ("Why won't my drop menu's show up") the image extends all the way down to the menu, and then the navigation is just words that go on top of the menu texture i've made. The only gif im using in the #nav is for the small yellow triangle for the roll over effect on the menu's. I get the white and menu bar on the sides because i just made the background a 40px height by 10px width image the sample and had it repeat in x only and then set background colour to that grey. My images are all inside the .main_view div id. Any help is appreciated! you can see my problem he htmltest2.weebly.com What do i need to do to fix this?! |
|||||||