3 replies [Last post]
VestanPance
Offline
newbie
Last seen: 14 years 27 weeks ago
Joined: 2005-08-20
Posts: 6
Points: 0

This is absolutely driving me nuts. I am trying to get an image to display behind a link for a button. I have validated me CSS and everything checks out fine, but still no images. But the REALLY weird thing is if I use a web dev tool in Firefox to edit my CSS, the window shifts and *poof* the images appear. Any ideas?

#navigation li {
	display: inline;
	background: url(images/spritenav.gif) no-repeat;
    list-style: none;
	margin: -3px;
	padding-top: 2px;
	padding-left: 10px;
	padding-right: 10px; 
	border-left:1px solid white
	}

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 19 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Very strange image behavior

You need to specify a width & a height for your <li>s and you'll probably need to set display: block on your anchor tags as well.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

VestanPance
Offline
newbie
Last seen: 14 years 27 weeks ago
Joined: 2005-08-20
Posts: 6
Points: 0

Very strange image behavior

Thanks Tyssen but that didn't seem to help much.

Here is the HTML:

<div id="navigation">
  <ul>
     <li<?php if ($thisPage=="Welcome") 
      echo " id=\"currentpage\""; ?>>
      <a href="index.php">Home</a></li>
    <li<?php if ($thisPage=="About Us") 
      echo " id=\"currentpage\"about.php"; ?>>
      <a href="about.php">About Us</a></li>
    <li<?php if ($thisPage=="What We Believe") 
      echo " id=\"currentpage\""; ?>>
      <a href="believe.php">What We Believe</a></li>
    <li<?php if ($thisPage=="Contact Us") 
      echo " id=\"currentpage\""; ?>>
      <a href="contact.php">Conatct Us</a></li>
          <li<?php if ($thisPage=="Ministries") 
      echo " id=\"currentpage\""; ?>>
      <a href="ministry.php">Ministries</a></li>
          <li<?php if ($thisPage=="References") 
      echo " id=\"currentpage\""; ?>>
      <a href="references.php">References</a></li>
      <li<?php if ($thisPage=="Journal") 
      echo " id=\"currentpage\""; ?>>
      <a href="journal.php">Journal</a></li>
  </ul>
</div>

and the CSS:

#navigation {
	padding-top: 5px;
	background-color: #ccc;
	padding-bottom: 2px;
	}

#navigation ul {
	width: 750px;
	text-align:center;
	list-style: none;
	margin: 0px;
	padding: 0px;
	}

#navigation li {
	display: inline;
	background: url(images/spritenav.gif) no-repeat;
    list-style: none;
	margin: -3px;
	padding-top: 2px;
	padding-left: 10px;
	padding-right: 10px; 
	border-left:1px solid white
	}

#navigation a {color: #666; font-weight: bold; text-decoration: none; margin-bottom:5px;}
#navigation a:hover {color: #333; background-color: #453;}
#navigation #currentpage a {background: #ffa;color: #333;padding-top: 2px;}

VestanPance
Offline
newbie
Last seen: 14 years 27 weeks ago
Joined: 2005-08-20
Posts: 6
Points: 0

Very strange image behavior

UUggghhhhh.....well I guess I learned a loooong lesson in that links need to be relative to the CSS document -- not the HTML.

Anyways...nevermind. Smile