[CSS Menu] Why Isn't This Working - GoFuckYourself.com

eMonk · 11-30-2008, 02:11 PM

the following code isn't loading "images/blueslate_backgroundOVER.gif" on mouse hover (just the top half of it). i got this tutorial from www.13styles.com/css-menus/slate/ and it works fine on this site but i can't seem to get it working myself on a fresh html page. any ideas?

Code:

<style type="text/css">
<!--
/* ---------------------- Blueslate nav ---------------------- */
.blue #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(images/blueslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.blue #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.blue #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.blue #slatenav ul li a{display:block;float:left;color:#D5F1FF;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.blue #slatenav ul li a:hover,.blue #slatenav ul li a.current{color:#fff;background:transparent url(images/blueslate_backgroundOVER.gif) no-repeat top center;}
-->
</style>
<div class="blue">
<div id="slatenav">
<ul>
<li><a href="" title="" class="current">Home</a></li>
<li><a href="" title="">About Us</a></li>
<li><a href="" title="">Services</a></li>
<li><a href="" title="">Our Work</a></li>
<li><a href="" title="">Contact Us</a></li>
</ul>
</div></div>

Sands · 11-30-2008, 02:35 PM

Mind you, I only took a quick peek at your code and didn't see any problems outright. If only half of the image is appearing, then that means there are some sizing issues with the div that is using that image as the background. Remember that padding can affect the size of a div.

For example, if you have a div and you want an image background for it that's 100px by 100px, but you want to pad that div by 10px, then you'd declare a width of 80px and a height of 80px.

Hope this helps, and if not, maybe someone with more time and experience can give their two cents.

Quote:

Originally Posted by eMonk

the following code isn't loading "images/blueslate_backgroundOVER.gif" on mouse hover (just the top half of it). i got this tutorial from www.13styles.com/css-menus/slate/ and it works fine on this site but i can't seem to get it working myself on a fresh html page. any ideas?

Code:

<style type="text/css">
<!--
/* ---------------------- Blueslate nav ---------------------- */
.blue #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(images/blueslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.blue #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.blue #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.blue #slatenav ul li a{display:block;float:left;color:#D5F1FF;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.blue #slatenav ul li a:hover,.blue #slatenav ul li a.current{color:#fff;background:transparent url(images/blueslate_backgroundOVER.gif) no-repeat top center;}
-->
</style>
<div class="blue">
<div id="slatenav">
<ul>
<li><a href="" title="" class="current">Home</a></li>
<li><a href="" title="">About Us</a></li>
<li><a href="" title="">Services</a></li>
<li><a href="" title="">Our Work</a></li>
<li><a href="" title="">Contact Us</a></li>
</ul>
</div></div>

Deej · 11-30-2008, 02:44 PM

Quote:

Originally Posted by eMonk

the following code isn't loading "images/blueslate_backgroundOVER.gif" on mouse hover (just the top half of it). i got this tutorial from www.13styles.com/css-menus/slate/ and it works fine on this site but i can't seem to get it working myself on a fresh html page. any ideas?

Code:

<style type="text/css">


.blue #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(images/blueslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.blue #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.blue #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.blue #slatenav ul li a{display:block;float:left;color:#D5F1FF;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.blue #slatenav ul li a:hover,.blue #slatenav ul li a.current{color:#fff;background:transparent url(images/blueslate_backgroundOVER.gif) no-repeat top center;}

</style>
<div class="blue">
<div id="slatenav">
<ul>
<li><a href="" title="" class="current">Home</a></li>
<li><a href="" title="">About Us</a></li>
<li><a href="" title="">Services</a></li>
<li><a href="" title="">Our Work</a></li>
<li><a href="" title="">Contact Us</a></li>
</ul>
</div></div>

take out those prefix things first of all like i did in this quote - looking deeper

edit _ plus put the style coding in your <head>

eMonk · 11-30-2008, 03:46 PM

@Sands : thanks for the response. i'll try playing with the padding but the code works as is on the tutorial site with my browser.

@Deej : i've tried putting the script code in the html head plus in its own .css file but same results. my version also doesn't have the comments/prefixes.

eMonk · 11-30-2008, 04:06 PM

figured it out...

code:
padding:14px 22px 0 22px;height:28px;

should be:
padding:14px 22px 0 22px;height:42px;

typos in tutorials...

11-30-2008, 03:46 PM	#4
eMonk Confirmed User Industry Role: Join Date: Aug 2003 Location: Canada Posts: 2,310	@Sands : thanks for the response. i'll try playing with the padding but the code works as is on the tutorial site with my browser. @Deej : i've tried putting the script code in the html head plus in its own .css file but same results. my version also doesn't have the comments/prefixes.

11-30-2008, 04:06 PM	#5
eMonk Confirmed User Industry Role: Join Date: Aug 2003 Location: Canada Posts: 2,310	figured it out... code: padding:14px 22px 0 22px;height:28px; should be: padding:14px 22px 0 22px;height:42px; typos in tutorials...