Thread: CSS problem

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    2
    Rep Power
    0

    CSS problem


    My problem is with the page title of my page.
    My website is Velmex.com
    if you go to Manual Products you will see the page title "Manual linear slides & Rotary table home page"
    you'll notice the color is blue and the decoration is underlined

    Now, looking at the green Options section, click on the first link -"Locks"

    You'll notice the text on that page the title "Lock options" is black not blue and is not decorated with the underline.

    That is my problem.

    I don't understand why.
  2. #2
  3. Old Fart
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Location
    Chicago
    Posts
    97
    Rep Power
    4
    The stylesheet link on the Lock Options page:

    Code:
    <link rel="stylesheet" href="/styles/styles.css" type="text/css">
    The stylesheet link on the Manual Linear Slides & Rotary Tables page:

    Code:
    <link rel="stylesheet" href="styles/styles.css" type="text/css">
    I believe the extra "/" is your problem.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    2
    Rep Power
    0
    Originally Posted by richpri
    The stylesheet link on the Lock Options page:

    Code:
    <link rel="stylesheet" href="/styles/styles.css" type="text/css">
    The stylesheet link on the Manual Linear Slides & Rotary Tables page:

    Code:
    <link rel="stylesheet" href="styles/styles.css" type="text/css">
    I believe the extra "/" is your problem.
    I tried that and it did not resolve the problem. Actually, I originally added the "/" thinking that might fix it.

    in any case, I've removed it but the problem remains.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    Welcome to DevShed Forums, richard_y.

    The differences are because there are some errors in the stylesheet and the two pages are being rendered in different modes because one has a doctype and the other doesn't. Add the missing doctype and fix the HTML and CSS errors. For that particular case, the "#" prefix was missing from the color specified in hex-notation.

    The first step in debugging should always be making sure that your code is valid (in order to rule out any errors as the cause for the problem).
    http://validator.w3.org/
    http://jigsaw.w3.org/css-validator/ (Under "more options", make sure it's set it to use "CSS level 3".)
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo