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>
|