Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    Regular Coder
    Join Date
    Aug 2006
    Posts
    181
    Thanks
    0
    Thanked 0 Times in 0 Posts

    simple css: how to make all the text white

    Hi, this is the content of my css:

    Code:
    listing, .listing_body, .listing_head, .listing_head h2{ background-color: #C80000; color: #ffffff; }
    .listing,         .listing_alt{width:511px; padding-right:4px; margin:8px auto;}
    .listing_body,    .listing_alt .listing_body{background-position: bottom left; margin-right:8px; padding:12px 0 4px 12px; color: #ffffff;} 
    .listing_head,    .listing_alt .listing_head{background-position:top right; margin-right:-4px; padding-right:12px; color: #ffffff;} 
    .listing_head h2, .listing_alt .listing_head h2{background-position:top left; margin:0; border:0; padding:12px 0 0px 12px; height:auto !important; height:1%; font-size:.95em; font-weight:bold;}
    .listing_head h2 a{color:#ffffff;}
    .listing_body .amenities{width:auto !important; width:390px; padding:0 0 0 4px; margin:0 0 .75em 94px !important; margin:0 0 .75em 0; font-size:.85em; color:#748566; font-weight:bold;}
    .listing_body .shadow{width:90px; float:left;}
    .listing_body .description {
      color: #ffffff;
      width: auto !important;
      width: 390px;
      padding: 0;
      margin: 0 0 0 94px !important;
      margin: 0;
      font-weight: normal;
      font-size: 1em;
    }
    .listing_body .description p{margin:0; padding:0 0 0 4px;}
    .listing_body .action_link{padding:0 0 9px 0; float:right;}
    .listing_body .favlink{margin-top:5px;}
    What i want to do is make all the text in those elements white. How can i do that?
    Thank you

  • #2
    Regular Coder BonRouge's Avatar
    Join Date
    Mar 2006
    Location
    Sendai, Japan
    Posts
    328
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    body {
    color:#fff;
    }
    Or for those you have there:
    Code:
    .listing, .listing_body, .listing_head, .listing_head h2, .listing_alt {
    color:#fff;
    }
    Last edited by BonRouge; 05-18-2007 at 05:08 PM.

  • #3
    Regular Coder
    Join Date
    Aug 2006
    Posts
    181
    Thanks
    0
    Thanked 0 Times in 0 Posts
    that's not working

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,339
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Add color: white to the relevant style rules. It is possible to target every element in a document at once, although I suspect that this is not what you want. Example:

    Code:
    * { color: white !important; }
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Regular Coder BonRouge's Avatar
    Join Date
    Mar 2006
    Location
    Sendai, Japan
    Posts
    328
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You might want to post a link to your page...

  • #6
    Regular Coder
    Join Date
    Mar 2006
    Location
    Connecticut, USA
    Posts
    400
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I might be wrong, but I seem to remember reading that you cannot use underscores (_) in your class or ID selectors. Try removing them or replacing them with hyphens.

    Also, in addition to the body, you might have to also specify link colors:

    Code:
    a:link, a:visited, a:active, a:hover { color: #fff }
    or maybe you want hover to be a different color:
    Code:
    a:hover { color: #00 }

  • #7
    Regular Coder BonRouge's Avatar
    Join Date
    Mar 2006
    Location
    Sendai, Japan
    Posts
    328
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bustamelon View Post
    I might be wrong, but I seem to remember reading that you cannot use underscores (_) in your class or ID selectors.
    No, that's not true.
    Quote Originally Posted by bustamelon View Post
    Code:
    a:link, a:visited, a:active, a:hover { color: #fff }
    Good point. That might be the problem. We haven't actually seen any html, so it's not easy to say.

  • #8
    Regular Coder
    Join Date
    Mar 2006
    Location
    Connecticut, USA
    Posts
    400
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by BonRouge View Post
    No, that's not true.
    Upon further reading, it looks like that WAS true in CSS1. Of course that's a long time ago, but until IE7 came out, we really had to follow css1 rules with respect to IE. So unless you're willing to alienate users with old browsers (I have been known to do so myself), underscores should be avoided.

    Here's an article backing that up, though it is six years old:

  • #9
    Regular Coder BonRouge's Avatar
    Join Date
    Mar 2006
    Location
    Sendai, Japan
    Posts
    328
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Eric Meyer's article from 6 years ago
    Support realities

    Between mistakes in implementation and changes to the specification, browser behavior with regard to underscores is rather convoluted.

    * Netscape 6.x permits underscores and escaped underscores.
    * Navigator 4.x honored the restriction against underscores, and so any class or ID name with an underscore will be ignored by Navigator 4.x, so the associated styles will never be applied. It also ignored escaped underscores.
    * Internet Explorer 4.x and 5.x for Windows erroneously allowed underscores, and so were both non-conformant on this point until the errata was published. The same is true of IE4.x and 5.x for Macintosh.
    * Internet Explorer 6 for Windows, published after the errata, permits underscores and escaped underscores.
    * Opera 3.x through 5.x does not recognize underscores or escaped underscores, and so acts the same as Navigator 4.x in this regard.
    According to that, the only problems you might have are with Netscape 4 and Opera 5. I think most people will be more than happy not worrying about them.

    Don't worry about underscores. They're fine. (Apart from at the start of a class or id - you can't use them there).
    Last edited by BonRouge; 05-19-2007 at 02:35 AM.

  • #10
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    shouldn't it be possible to achieve the goal of all text white by removing every instance of "color: #XXX;" throughout your CSS and have:

    body { color: #fff;}

    to achieve all text to be colored as such.

    ED: if one gets distracted and alt-tabs to do some coding and reply to emails, i should re-read other's replies before writing that post :P sorry BonRouge, reread your response after posting.

    The only way it wouldn't work is if there's 'color' settings throughout your xhtml, such as with font tags or header styling.
    Last edited by CoNt3MpT; 05-19-2007 at 03:08 AM.

  • #11
    Regular Coder
    Join Date
    Aug 2006
    Posts
    181
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I know that i have to specify the a: color things because there are links that have to be white, but normal text in those divs are still not shown in white, while they don't have a link, so i don't understand.

    Here is the corresponding html:
    PHP Code:
        <div id="main">
    <
    div class="listing_alt">
      <
    div class="listing_head">
        <
    h2 class="clear_link">
          <
    a href="/browse.php?act=details&id=1">&euro;Townhouse in Cadiz Costa de la Luz;        
                 </
    a>
        </
    h2>
      </
    div>
      <
    div class="listing_body">
        <
    span class="shadow">
          <
    a href="/browse.php?act=details&id=1"><img alt="1_thumb" class="thumbnail" height="60" src="$tumburl" width="80" /></a>
        </
    span>
        <
    h3 class="description">
          <
    p>
           
    This is the previewdescription
          
    </p>
        </
    h3>
        <
    br class="clear" />

        <
    div class="w49 action_link">
          <
    a href="/browse.php?act=details&id=1">View</a>
        </
    div>
        <
    br class="clear double" />
      </
    div>
    </
    div>


        </
    div
    And, to be clear, the css i'm currently using and that's not working:
    Code:
    listing, .listing_body, .listing_head, .listing_head h2{ background-color: #C80000;}
    .listing, .listing_body, .listing_head, .listing_head h2, .listing_alt {
    color:#fff;
    }
    .listing,         .listing_alt{width:511px; padding-right:4px; margin:8px auto;}
    .listing_body,    .listing_alt .listing_body{background-position: bottom left; margin-right:8px; padding:12px 0 4px 12px; color: #ffffff;} 
    .listing_head,    .listing_alt .listing_head{background-position:top right; margin-right:-4px; padding-right:12px; color: #ffffff;} 
    .listing_head h2, .listing_alt .listing_head h2{background-position:top left; margin:0; border:0; padding:12px 0 0px 12px; height:auto !important; height:1%; font-size:.95em; font-weight:bold;}
    .listing_head h2 a{color:#ffffff;}
    .listing_body .amenities{width:auto !important; width:390px; padding:0 0 0 4px; margin:0 0 .75em 94px !important; margin:0 0 .75em 0; font-size:.85em; color:#748566; font-weight:bold;}
    .listing_body .shadow{width:90px; float:left;}
    .listing_body .description {
      color: #ffffff;
      width: auto !important;
      width: 390px;
      padding: 0;
      margin: 0 0 0 94px !important;
      margin: 0;
      font-weight: normal;
      font-size: 1em;
    }
    .listing_body .description p{margin:0; padding:0 0 0 4px;}
    .listing_body .action_link{padding:0 0 9px 0; float:right;}
    .listing_body .favlink{margin-top:5px;}

  • #12
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    The only text in there is here
    Code:
        <h3 class="description">
          <p>
           This is the previewdescription
          </p>
        </h3>
    According to your stylesheet it should be white. If this is not the case then you need to show us a link to your page because I have a feeling that you think you know what you have to show us but something else is causing the problem. Help us help you. Don't make this harder than it has to be.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #13
    Regular Coder
    Join Date
    Aug 2006
    Posts
    181
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, here's the full php code:


    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">

    <head>
    <title>My page</title>
    <link rel="stylesheet" type="text/css" href="site.css">
    <link rel="stylesheet" type="text/css" href="browse.css">
    </head>

    <body>

    <div id="wrap">
        <div id="header">
    <?php include("PHP_includes/banner_ads.htm");?>
        </div>
        <div id="leftcol">
            <div id="nav">
                <?php include("PHP_includes/navigation.htm");?>

            </div>
        </div>
            <div id="rightcol">
            <?php include("PHP_includes/googleads.htm");?>
            </div>
        <div id="main">
    <?//First we make a connection with the database
    include("PHP_includes/connect.php");
    //Look what action is requested
    $action=$_GET['act'];

    //If no action is specified, load a browsing page
    if(empty($action)){
        
    $sql="Select property_id,previewdescription,type,province,price From tblproperty ORDER BY dateadded DESC LIMIT 0,10";
        
    $query=mysql_query($sql);
        while(
    $obj mysql_fetch_object($query)){  //FETCH A RESULT AND PRINT ALL BELOW (PER RESULT)

    //SPECIFYING VALUES
    $id=$obj->property_id;
    $description=$obj->previewdescription;
    $type=$obj->type;
    $province=$obj->province;
    $price=$obj->price;
    //END SPECIFYING

    print'<div class="listing_alt">
      <div class="listing_head">
        <h2 class="clear_link">
          <a href="/browse.php?act=details&id='
    .$id.'">&euro;'.$price.' - '.$type.' in '.$province.';        
                 </a>
        </h2>
      </div>
      <div class="listing_body">
        <span class="shadow">
          <a href="/browse.php?act=details&id='
    .$id.'"><img alt="1_thumb" class="thumbnail" height="60" src="$tumburl" width="80" /></a>
        </span>
        <h3 class="description">
          <p>
           '
    .$description.'
          </p>
        </h3>
        <br class="clear" />

        <div class="w49 action_link">
          <a href="/browse.php?act=details&id='
    .$id.'">View</a>
        </div>
        <br class="clear double" />
      </div>
    </div>
    '
    ;

        } 
    // END WHILE LOOP
    }elseif($action=='details'){
    echo
    "UNDER CONSTRUCTION";
    }

    ?>


        </div>
        <div id="footer">
        <?php include("PHP_includes/footer.htm");?>

        </div>
    </div>

    </body>

    </html>
    and you already received the full browse.css page above twice

  • #14
    Regular Coder BonRouge's Avatar
    Join Date
    Mar 2006
    Location
    Sendai, Japan
    Posts
    328
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can you post a link to the page. Failing that, can you post the full css?

  • #15
    Regular Coder
    Join Date
    Aug 2006
    Posts
    181
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Never mind I'll code it another way then
    Last edited by arne2; 05-19-2007 at 04:20 PM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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