CSS text-indent and image replacement

Hello Everyone,

You would think that this is an easy fix, I have also googled it like no other however I cannot get it to work for my website regardless of the fact that I have done this a hundred times.

I have an ul which is my name nav and would like to replace the text with and image. For some reason it is not showing the whole image I am replacing it with as well the text-indent is doing nothing to the original text.

Maybe a second set of eye would assist.

    <img src="logo3-01.png" alt="Corq Media | Design and Development">
    
    <nav>
       <ul>
            <li><a id="port" class="active" href="/Portfolio">Portfolio</li></a>
            <li><a id="about" class="link" href="/About">About</a></li>
            <li><a id="exp" class="link" href="/Expertise">Expertise</a></li>
            <li><a id="proc" class="link" href="/Process">Process</a></li>
            <li><a id="cont" class="link" href="/Contact">Contact</a></li>
            <li><a id="cont" class="link" href="/Contact">Blog</a></li>
       </ul>
    </nav>

    </header>


#port {
width: 130px;
height: 53px;
background: url(buttons/portfolio_nonactive.png) no-repeat top left;
text-indent: -9999px;

}

Any help would be appreciated!

Tell me what you see wrong about this HTML. Please noone spoil this :slight_smile: .

<li><a id="port" class="active" href="/Portfolio">Portfolio</li></a>
1 Like

Ahhhhh if you are talking about how (li > a, /li > a ← should be /a, /li)

Not sure if that made sense how I explained what I saw lol.

I corrected that however still causing an issue

Secondly, the anchor needs display:block;

1 Like
1 Like

YES! Thank you very much!!! I knew something was missing but could not figure it out for the life of me!

Thank you!!!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.