I got the image replacement working
#home {
padding-top:76px;
height:0px;
width: 34px;
overflow: hidden;
background:url(../images/Home.png) no-repeat;
}
Major change above was to change the heigh to 0px and I don't have to
set the display to block.
However it also works this way
#home {
padding-top:76px;
height:0px;
width: 34px;
overflow: hidden;
display:block;
background:url(../images/Home.png) no-repeat;
}
Not really sure if I should have block turned on or not.
2nd change was the placement in my xhtml
<li id ="home"><a href="#">Home</a></li>
I put the id on the li element not the a element. Not sure why this
worked. If anyone can tell me why that placement is important I would
appreciate it.
The article I found discussing how to do this that helped me with the
height issue is here http://www.kryogenix.org/code/browser/lir/
Michael Horowitz
Your Computer Consultant
http://yourcomputerconsultant.com
561-394-9079
Michael Horowitz wrote:
I've been using the background image idea.
#home {
background:url(../images/Home.png) no-repeat top left;
display: block;
width: 34px;
height: 75px;
overflow: hidden;
padding-top: 75px;
}
I've seen other people say to use display block and that works better.
My xhtml is
<li><a href="#" id="home">HOME</a></li>
Everything validates
However instead of replacing the text and leaving it available for use
by search engines and text reader both the text and image show.
Michael Horowitz
Your Computer Consultant
http://yourcomputerconsultant.com
561-394-9079
Svip wrote:
Try style="background:url(images/home.png") no-repeat top left; width:
<imagewidth>px; height: <imageheight>px;" for the first a.
I'd probably do something like this:
<li><a href="#" id="home-link">Home</a></li>
Then in CSS:
#home-link {
background: url(images/home.png) no-repeat top left;
width: WIDTHpx;
height: HEIGHTpx;
overflow: hidden;
padding-top: HEIGHTpx;
}
That way, people using a graphical browser won't see the text, but
people using a text-based browser and search engines will see the
text. Of course, you could just use alt="" in the <img /> tag, but
that is not pretty either.
Regards,
Svip
2008/8/28 Michael Horowitz <[EMAIL PROTECTED]>:
How would people suggest if I have a menu with an image on top and text
underneath and I want both the text and the image as a link
I'm thinking of making them link items and use css to move the image
on top
of the text. Does that sound semantically correct.
<li><a href="#"><img src="images/home.png" /></a> </li>
<li><a href="#">HOME</a></li>
--
Michael Horowitz
Your Computer Consultant
http://yourcomputerconsultant.com
561-394-9079
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
