Sprites hover link issue

HTML & CSS
1

I’m using (what I think is) the same css sprite code on two different places on my page. One is a slightly different image. They are image links to go home, but for some reason, the link text shows up on one but not the other.

http://www.wisconsinequineclinic.com/m/veterinarians.php

It all needs to work with css styles off because it’s a mobile site. This is my first time working with sprites… can anyone identify what is going right on the bottom home button, but wrong on the top?

thank you…

.homeBtmLink {
	display: block;
	width: 91px;
	height: 30px;
	background: url('images/home-btn-btm.png') bottom;
	text-indent: -99999px;
}
.homeBtmLink:hover {
	background-position: 0 0;
}

.homeTopLink {
	display: block;
	width: 91px;
	height: 50px;
	background: url('images/home-btn-top2.png') bottom;
	text-indent: -99999px;
}
.homeTopLink:hover {
	background-position: 0 0;
}

for the top button:

<div align="right" id="header-home-content"><a class="homeTopLink" href="index.php">Home</a>
        </div>

and the bottom button:

<div align="left" id="footer-home" style="float:left; width:25%;">
       <a class="homeBtmLink" href="index.php">Home</a>
</div>
2

Hi,

The problem is the use of the deprecated align=“right” elements which will align the text to the right so no amount of text-indent is going to make them disappear :slight_smile:

Use css:


    #header-home-btn {
         float:right; 
[B]         /*width:50&#37;; */[/B]
         background-image:homebtn.png;
    }




    <div  id="header-home-btn">
                <div id="header-home-content"><a class="homeTopLink" href="index.php">Home</a> </div>
            </div>

However I don’t know why you have all that non semantic divitus code just to float a button. It could be reduced to just this:


.homeTopLink {float:right;margin:0 1em 0 0}
.homeTopLink a{
    float:right;
    width: 91px;
    height: 50px;
    background: url('http://www.wisconsinequineclinic.com/m/images/home-btn-top2.png') bottom;
    text-indent: -999em;
}
.homeTopLink a:hover {
    background-position: 0 0;
}




<p class="homeTopLink"><a href="index.php">Home</a></p>

e.g.


        <div id="header">
            <div align="left" id="header-logo">
                <div id="header-logo-content"><a href="index.php"><img src="http://www.wisconsinequineclinic.com/m/images/wech-logo-inner.png" width="171" height="63" /></a> </div>
            </div>
          [B]  <p class="homeTopLink"><a href="index.php">Home</a></p>[/B]
        </div>
        <!-- end header inner pages-->

Hope that helps :slight_smile:

3

aaah, THANK YOU! that does help :slight_smile:

The reason (I hope) for the non semantic and wonkiness of my code is because I’m just learning css - and it seems like for every one thing I finally understand, I find out about 4 more things I had no idea about! lol. I’ve been at it 3 months now and things are all slowly falling into place… I’m sure I’ll get better in time, thanks in big part to people like you giving up tidbits that help me a lot - I had no idea the align was deprecated, for one!
I’ll use your recommendation for the float too, thanks!

Jamie

4

I had no idea the align was deprecated, for one!

It’s deprecated in strict doctypes but allowed in transitional doctypes however you should avoid it’s use as it’s purely presentational. It will fight with your existing styles anyway so it’s best avoided altogether :slight_smile:

Keep plugging away I’m sure you’ll get there in the end. It’s a steep learning curve at first but eventually it all falls into place (most of it anyway ;)).