Member Avatar for elneco

Hello Daniweb,

i am having problems with the second button in my rather simple nav. i looked over the code a couple times but i can't seem to figure out why the hover is behaving teh way it is...perhaps someone with fresh eyes can help me out??

my nav:

my css:

Thank You to anyone that tries to help me out-
-Jaime

  • 2 Contributors
  • 2 Replies
  • 118 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by elneco

Dani AI

Generated

Nice catch by — that small syntax slip explains why the second nav item behaved differently. The page is fixed now for , but a few quick checks and habits help prevent and diagnose similar hover/positioning problems in the future.

Start with a short debug routine: open DevTools and inspect the element to see which rules are applied or crossed out, confirm the element’s box (width/height) and the computed position, and verify the stacking order (z-index) when hovers seem off. Also make sure positioned children sit inside the intended containing block — absolute children are positioned relative to the nearest positioned ancestor, not necessarily the nav wrapper.

When using image sprites for nav states, keep the math clear and avoid magic numbers. Use consistent class names for states (hover/active), keep anchors as block-level (so the clickable area matches the visual button), and consider using CSS variables or a preprocessor to store sprite offsets so mistakes are easier to spot.

Small example structure to follow:

.nav { position: relative; }
.nav a { display: inline-block; width: 100px; height: 40px; background: url('sprite.png') no-repeat; }
.nav a:hover { /* shift background-position for hover state */ }

For further hardening: run the stylesheet through the W3C CSS validator, use a linter in your editor, and rely on DevTools to toggle rules live. For reference on positioning and CSS lengths see the MDN docs for position and length, and use browser devtools docs when you need a quick walkthrough (MDN position, MDN length, Chrome DevTools).

Recommended Answers

All 2 Replies

Member Avatar for parry_kulk

In the file mystyle.css see the style

.nav-Hotels, .nav-Hotels-click {
		position: absolute;
		top: 72;
		left: 0px;
		width: 125px;
		height: 42px;
		background: url(pix/Nav.png) no-repeat -125px -72px;
	}

Here top is set as
top:72;
Set the units for the value there.
i.e
top:72px;

Hope this solves the issue

Member Avatar for elneco

wow..Thanks so much! What an easy fix, i can't believe i was ripping by code apart for such a simple mistake..haha thank you

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.