SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation 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.

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Absolutely Coder!!!
    You can view it in action at http://www.ackuit.com/tiga/about.html

    and here is the css:
    http://www.ackuit.com/tiga/styles/about.css

    Thanks!!!

    P.S: I'm a novice css experimenter, so please do not "harumph!" at my code

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi Ackuit, Welcome to SitePoint!

    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.

  5. #5
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    You need to adjust the widths and margins :

    Code:
    #footer_contents { margin:0; padding:5px; width:1000px; height:150px; font:Verdana, Geneva, sans-serif small; text-transform:capitalize; color:#222; }
    
    #container_footer { width:1000px; height:50px; margin:0; padding:0;  }
    Maleika E. A. | Rockatee | Twitter | Dribbble



  7. #7
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @ 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.

  8. #8
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Don't apologise, Ackuit! Nothing appears repulsive at all.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  9. #9
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    really? well thanks, I feel like a coder in the ranks of Dave Shea already.
    (well I wish..)

  10. #10
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ackuit View Post
    I took out the <p> tags because it didn't allow the negative indent to work,...

    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.
    We will help point you in the right direction if you want to learn how to code properly.

    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 &nbsp; tags and use margins as I mentioned above.
    Code:
                <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).
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <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>
                <div id="about_block" class="blocktext mission">
                <h6 class="block_title">&gt;&gt; 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>
    
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                     <h6 class="block_title">&gt;&gt; Our Mission</h6>
                
                    <span class="white">&nbsp;&dagger;&nbsp;</span>Transforming people and places.<span class="white">&nbsp;&dagger;&nbsp;</span>
                </div>

  11. #11
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IT WORKS!!!!!!!!!!!!!!!!!
    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!!

  12. #12
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Your getting closer.

    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.

    Code:
    <div id="navigation_holder">
        <div class="navi_alt">
            <div id="nav">
                <ul id="nav">
                    <li id="nav"><a href="index.html">home</a></li>
                    <li id="nav" class="selected"><a href="about.html">about</a></li>
                    <li id="nav"><a href="services.html">services</a></li>
                    <li id="nav"><a href="gallery.html">gallery</a></li>
                    <li id="nav"><a href="contact.html">contact</a></li>
                </ul>
            </div>
        </div>
    </div>
    2) 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.

    Code:
    <div id="about_block_first" class="blocktext who">
        <span>
            <h6 class="block_title">&gt;&gt; Who We Are</h6>
            <p 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.
            </p>
            <p class="text">
            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>
            <p class="text">
            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.
            </p>
        </span>      
    </div>

  13. #13
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!!!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •