48 users online (0 members and 48 guests)  


  Results 1 to 6 of 6

Related

  1. CSS code help with external sheet    Forum: CSS Forum
    Replies: 3
  2. Replies: 0
  3. create a table along the width of the sheet    Forum: General Discussion
    Replies: 1
  4. basic css style sheet for print    Forum: CSS Forum
    Replies: 2
  5. Replies: 9
  1. #1
    Jackie SENSE's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2003
    Posts
    7

    inline style overuled by external sheet

    I have an included page(a navigation menu), which when viewed in a browser on its own, shows my links and hover text in white and yellow correctly. I used an internal style sheet in the head tags.
    When I view this page through a page that it is included in, the links revert to the external stylesheet, blue & red. I have placed the following inline code hoping it would force the include to use it - but no joy.
    the link is here: http://www.sensibleweb.co.uk/test/asi/

    The inline code is here:
    <td align="right" valign="top" width="20%" style="
    a:link color: #FFFFFF; text-decoration: none;
    a:visited color: #FFFFFF; text-decoration: none;
    a:hover color: #FFCC33; text-decoration: none;
    a:active color: #FFFFFF; text-decoration: none"
    >
    <!--webbot bot="Include" U-Include="includes/menu.htm" TAG="BODY" --></td>

    Can any one correct me please?

  2. #2
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Hiya Jackie.

    inline styles are designed to apply more for the element they are placed in. Combine that with using :hover (pseudo classes) then you are going to get unpredictable results.

    If I was you, I would give the td tag a classname (eg linktd) and setup the styles above it like this -

    Code:
    td.linktd a {
    color: white;
    }
    td.linktd a:hover {
    whatever;
    }
    This should work fine.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  3. #3
    Jackie SENSE's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2003
    Posts
    7
    Thanks Dean

    Sorry for being thick I have read about classnames but am a bit confused. Are you able to expand on your answer please?

  4. #4
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    No worries.

    Actually, I wrote a tutorial on how classes work , heres an exerpt -

    Any rules beginning with a full-stop, (.), denote them as applying to a class, so that anything you put CLASS="little" in with its tag would have the .little rule applied to it.
    to expand, rule
    Code:
     .little {
    color: red;
    }
    Would mean all classes "little" would have a red font.

    id's are similar, but should be unique and are accessed with #little instead.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  5. #5
    Jackie SENSE's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2003
    Posts
    7
    Thanks Dean
    Another kind person provided some help along the same recommendations as yourself and it works like you said. I will place it below in case it helps anyone else:

    The <a class="menu" ... goes with every link in your menu, so you would have
    Code:

    <a class="menu" href="asi_conferences.htm">...
    <a class="menu" href="commercial_communications.htm">...
    <a class="menu" href="about_us.htm">...


    And any others I've missed.
    Then because they have been assigned to a class, the menu links will get the style from the menu class in your style sheet.
    Just add Code:

    a.menu:link{ color: #FFFFFF; text-decoration: none;}
    a.menu:visited {color: #FFFFFF; text-decoration: none;}
    a.menu:hover {color: #FFCC33; text-decoration: none;}
    a.menu:active {color: #FFFFFF; text-decoration: none;}

    to your external style sheet. It will only affect the links of class menu.
    If you have a few minutes spare you could go through and remove all the font tags then restyle it using CSS

    Tony

  6. #6
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Good stuff. Glad you got it working.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?



Tags for this Thread