CSS Image Hover Effect Problem

HTML & CSS
1

I’m using a image mouse over effect using the CSS hover method which reveals half of the background image on hover method.

The buttons are in my header navigation bar in a list. Buttons should be inline but buttons are not showing up anyway. Page is here.

2

Here we go:

as with all my examples the directory
http://www.cutcodedown.com/for_others/jihanemo

Is unlocked for ease of access to the gooey bits (CSS+Images). Combines the menu down to a single image using so-called ‘css sprites’, uses a min-height trick to avoid background-position oddities allowing all alpha transparent .png to be kicked to the curb, tested working IE 5.5, 6, 7 & 8, Opera 10.6, FF 2 and 3.5, and the latest flavors each of Safari and chrome.

Valid XHTML 1.0 Strict, would be valid CSS 2.1 if not for the use of ZOOM due to my being unable to use other haslayout triggers thanks to paddings or the double-background min-height trick so that the definition of “center” on a background-image doesn’t change when the screen gets narrower than #pageWrapper.

3

Modifications as per instructions.

Modified source code included in web-page:

http://johns-jokes.com/downloads/sp/creativemilldesigns.com/

.

4

Hi,

You can’t give width or height to inline elements. You would need to float the anchors.


#header li a{float:left}
5

I just did an HTML validation but it didn’t mention a script error. However, there was an extra tag there. Fixed that but that the navigation buttons are still not appearing.

6

Okay. I removed the clashing class on the lists within the header. The buttons are still not appearing. How can I fix?

7

You have script errors, try this link:

8

Ooph, a LOT of issues. Endless nested DIV for no reason, hordes of classes doing absolutely nothing you couldn’t do by inheritance, etc, etc… Really big issues though are the image replacement techniques that don’t actually serve the PURPOSE of image replacement, since you turn images off with CSS on, there’s no menu!

The markup should probably go something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=iso-8859-1"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<meta
	name="keywords"
	content="jewelry, custom, men, women, tees, t-shirts, wear, clothing"
/>

<meta
	name="description"
	content="Jewelry and Custom Tees for Men and Women"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Mind In Turmoil: Jewelry and Custom Tees for Men and Women
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		Mind in Turmoil
		<span></span>
	</h1>
	
	<ul id="mainMenu">
		<li class="customWear">
			<a href="/shopjcustomwear.html">
				Shop Custom Wear<span></span>
			</a>
		</li>
		<li class="mensJewelry">
			<a href="/shopjewelrymens.html">
				Shop Men's Jewelry<span></span>
			</a>
		</li>
		<li class="womensJewelry">
			<a href="/shopjewelrywomens.html">
				Shop Women's Jewelry<span></span>
			</a>
		</li>
		<li class="help">
			<a href="//help.html">
				Help<span></span>
			</a>
		</li>
		<li class="contactUs">
			<a href="/helpcontact.html">
				Contact Us<span></span>
			</a>
		</li>
	</ul>

	<div id="content">
	
		<img src="images/turmoilsecondhome_page.jpg" alt="Mind in Turmoil" />
		
	<!-- #content --></div>

	<div id="footer">
	
		<form action="http://madmimi.com/signups/subscribe/15981" method="post">
			<fieldset>
				<input
					class="footerfield"
					id="signup_email"
					name="signup[email]"
					type="text"
					value="ENTER EMAIL ADDRESS"
				/>
				<input
					name="commit"
					type="submit"
					value="SUBMIT"
				/>
			</fieldset>
		</form>
		
		COPYRIGHT &copy; 2010 <a href="/">CREATIVE MILL DESIGNS</a><br />
		WEBSITE DESIGNED BY <a href="/">CREATIVE MILL DESIGNS</a>
		
	<!-- #footer --></div>
	
<!-- #pageWrapper --></div>

</body></html>

Gilder-levin image replacement on the h1, and on the menu… Since it’s all constrained to the same width only set width one on the outermost wrapper, and for the footer just set #footer to text-align:right and then float:left the footer; everything will fall into place.

If I have time later I’ll belt out the CSS to go with that.

9

That was the text replacement hiding routine :slight_smile: It’s just hiding the text off screen. When you bring it back you allow space in the document for the images to show but then you are stuck with the replacement text.

As I said above you need to float the anchors to allow the width and height to take place :slight_smile:

There are better image replacement techniques around though.

10

Try this:
http://johns-jokes.com/downloads/sp/creativemilldesigns.com/

The following lines have been removed:



  .headerhide
  {
    position: absolute;
    left: -5000px;
  }

.

11

You have a CSS ID and a CSS CLASS both called header which I would rename the ID to prevent a clash.

Also I think the problem is:
[CSS]

.headerhide
{
position: absolute;
left: -5000px;
}

[/CSS]

.