Can’t figure out why the navigation doesn’t work properly in FF on this site. Notice you have to click well above the word to get it to work. The a space is right on the word in every other browser.
Can’t find “navlist” on CSS or anywhere.
for starters , the code is invalid. you are wrapping anchors around P tags and that’s a no-no
#navlist is not on the css…
however you could add
#navlist a, #navlist li { width:200px;height:40px;}
#navlist a {display:block;}
( then you could get rid of “width:200px;
height:40px;” in ALL your nav IDs ( such as:#etorcoletti a, #etorcoletti ,#atomczak, #atomczak a… etc…)
your HTML needs to be like this:
<li id=“bfisher”><a href=“/bfisher”>.</a></li>
and it should work
BUT actually I would suggest this :
#navlist a, #navlist li, #navlist a span { width:200px;height:40px;}
#navlist a, #navlist a span {display:block;}
#navlist a {position:relative}
#navlist a span {overflow:hidden;position:absolute; z-index:-1px; top:0; left:0}
<li id=“bfisher”><a href=“/bfisher”><span>bfisher</span></a></li>
this is so that IF user has CSS turned off or if he has images turned off ( I know, I know… it’s a gallery… why would he/she have images turned off… but lets be nice)… the user can at least navigate. Otherwise they will just see “.”… and that means NOTHING…
hope that helps a bit…
It does. Very much. I will give your suggestions a try.
For the record, I just took this client on. I didn’t design or code the site :-).
Thank you!
Before I upload, I just want to make sure I understand. Is this correct:
<ul id="navlist">
<li id="home"><a href="/index.php"><span>home</span></a></li>
<li id="artists"><a href="/artists.php"><span>artists</span></a></li>
<li id="bfisher"><a href="/bfisher"><span>bfisher</span></a></li>
<li id="bhammond"><a href="/bhammond"><span>bhammond</span></a></li>
<li id="jmitcham"><a href="/jmitcham"><span>jmitcham</span></a></li>
<li id="pmoser"><a href="/pmoser"><span>pmoser</span></a></li>
<li id="spierce"><a href="/spierce"><span>spierce</span></a></li>
<li id="lpoole"><a href="/lpoole"><span>lpoole</span></a></li>
<li id="jquine"><a href="/jquine"><span>jquine</span></a></li>
<li id="aropp"><a href="/aropp"><span>aropp</span></a></li>
<li id="pstark"><a href="/pstark"><span>pstark</span></a></li>
<li id="atomczak"><a href="/atomczak"><span>atomczak</span></a></li>
<li id="etorcoletti"><a href="/etorcoletti"><span>etorcoletti</span></a></li>
<li id="exhibit"><a href="/exhibit.php"><span>exhibit</span></a></li>
<!--
<li id="portraits"><a href="/cglenn/">.</a></li>
-->
<li id="about"><a href="/about.php"><span>about</span></a></li>
</ul>
#navlist a, #navlist li, #navlist a span { width:200px; height:40px;}
#navlist a, #navlist a span {display:block;}
#navlist a {position:relative}
#navlist a span {overflow:hidden; position:absolute; z-index:-1px; top:0; left:0}
#home a{
}
#home a:hover{
background: url(/images/home_r.jpg) no-repeat;
}
#home{
background: url(/images/home.jpg) no-repeat;
}
#artists a{
}
#artists a:hover{
background: url(/images/artists_r.jpg) no-repeat;
}
#artists{
background: url(/images/artists.jpg) no-repeat;
}
#exhibit a{
}
#exhibit a:hover{
background: url(/images/exhibit_r.jpg) no-repeat;
}
#exhibit{
background: url(/images/exhibit.jpg) no-repeat;
}
#portraits a{
}
#portraits a:hover{
background: url(/images/portraits_r.jpg) no-repeat;
}
#portraits{
background: url(/images/portraits.jpg) no-repeat;
}
#about a{
}
#about a:hover{
background: url(/images/about_r.jpg) no-repeat;
}
#about{
background: url(/images/about.jpg) no-repeat;
}
etc…
I got it to work. Only thing is that the Words between the spans were showing to the left/on top of the artist links so I had to remove them. Not sure why z-index:-1px; isn’t working?
And, I got the hover images to work okay for all buttons when the Artist tab on the left isn’t open listing all the artists. When it is open, the Exhibitions and About hover images displays below the active image in Chrome, Safari.
crap… thats wht happens when I try to book a flight, do work, cook lunch and hang out on sitepoint!
sorry it’s not z-index:-1px;.
it’s z-index:-1; thats why the word are showing…
he code assumes #sitenav to be a single list ( which is what you have ) … no sub lists. still… that shouldnt be…
As Saf and FF are compliant browsers I think there is an open tag someplace in your code… that might be causing the misposition. As a test for this assumption, move
<li id=“exhibit”><a href=“/exhibit.php”><span></span></a></li>
<li id=“about”><a href=“/about.php”><span></span></a></li>…
ABOVE <li id=“home”><a href=“/index.php”><span></span></a></li> in the code… if all button work then it’s very likely there is a SLIGHT typo somewhere after that snipped of code
Dah, I feel stupid too. I was staring right at it and didn’t see the “px”. Okay, it works in all browswers except IE. IE is still showing the names between the spans. There’s got to be an IE exception.
No, I tried the test of moving them above home and that didn’t fix it.
Yeah… IE is not a complaint browser and it has issues with z-index:-1; At the moment I cant remember the hack to solve that, but I know there is one…
worse comes to worse , just make the span invisible for IE. remember this is just so that you don’t have links w/o text in them… because people w/o CSS enabled still wants to READ your page.
==:)
Hi Karen,
You will be better off setting up some small sprites and using an image replacement method to keep live text hidden under the images.
Using negative z-index is problematic, just hook the BG images to another element and you will also have the hover state preloaded with the sprite.
I set up an example here:
http://www.css-lab.com/test/sculley-sprite/nav.html
With access to all the image tweaks here:
http://www.css-lab.com/test/sculley-sprite/
I really found it kinda awkward the way the anchor was set at 200px wide when the button was only about 110px wide. I think however you acquired the site from got a little lazy on that and just sliced out full width sections on the PDF. It really only needs the actual button since the top2.jpg is repeating down the left column, it will fill in the green and white colors.
I took this image:
Then cropped and seamed to get this sprite:
That will get your anchor to the actual size of the button. In doing that I set the UL to the width of the buttons (110px) and then just set a 34px left margin on it to line it up.
Here is the html that I am using, you will notice the <b> element nested in the anchor. That is what the sprite images are hooked to.
<div id="left">
<div id="logo"></div>
<ul id="nav">
<li class="home"><a href="/index.php">home[COLOR=DarkGreen]<b></b>[/COLOR][COLOR=Blue]</a>[/COLOR]</li>
<li class="artists"><a href="/artists.php">artists[COLOR=DarkGreen]<b></b>[/COLOR][COLOR=Blue]</a>[/COLOR]</li>
<li class="exhibit"><a href="/exhibit.php">exhibitions[COLOR=DarkGreen]<b></b>[/COLOR][COLOR=Blue]</a>[/COLOR]</li>
<li class="about"><a href="/about.php">about[COLOR=DarkGreen]<b></b>[/COLOR][COLOR=Blue]</a>[/COLOR]</li>
</ul>
</div>
Now you just apply each sprite to the <b> element according to the class on the LI. Then reposition it on :hover by setting a negative top margin on the <b> element.
/*=== Sprite Nav Styles ===*/
[B]#nav[/B] {
[COLOR=Blue]width:110px;[/COLOR]
margin:0 0 0 [COLOR=Blue]34px;[/COLOR]
padding:0;
list-style:none;
overflow:hidden;/*contain floats*/
}
[B]#nav li, #nav a[/B] {
float:left;
width:110px;
height:40px;
[COLOR=Blue] position:relative;[/COLOR]/*containing block for AP image on "b" */
}
[B]#nav a[/B] {
[COLOR=Blue]overflow:hidden;/*hide 80px tall sprite*/[/COLOR]
[COLOR=Magenta] [COLOR=Red]/*style for images off */[/COLOR][/COLOR]
text-decoration:none;
text-align:center;
font:bold 14px/24px arial;
color:#00F;
background:#FFF;
}
#nav a:active,
#nav a:focus,
#nav a:hover { [COLOR=Blue]/*style for images off */[/COLOR]
color:#FFF;
background:#000;
cursor:pointer;
}
[B]#nav a b[/B] {
position:absolute;
top:0;left:0;
width:110px;
[COLOR=Blue]height:80px;/*height of sprite*/[/COLOR]
}
#nav a:active b,
#nav a:focus b,
[B]#nav a:hover b[/B] {
[COLOR=Blue]margin-top:-40px; /*show sprite hover state*/[/COLOR]
}
#nav [B].home b[/B] {background:url(images/home.jpg) 0 0;}
#nav [B].artists b[/B] {background:url(images/artists.jpg) 0 0;}
#nav [B].exhibit b[/B] {background:url(images/exhibit.jpg) 0 0;}
#nav .[B]about b [/B]{background:url(images/about.jpg) 0 0;}
Hope that helps you understand how to get things working a little smoother 
Thanks Razur. I was hoping for a simple fix. I know about sprites but this just complicates this project way beyond what I thought. I’ll have to redo the whole site. The whole thing is structured with a main div above the left side, etc. and I’m not redoing the whole site. He didn’t ask for that. I’m just trying to get the buttons to work in FF. It would be great for the hovers to work but if it means redoing the whole site, forget it. He didn’t ask for that.
I can totally see what you did and how it works on your example. It’s just making it work/transfer to this already existing site with the containers and php he set up.
I just set up a mock left column to repeat the BG image on in my example. You should be able to plug the revised UL into it’s existing place on the site with the width and left margin on it that I explained above.
All you would really have to do from here is crop & seam the other images together, the artist name images on the artists page.