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.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Who's got css skills? I need an expert

    For the life of me, I cannot figure out what css file or value is affecting some text. It only shows up in IE, but it looks horrible.

    In IE only, the words "Website Package" and "Payments" show up in black. I have used firebug to try and determine what the source is, but to no avail.

    I can tell you that it is not line 20 or 36 in template.css because changing the #000000 to #ffffff does nothing.

    If anyone with css skills can figure this out, I will be very grateful.

    Zechariah

    http://www.turningpointweb.com/index...layout=onestep

  • #2
    New Coder
    Join Date
    Oct 2009
    Posts
    26
    Thanks
    2
    Thanked 1 Time in 1 Post
    I might be wrong but I just looked through your source and saw it's wrapped between <legend></legend> so therefore in your CSS file "template.css" add the following:

    Code:
    legend {
    color:#fff;
    }
    It may or may not work... but it's worth a try

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    According to W3 validators, you have 70 html errors and 70 css errors.

    You should put these right.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    New Coder
    Join Date
    Oct 2009
    Posts
    26
    Thanks
    2
    Thanked 1 Time in 1 Post

  • #5
    New Coder
    Join Date
    Jun 2010
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bennyy007 View Post
    I might be wrong but I just looked through your source and saw it's wrapped between <legend></legend> so therefore in your CSS file "template.css" add the following:

    Code:
    legend {
    color:#fff;
    }
    It may or may not work... but it's worth a try
    That did the trick! I saw that <legend> seemed to be an area of interest in firebug but I had no idea how to solve the issue. THANK YOU.

    Yeah those errors are from the developers of the extensions and template I am using. It looks like they weren't too interesteed in being W3 valid...

    I will address those errors in the future.

    Thank you benny007

  • #6
    New Coder
    Join Date
    Oct 2009
    Posts
    26
    Thanks
    2
    Thanked 1 Time in 1 Post
    No worries glad it helped

  • Users who have thanked bennyy007 for this post:

    turningpoint (07-02-2010)

  • #7
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Seo Services India

    I need to make a little line 2px high and about 15 px long. How can I do this in html / css?

    Seo Services India

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    One way is to use a div 15px by 2px and fill with the colour that you need. Move the div in the normal way.
    You can also use a div and just put a border on one side.

    Frank
    Last edited by effpeetee; 06-30-2010 at 10:10 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #9
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    312
    Thanks
    1
    Thanked 36 Times in 36 Posts
    You should use the <hr> tag.
    In your CSS:
    Code:
    hr{
    width:15px;
    height: 2px;
    background-color: #000;
    color:  #000;
    }
    (you need to give it color and background color or it won't work in IE6. Change the colour to whatever you want)

    Then in your html
    Code:
    <hr>
    Or if using xhtml
    Code:
    <hr />
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • #10
    New Coder
    Join Date
    Jun 2010
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you so much for the previous answer.

    On another CSS note, I need to add a square border around the top portion of form fields on this page: http://www.turningpointweb.com/index...on-and-payment

    I have given it my best, but all I can successfully create is a border that stretches the entire width of the page, which that obviously looks terrible.

    The image best shows what I am trying to do. The padding on the right of the form fields are for a "required" prompt. I have heard that its possible to do rounded corners with pure css, but if its too complicated, just a basic square border will do.

    I am aware of all the page errors the extension and template providers gave me to fix

    Any help to steer me in the right direction is much appreciated.



    Sincerely,
    Zechariah
    Last edited by turningpoint; 07-01-2010 at 04:27 AM.

  • #11
    New Coder
    Join Date
    Oct 2009
    Posts
    26
    Thanks
    2
    Thanked 1 Time in 1 Post
    For making a border only stay around the the content and not flow to the entire page width is use this simple method...

    Code:
    div.login
    {
    border:1px #fff solid;
    width:400px;
    overflow:hidden;
    padding:left:3px;
    padding-right:10px;
    padding-bottom:8px;
    padding-top:5px;
    }
    Now all you need to do is mess about with padding-right,padding-left,padding-bottom,padding-top and width to get it perfect to your liking of course.

    Good luck
    Last edited by bennyy007; 07-02-2010 at 07:42 AM.

  • #12
    New Coder
    Join Date
    Jun 2010
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks again benny


  •  

    Posting Permissions

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