Negative Text-indent Not working in firefox

and in opera. IE works if I apply “!important”. Everything works perfectly in chrome. But firefox and opera are the outlaws here.
I need help. I’ve torn out half of my hair and with the way I’m going, I just might go bald before day’s end. :frowning:

Hi Ackuit, Welcome to SitePoint! :slight_smile:

The first thing I would suggest you do is get that html cleaned up. You should be wrapping your text in “p” tags. Then you can set margins and/or paddings on them, that will allow you to remove all those   tags you are using to create your spacing.

From there you just need to set a left padding on the “p” tags and then a negative value on text-indent will give you the negative text-indent.

Reverse Text Indent

If I am understanding you correctly the link above should serve as an example for what you want.

Perhaps it would help; if we could see a sample of your CSS or web-page code. As ‘text-indent’ property inherits, when specified on a block element, it will affect descendent inline-block elements.

Absolutely Coder!!!
You can view it in action at

and here is the css:


P.S: I’m a novice css experimenter, so please do not “harumph!” at my code :slight_smile:

Thanks Rayzur,
I took out the <p> tags because it didn’t allow the negative indent to work, I wanted the text away from the page, and to show on mouse hover. Too much of a hack I know, but the client likes it and I know of no other way to do it.
If you view it in chrome or IE8, it works just as planned, but firefox and opera have their own opinions anyway.

You need to adjust the widths and margins :

#footer_contents { margin:0; padding:5px; [B]width:1000px; [/B]height:150px; font:Verdana, Geneva, sans-serif small; text-transform:capitalize; color:#222; }

#container_footer { [B]width:1000px;[/B] height:50px; [B]margin:0; [/B]padding:0;  }

@ Kohoutek
whoa, thanks for the head-ups. I’ve made the changes, looks much better.
I’m a hack and learn kind of coder. Don’t have books, can’t afford to buy, so all I know are from tuts online. So please forgive me if my code appears repulsive. :slight_smile:

Don’t apologise, Ackuit! Nothing appears repulsive at all. :slight_smile:

really? well thanks, I feel like a coder in the ranks of Dave Shea already.
(well I wish…)

We will help point you in the right direction if you want to learn how to code properly. :wink:

Since you got your widths straightened out now you should be able to wrap your text in “p” tags without any problems.

Then get rid of these   tags and use margins as I mentioned above.

            <div id="about_block" class="blocktext profile">
            <img src="images/profile.png" width="50" height="84" align="" class="profile_image" />
            <h6 class="block_title">Lily Sefa-Boakye</h6>

            <span class="white">&nbsp;&dagger;&nbsp;</span>Trained at the College of Art, Kwame Nkrumah University of Science and Technology (Kumasi - Ghana), Sefa-Boakye has been involved in the management of artists ever since she graduated in 1999 with a BA in Art (Sculpture).
[/COLOR]<span class="white">&nbsp;&dagger;&nbsp;</span>
An art educationist, she has curated a number of exhibitions and organized seminars and workshops for diverse artists while managing wall spaces in several private and public buildings including the Kotoka International Airport in Accra.<span class="white">&nbsp;&dagger;&nbsp;</span>

            <div id="about_block" class="blocktext mission">
            <h6 class="block_title">>> Our Vision</h6>
                <span class="white">&nbsp;&dagger;&nbsp;</span>To ensure that Ghanaians appreciate the value of contemporary art and its ability to contribute to socio political and cultural development of the nation. This would be achieved through education and making art visible throughout the country.<span class="white">&nbsp;&dagger;&nbsp;</span>

[/COLOR]                 <h6 class="block_title">>> Our Mission</h6>
                <span class="white">&nbsp;&dagger;&nbsp;</span>Transforming people and places.<span class="white">&nbsp;&dagger;&nbsp;</span>

Thanks Rayzur, it finally works!
I’ve updated the site and you can check the code.
Thanks a million, and I’m ready for my code redemption!!

Your getting closer. :slight_smile:

The validator is still pointing out some errors in your code.
I’ll walk you through a few of them and briefly explain the errors.

  1. An ID is a unique selector that can only be used once on each page. You should be using classes when a selector needs to be used more than once. You can probably do away with that <div id=“nav”> altogether and just hook the styles to the ul. You probably don’t even need any classes on the <li>, just target them as #nav li to style them.
<div id="navigation_holder">
    <div class="navi_alt">
        <div [COLOR=Red]id="nav"[/COLOR]>
            <ul [COLOR=Red]id="nav[/COLOR]">
                <li [COLOR=Red]id="nav"[/COLOR]><a href="index.html">home</a></li>
                <li [COLOR=Red]id="nav"[/COLOR] class="selected"><a href="about.html">about</a></li>
                <li [COLOR=Red]id="nav"[/COLOR]><a href="services.html">services</a></li>
                <li [COLOR=Red]id="nav"[/COLOR]><a href="gallery.html">gallery</a></li>
                <li [COLOR=Red]id="nav"[/COLOR]><a href="contact.html">contact</a></li>
  1. You are nesting block level elements (h & p tags) inside an inline element (span). That span is not doing anything either, get rid of it.
<div id="about_block_first" class="blocktext who">
        [B]<h6[/B] class="block_title">>> Who We Are[B]</h6>[/B]
        [B]<p[/B] class="text">
        We are an independent art consultancy with new ideas and a fresh approach to the promotion and development of art. We pride ourselves on being able to execute the vision of our clients while bringing together a unique and appropriate art collection that will suit the requirements of art lovers, collectors and critics alike.
        [B]<p class="text">[/B]
        Our initial task at TIGA is to secure career progress and exposure for working Ghanaian Contemporary artists while serving as advocates for those artists with whom we have built solid, personal and professional relationships.
        <p class="text">[/B]
        Working from a constantly expanding database of artists, dealers, art connoisseurs and different sources, we execute projects with creative approaches while ensuring quality results. We welcome challenges and appreciate the uniqueness of every project and strive for optimum satisfaction for our clients.
    [COLOR=Red]</span> [/COLOR]     

Thanks Rayzur, I’m getting right on it. I’ve also been confused on this topic, cos when I look at the code of other coders, I see few ID selectors and more class selectors. And then I see multiple class selectors associated to just one ID selectors, and my brain would freeze from trying to follow up on the code. I learnt css the wrongest way by studying other css styles and replicating what they did. This must have been a bad foundation for me I suppose.
I’ll follow the link you supplied and get right on it.
Thanks!!! :slight_smile: