8 replies [Last post]
volfro
Offline
Regular
Atlanta, GA, USA
Last seen: 7 years 8 weeks ago
Atlanta, GA, USA
Timezone: GMT-4
Joined: 2005-08-17
Posts: 26
Points: 0

Hi everybody!

I'm having an incredibly frustrating problem.

Building HTML/CSS for a fellow designer who doesn't know how to do stuff on the Web. She provided me with the Photoshop comp, and I'm building the code.

I've run into a small problem. I'm using the Phark image replacement technique (text-indent:-9999px) on the nav list, and no matter what I try, I can't get it to actually push the text out of the way. All other properties I've used to style the li and a elements have worked. Negative margins also have no effect on the display of the link text.

The relevant HTML:

I divide my stylesheets into three sections while I'm working with them. Here's the relevant CSS:

/*************** ---------------- POSITIONING ---------------- ****************/

...

/* Navigation */
#nav {
position:absolute;
top:200px;left:0;
width:170px;height:260px;
}

#nav li {
left:60px;
position:relative;
width:88px;
}

#nav a {
display:block;
height:29px;width:88px;
text-indent:-9999px;
}

...

/***************
----------------
COLORS, BORDERS, AND BACKGROUNDS
----------------
****************/

...

/* Navigation */
#nav {
border-right:1px solid #d6d4c5;
}

#nav li a {
border:none;
color:#fff;
text-decoration:none;
}

#nav li a:hover, #nav li a.active {
border:none;
color:#000;
}

/* Navigation background sprites */
.attorneyProfile a {background:url(img/nav.png) no-repeat 0px 0px;}
.expertise a {background:url(img/nav.png) no-repeat 0px -29px;}
.articles a {background:url(img/nav.png) no-repeat 0px -57px;}
.links a {background:url(img/nav.png) no-repeat 0px -85px;}
.contact a {background:url(img/nav.png) no-repeat 0px -113px;}

.attorneyProfile a:hover, .attorneyProfile a.active {background:url(img/nav.png) no-repeat -88px 0px;}
.expertise a:hover, .expertise a.active {background:url(img/nav.png) no-repeat -88px -29px;}
.articles a:hover, .articles a.active {background:url(img/nav.png) no-repeat -88px -57px;}
.links a:hover, .links a.active {background:url(img/nav.png) no-repeat -88px -85px;}
.contact a:hover, .contact a.active {background:url(img/nav.png) no-repeat -88px -113px;}

...

/***************
----------------
TYPOGRAPHY
----------------
****************/

/* Nav */
#nav {
font-size:.8em;
font-weight:bold;
text-align:right;
text-transform:uppercase;
}

I've tried placing the text-indent at various places in the stylesheet, including giving it its own rule at the end. From moving it to the top level ul or #nav to the specific li and a classes.

You can also see it in action at my site.

I know it's something simple that I'm missing. Any help is greatly appreciated.

Thanks!

Big Sweater Design - No, I do not knit

volfro
Offline
Regular
Atlanta, GA, USA
Last seen: 7 years 8 weeks ago
Atlanta, GA, USA
Timezone: GMT-4
Joined: 2005-08-17
Posts: 26
Points: 0

I should also mention that

I should also mention that currently the UL is absolutely positioned, but I've also positioned it using floats. It doesn't make a difference, unless I missed something.

Big Sweater Design - No, I do not knit

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Remove the XML prolog and

Remove the XML prolog and see what happens.

Verschwindende wrote:
  • CSS doesn't make pies

volfro
Offline
Regular
Atlanta, GA, USA
Last seen: 7 years 8 weeks ago
Atlanta, GA, USA
Timezone: GMT-4
Joined: 2005-08-17
Posts: 26
Points: 0

No difference, at least in

No difference, at least in Firefox (my testing browser). Also messed with the xhtml xmlns tag, simplifying it to dir=ltr.

Big Sweater Design - No, I do not knit

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

move the text-indent out of

move the text-indent out of the a into the li

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

volfro
Offline
Regular
Atlanta, GA, USA
Last seen: 7 years 8 weeks ago
Atlanta, GA, USA
Timezone: GMT-4
Joined: 2005-08-17
Posts: 26
Points: 0

Again, no dice. I've moved

Again, no dice. I've moved that text-indent all around the stylesheet, believe me.

The thing that gets me is that the other typographical changes work flawlessly. At the bottom of the stylesheet are the rules for transforming the text, its colors, etc., and they do exactly what they're supposed to. But the text-indent refuses to work.

(I also tried the Malarkey image replacement technique; letter-spacing works just fine as well, but I had other issues getting it to work in IE6 and Konqueror/Safari, as well as Opera.)

Thanks for all the help thusfar though! Keep the suggestions coming.

Big Sweater Design - No, I do not knit

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Got it. line 274 of your

Got it.

line 274 of your style.css

#nav {style.css (line 274) font-size:0.8em; font-weight:bold; text-align:right; text-transform:uppercase; }

take out the text-align

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

volfro
Offline
Regular
Atlanta, GA, USA
Last seen: 7 years 8 weeks ago
Atlanta, GA, USA
Timezone: GMT-4
Joined: 2005-08-17
Posts: 26
Points: 0

You have no idea how hard I

You have no idea how hard I just slapped my forehead.

I just stayed up all night, knowing I was missing something but not knowing what, and it turns out it was just a stupid text align rule.

Good lord.

I had no idea aligning the text would affect text-indent so weirdly. Live and learn, I suppose.

Marking this bad boy as resolved. THANK YOU. You saved my life.

Big Sweater Design - No, I do not knit

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Glad I could help

Glad I could help :thumbsup:

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph