Having a few problems... trying to hide and uncover text

[phrozt]

I'm trying to completely redo a site, and I'm having some problems.

This is the site I'm workign on:

http://www.rabbitstop.com/indexcss.htm

CSS file:

http://www.rabbitstop.com/indexcss.css

The first is kind of small I'm guesing... You'll notice on the sidebar that at the bottom, there is a little bit more background showing that ends up appearing below the bottom gif. I'm guessing I have something messed up with the margin or padding??

Finally, the large problem. I was trying to do something similar to:

http://www.medicaltextbooks.co.uk/,

where there is a text box that appears when you mouse over the links. I would want the text to appear in the information box that is right under the menu bar. I tried to copy the code exactly into my css file and it didn't work, and no amount of tweaking on my own could get it to work... does anyone konw what it won't display?? (The only text I've done that with so far is the text for the "more" button).

It should do something like this:

http://www.ferretdepot.com

If you look at the code for that page though, you can see why I'm trying to redo evertyhign in css. :/

Thanks for your help

 

[Vragabond]

Ok, first the simple problem. Images are inline elements and are not by default aligned to the bottom. Defining that will help you out:

<img src="[URL unfurl="true"]http://www.rabbitstop.com/Merchant2/graphics/infobottomaqua.gif"[/URL] alt="Rabbit Stop" style="vertical-align: bottom;" />

You can just move the css to your css file then.

As for the second problem. You are trying to do something that IE is terrible at supporting. Mozilla shows your efforts, though it does not look its best. Try and work it out in Mozilla and when you are satisfied with the result go back to IE. I just had a play with it and it looks like IE will notice what you are trying to do if you have a change in the hover of the original <a> element. So try adding this line to your css:

div#menubar a:hover {
	border: 0px solid black;
}

This does nothing but trick IE into believing something happens when the link is hovered and that triggers the other hover. Hope it makes sense.