CSS + picture

[m.huber614]

I have a picture that I'm trying to use to represent a link and for some reason it keeps getting cut in half long ways and aligned with the bottom.Here is my CSS code:

#about{}#about a{	background-image:url(images/linkAbout.gif);	background-repeat:no-repeat;}#about a:hover{	background-image:url(images/linkAboutH.gif);	background-repeat:no-repeat;}

and my html:

<div id=navbar>	<div style="position:relative; top:10px;" id="container">		<span id="about"><a href="about.html"><img height="37px" width="267px" /></a></span>	</div>	</div>

if I could post a picture of the issue i would. not sure how to upload.your help is greatly appreciated.

[thescientist]

why use <img> if you are setting the background with CSS? you might just want to get rid of the <span> and <img> altogether and just make your selectors like so:

//CSS#container a{	background-image:url(images/linkAbout.gif);	background-repeat:no-repeat;}#container a:hover{	background-image:url(images/linkAboutH.gif);	background-repeat:no-repeat;}//HTML<div id="navbar">	<div style="position:relative; top:10px;" id="container">		<a href="about.html"></a>	</div></div>

why are you using position:absolute? Don't forget the parenthesis around navbar

[m.huber614]

I was using Position:relative; because I just wanted it to move 10px from where it otherwise would've been placed. also <img> was placed there as a placeholder for the anchor. Notice there is no img reference, just height and width values. If I get rid of these it will literally disappear all together or assume no dimensions. then no background images appear.

[thescientist]

then just set the width and heights on the anchor. eventually as you build your page, you should really consider using margins and paddings to organize the layout of your page, not using positioning straight from the start. Create the layout on a piece of paper, making a box for each section and work from there.

[thescientist]

also, just realized, you will have to set your anchors to display block.I think you will be better served by considering the use of lists for your menu, however.

[m.huber614]

So this is what i changed the code to

/html	<div id=navbar>		<div id="about"><a href="about.html" style="height:37px; width:267px;"></a></div>	</div>/css#about{	margin-top:10px;}#about a{	background-image:url(images/linkAbout.gif);	background-repeat:no-repeat;}#about a:hover{	background-image:url(images/linkAboutH.gif);	background-repeat:no-repeat;}

no picture appears nor can I find where the anchor or div are, not even after defining background-color:#00f for the about id.I admit, it's been some time since I've done this but I think I retained enough that an error like this should not be occurring.my fault, didn't see the last post. Display:block worked like a charm. Thank you so much! How did you know that would work? Also, thanks for the additional advice. I really appreciate it.

[thescientist]

anchors are inline elements, and thus are "resistant" to width and height properties.

[ShadowMage]

anchors are inline elements, and thus are "resistant" to width and height properties.

...which means you need to add this to your #about a declaration:display: block;

[thescientist]

...which means you need to add this to your #about a declaration:display: block;

my fault, didn't see the last post. Display:block worked like a charm. Thank you so much! How did you know that would work? Also, thanks for the additional advice. I really appreciate it.

[ShadowMage]

Whoops. I didn't see the edit!