Issues with sprites

Hello, All!

I am having an issue with my navigation bar. I have created it using
the sprite technique (I am a newbie, can you tell?) and everything
seemed to be working perfectly until I played around with the order of
some of my surrounding divs (In order to get the perfect positioning).
Now, the up image shows up, but never goes to the hover state.

Here is my relevant xhtml code:

<div id="logo">
<div id="header"><img src="images/Header/cliffs_header.jpg"
width="800" height="90" />
<div id="nav">
<ul id="navigation">
<li id="nav_services"><a href="services.html">Services</a></li>
<li id="nav_methods"><a href="methods.html">Methods</a></li>
<li id="nav_experience"><a href="Experience.html">Experience</
a></li>
<li id="nav_personnel"><a href="personnel.html">Personnel</a></
li>
<li id="nav_media"><a href="media.html">Media</a></li>
<li id="nav_about"><a href="about.html">About Us</a></li>
<li id="nav_contact"><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</div>
</div>

and here is the relevant CSS code:

div#logo {
background:url(../images/Header/header-bg.png) repeat-x;
margin-top:0;
margin-right:auto;
margin-bottom: 0;
margin-left: auto;
width:100%;
text-align:center;
position:relative;
height:126px;
border-bottom:2px groove #f4f4f4;
z-index:-1;
}

div#header {
width:100%;
margin-top:0;
margin-bottom:0;
position:absolute;
width:801px;
top:0;
left:50%;
margin-left:-400px;
height: 89px;

}

div#nav {
width:100%;
height:36px;
text-align:center;
z-index:1;
}
#navigation {
width: 800px;
height: 36px;
position: absolute;
background:url(../images/Navigation/nav_main.png)
margin: 0;
padding: 0;
top:90px;
left:50%;
margin-left:-400px;
z-index:100;
}

#navigation li {
float:left
}

#navigation li a {
position: absolute;
top: 0;
margin: 0;
padding: 0;
display: block;
height: 36px;
background: url(../images/Navigation/nav_main.png) no-repeat;
text-indent: -9999px;
z-index: 1;
}

li#nav_services a {
left: 0px;
width: 114px;
background-position: 0 0;
}
......etc. (Continues down through "current" state---I haven't changed
anything below this point, so I doubt the problem is there)



Can anybody see where I am going wrong? Like I said, it was working
perfectly until I messed around with the "header" and "logo" divs. I
tested it without those divs surrounding it and it works fine.

I am really at a loss. Any help you can provide would be amazing!

Gazing into my crystal ball I observed screntropy <scrchrds (AT) gmail (DOT) com>
writing in news:d94cdab5-bf33-498c-8c68-
f0cbe01a94bc (AT) g1g2000vbr (DOT) googlegroups.com:

Hello, All!

I am having an issue with my navigation bar. I have created it using
the sprite technique (I am a newbie, can you tell?) and everything
seemed to be working perfectly until I played around with the order of
some of my surrounding divs (In order to get the perfect positioning).
Now, the up image shows up, but never goes to the hover state.

Snip code.

Please provide a URL. Reasons:
1. You may have omitted markup/css
2. You may have copied/pasted the markup/css incorrectly
3. We do not have your images

If you do not have a URL, your ISP probably gave you some web space or
you can use one of the free hosting providers (for now).

.....etc. (Continues down through "current" state---I haven't changed
anything below this point, so I doubt the problem is there)

See above.

Can anybody see where I am going wrong? Like I said, it was working
perfectly until I messed around with the "header" and "logo" divs. I
tested it without those divs surrounding it and it works fine.

I am really at a loss. Any help you can provide would be amazing!

We really need a URL.



--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

Well, I was hoping it didn't have to come to this, but here goes...

http://fpm-geo.com/test/newsite/index.html

Suggestions are very welcome! (just be nice!)

On 23 Sep, 00:12, screntropy <scrch... (AT) gmail (DOT) com> wrote:

Can anybody see where I am going wrong?

Start again, but without the position:absolute ESPECIALLY NOT on
anything like a list element for which you have asequence of them.

Also avoid using id, in favour of class, in CSS selectors -
particularly for the major page elements.

On 2009-09-23, screntropy wrote:

Well, I was hoping it didn't have to come to this, but here goes...

http://fpm-geo.com/test/newsite/index.html

Suggestions are very welcome! (just be nice!)

You have a fixed height that isn't large enough for my default
font size. See: <http://cfaj.freeshell.org/testing/fpm-geo.jpg>.


--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

On 2009-09-23, Chris F.A. Johnson wrote:

On 2009-09-23, screntropy wrote:
Well, I was hoping it didn't have to come to this, but here goes...

http://fpm-geo.com/test/newsite/index.html

Suggestions are very welcome! (just be nice!)

You have a fixed height that isn't large enough for my default
font size. See: <http://cfaj.freeshell.org/testing/fpm-geo.jpg>.

..and there are 19 XHTML errors:
<http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Ffpm-geo.com%2Ftest%2Fnewsite%2Findex.html>

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

On Sep 23, 10:42*am, Andy Dingley <ding... (AT) codesmiths (DOT) com> wrote:

On 23 Sep, 00:12, screntropy <scrch... (AT) gmail (DOT) com> wrote:

Can anybody see where I am going wrong?

Start again, but without the position:absolute * ESPECIALLY NOT on
anything like a list element for which you have *asequence of them.

Also avoid using id, in favour of class, in CSS selectors -
particularly for the major page elements.

Thanks for tip about id vs. class. I will definitely be changing that!

I tried to take out the position:absolute, but it still doesn't seem
to work. Changing the absolute to relative doesn't work either.

Any other ideas?

In article
<35e1f5a7-089f-4587-bae8-627c261444f5 (AT) j9g2000vbp (DOT) googlegroups.com>,
screntropy <scrchrds (AT) gmail (DOT) com> wrote:

On Sep 23, 10:42Â*am, Andy Dingley <ding... (AT) codesmiths (DOT) com> wrote:
On 23 Sep, 00:12, screntropy <scrch... (AT) gmail (DOT) com> wrote:

Can anybody see where I am going wrong?

Start again, but without the position:absolute Â* ESPECIALLY NOT on
anything like a list element for which you have Â*asequence of them.

Also avoid using id, in favour of class, in CSS selectors -
particularly for the major page elements.

Thanks for tip about id vs. class. I will definitely be changing that!

Change it if you like. Not quite sure if you should be so definite about
it! <g> Particularly for the main sections! What is so wrong with using
IDs? Perhaps I am missing some context here? Or I have forgotten Andy's
undoubtedly reasonable argument against IDs here? I cannot recall a
really compelling one for marking out major sections that are not used
more than once per page.

I tried to take out the position:absolute, but it still doesn't seem
to work. Changing the absolute to relative doesn't work either.

Any other ideas?

er... damn my online reader for keeping no offline record... was this
not the post that Adrienne very reasonably said you should be supplying
a URL for? How about it?

--
dorayme

On Tue, 22 Sep 2009 16:12:18 -0700 (PDT), screntropy wrote:

I am having an issue with my navigation bar. I have created it using
the sprite technique

Caveat: I do not know and haven't used sprites. Okay, I've looked the term
up and have had a skim through a couple of articles. I'm still no expert.

(I am a newbie, can you tell?)

The first thing that I tell newbies (and that I check myself) is to
validate. You have 19 errors in your markup (which you say is XHTML but is
actually served as HTML) and 24 errors plus 55 warnings in your CSS. Some
of the CSS problems are missing semi-colons.

Markup validator: <http://validator.w3.org/>
CSS validator: <http://jigsaw.w3.org/css-validator/>

and everything
seemed to be working perfectly until I played around with the order of
some of my surrounding divs (In order to get the perfect positioning).
Now, the up image shows up, but never goes to the hover state.

I don't understand what you mean by "up image" (maybe something spritey)
but I've noticed the following:


You seem to have a series of a:hover rules duplicated in one section that
your comments say is /*hover state*/ and one supposedly /*active state*/.

The ordering of your CSS rules for links should be something like
a:link
a:visited
a:hover
a:focus
a:active

Your ordering is different, so your a rules override your (repeated)
a:hover rules.

Here is my relevant xhtml code:

(A friendly observation: When you're a newbie and you're having problems,
you probably don't know what's relevant. The URL you provided
<http://fpm-geo.com/test/newsite/index.html> is better.)

div id="logo"
div id="header"
div id="nav"
ul id="navigation"
li id="nav_services"><a href="#">Services</a></li
li id="nav_methods"><a href="#s">Methods</a></li
li id="nav_experience"><a href="#">Experience</a></li
li id="nav_personnel"><a href="#">Personnel</a></li
li id="nav_media"><a href="#">Media</a></li
li id="nav_about"><a href="#">About Us</a></li
li id="nav_contact"><a href="#">Contact Us</a></li
/ul
/div
/div
/div

and here is the relevant CSS code:

div#logo {

[snippage]

z-index:-1;

Looks like you're trying to hide your logo.

}

div#header {
width:100%;
margin-top:0;
margin-bottom:0;
position:absolute;
width:801px;
top:0;
left:50%;
margin-left:-400px;

Looks like you're trying to hide your navigation. If the 50% and -400px are
just to center the header, use margin-left and -right:auto along with your
fixed width. Drop the absolute positioning. All you need here then is

div#header {
margin:0 auto;
width:801px;
height: 89px;
}

A width in px is vulnerable to text overflow on text zoom, however. Maybe
50em would be better for you than 801px.

height: 89px;

}

div#nav {
width:100%;

A div is naturally 100%.

height:36px;
text-align:center;
z-index:1;

This is also a superfluous value.

}
#navigation {
width: 800px;
height: 36px;
position: absolute;
background:url(../images/Navigation/nav_main.png)
margin: 0;
padding: 0;
top:90px;
left:50%;
margin-left:-400px;

Looks like you're trying to hide your navigation.

z-index:100;
}

#navigation li {
float:left
}

#navigation li a {
position: absolute;
top: 0;
margin: 0;
padding: 0;
display: block;
height: 36px;
background: url(../images/Navigation/nav_main.png) no-repeat;
text-indent: -9999px;

Looks like you're trying to hide all your a elements.

z-index: 1;
}

li#nav_services a {
left: 0px;
width: 114px;
background-position: 0 0;
}
.....etc. (Continues down through "current" state---I haven't changed
anything below this point, so I doubt the problem is there)

Post again if you still have problems after looking through the ideas
posted so far (and, you know, trying them out).

GL. HTH.

--
John