CSS Rollovers

[racheld]

I have run into one of those situations where I've done something wrong but for the life of me I can't see what it is.I am doing CSS rollovers, and for some reason, the image/link won't appear. Here is a link to the page http://www.kta.on.ca/KTA_site_RVSD/aboPraGro.html. The image link called "PraGroSect_Txt_AP.jpg" just isn't showing up in the green framed box on the top right hand corner of the page. I've also copied and pasted my code below:

		<div id="programs_navInd">			  <ul id="praGro_ul">				 <li id="praGro_aboPra"><a href="aboPraGro.html"></a></li>			  </ul>	   </div>

#programs_navInd{	background-image:url(images/PraGroBackground.gif);	height:100px;	width:274px;	border-style:solid;	border-width:1px;	border-color:#4a4a4d;	float:right;	margin:10px;	}#praGro_ul{	width:222px;	list-style:none;	margin-top:10px;	margin-left:10px;	padding-top:10px;	padding-left:10px;	float:left;	line-height:8px;}#praGro_aboPra a{	background:url(images/PraGroSect_Txt_AP.jpg);	width:157px;	height:11px;	background-repeat:no-repeat;	margin-bottom:10px;}#praGro_aboPra a:hover{ 	background-position: 0 -11px;}

[ShadowMage]

Anchors are by default, inline elements. Meaning they don't break to a new line and their width/height is directly affected by their contents. Since your <a> tag is empty it has a height/width of 0. You need to change it's display by adding display: inline-block to the #praGro_aboPra a{ declaration in your CSS.Inline-block makes it behave like a block element in that it's dimensions can be modified, but it behaves like an inline element in that it does not break to a new line.

[racheld]

Anchors are by default, inline elements. Meaning they don't break to a new line and their width/height is directly affected by their contents. Since your <a> tag is empty it has a height/width of 0. You need to change it's display by adding display: inline-block to the #praGro_aboPra a{ declaration in your CSS.Inline-block makes it behave like a block element in that it's dimensions can be modified, but it behaves like an inline element in that it does not break to a new line.

Yaa!!! That worked. Thanks so much for the info! I won't soon forget it.