Hover link color

Hi,

On one of my pages on my site I have the problem that it will not accept my CSS hover link color. It displays a strange gray-green color which and I don't have the slightest idea where that color comes from. I use the color red for hover-link on all my other pages so that is what i want on this page too. Not a very big problem, but it is a little (very :) ) annoying that I can't fix it.

See the page here https://kroweb.dk/gfdev/ft_raw2/, and make a couple of choices in the drop-down boxes and hit the search button ("Søg"). You will the see at list of results presented in a table, and the column first column holds links.

I have this main file:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Folketællinger</title>

 

    <link rel="stylesheet" type="text/css" href="style.css">

  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" >

    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   

   <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css" />

  <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>

  <script type="text/javascript" src="jquery.dataTables.js"></script>
 
  <script type="text/javascript">
    $(function(){
        $('#ft_items').on('click', '.toggle', function() {
            $(this).parents('tr').nextAll('tr.child').toggle();
        });
    });
    </script>


</head>

<body>
    <!-- Søge felt til folketællinger -->
    <div class="container" style="width:100%;padding-top:10px;background-color:#f6f6f6;">
        <!-- HEADER START -->
        <div class="row" id="header">


            <form method="POST" id="search" style="margin-left:30px; margin-right: 30px;"> 
                <label for="amt">Amt</label> 
                <select id="amt" name="amt" style="width: 125px; margin-right: 20px; font-weight:normal; ">
                    <option value=""></option>
                    <option value="Bornholm">Bornholm</option>
                    <option value="Frederiksborg">Frederiksborg</option>
                    <option value="Færøerne">Færøerne</option>
                    <option value="Grønland">Grønland</option>
                    <option value="Haderslev">Haderslev</option>
                    <option value="Hjørring">Hjørring</option>
                    <option value="Holbæk">Holbæk</option>
                    <option value="København">København</option>
                    <option value="Køøge">Køge</option>               
                    <option value="Maribo">Maribo</option>
                    <option value="Odense">Odense</option>
                    <option value="Præstø">Præstø</option>
                    <option value="Randers">Randers</option>
                    <option value="Ribe">Ribe</option>
                    <option value="Ringkøbing">Ringkøbing</option>
                    <option value="Roskilde">Roskilde</option>
                    <option value="Skanderborg">Skanderborg</option>
                    <option value="Sorø">Sorø</option>
                    <option value="Svendborg">Svendborg</option>
                    <option value="Sønderborg">Sønderborg</option>
                    <option value="Thisted">Thisted</option>
                    <option value="Tønder">Tønder</option> 
                    <option value="Vejle">Vejle</option>
                    <option value="Viborg">Viborg</option>
                    <option value="Aabenraa">Aabenraa</option>
                    <option value="Aalborg">Aalborg</option>
                    <option value="Aarhus">Aarhus</option>
                    <option value="Åbenrå-Sønderborg">Åbenrå-Sønderborg</option>
                </select>

                <label for="type">Type</label>
                <select id="type" name="type"style="width: 140px; margin-right: 20px; font-weight:normal;">
                    <option value=""></option>
                    <option value="Landdistrikt">Søg i Landdistrikter</option>
                    <option value="Købstad">Søg i Købstæder</option>
                    <option value="Hovedstaden">Søg i Hovedstaden</option>
                    <option value="Slesvig">Søg i Selsvig</option>
                    <option value="Særtælling">Søg i Særtællinger (alle Typer)</option>
                    <option value="Diverse">Søg i Diverse</option>
                </select>


                <label for="aar">År</label>                
                <select id="aar" name="query_start" style=" width: 100px; margin-right: 20px; font-weight:normal; ">
                    <option value=""></option>
     
                    <option value="1787"style=" color: black; ">1787</option> 
                    <option value="1801"style=" color: black; ">1801</option> 
                    <option value="1834"style=" color: black; ">1834</option>
                    <option value="1835"style=" color: black; ">1835</option>
                    <option value="1840"style=" color: black; ">1840</option>
                    <option value="1845"style=" color: black; ">1845</option>
                    <option value="1850"style=" color: black; ">1850</option>
                    <option value="1855"style=" color: black; ">1855</option>
                    <option value="1860"style=" color: black; ">1860</option>  
                    <option value="1870"style=" color: black; ">1870</option>
                    <option value="1880"style=" color: black; ">1880</option> 
                    <option value="1890"style=" color: black; ">1890</option> 
                    <option value="1901"style=" color: black; ">1901</option>
                    <option value="1906"style=" color: black; ">1906</option>
                    <option value="1911"style=" color: black; ">1911</option>
                    <option value="1916"style=" color: black; ">1916</option>
                    <option value="1921"style=" color: black; ">1921</option>
                    <option value="1925"style=" color: black; ">1925</option>
                    <option value="1930"style=" color: black; ">1930</option>
                    <option value="1940"style=" color: black; ">1940</option>                             
                    <option value="1645"style="color:red;">1645</option>
                    <option value="1664-1833"style="color:red;">1664-1833</option>
                    <option value="1702-1741"style="color:red;">1702-1741</option>
                    <option value="1709-1831"style="color:red;">1709-1831</option>
                    <option value="1717"style="color:red;">1717</option>
                    <option value="1721-1833"style="color:red;">1721-1833</option>
                    <option value="1728"style="color:red;">1728</option>
                    <option value="1731"style="color:red;">1731</option>
                    <option value="1732-1761"style="color:red;">1732-1761</option>
                    <option value="1764-1819"style="color:red;">1764-1819</option>
                    <option value="1764-1848"style="color:red;">1764-1848</option>
                    <option value="1769"style="color:red;">1769</option>
                    <option value="1772-1846"style="color:red;">1772-1846</option>
                    <option value="1773-1846"style="color:red;">1773-1846</option>
                    <option value="1787-1851"style="color:red;">1787-1851</option>
                    <option value="1790"style="color:red;">1790</option>
                    <option value="1803"style="color:red;">1803</option>
                    <option value="1805"style="color:red;">1805</option>
                    <option value="1805-1814"style="color:red;">1805-1814</option>
                    <option value="1810"style="color:red;">1810</option>
                    <option value="1811"style="color:red;">1811</option>
                    <option value="1812-1823"style="color:red;">1812-1823</option>
                    <option value="1812-1871"style="color:red;">1812-1871</option>
                    <option value="1814"style="color:red;">1814</option>
                    <option value="1814-1841"style="color:red;">1814-1841</option>
                    <option value="1815-1867"style="color:red;">1815-1867</option>
                    <option value="1818"style="color:red;">1818</option>
                    <option value="1820"style="color:red;">1820</option>
                    <option value="1822"style="color:red;">1822</option>
                    <option value="1823"style="color:red;">1823</option>
                    <option value="1824"style="color:red;">1824</option>
                    <option value="1826"style="color:red;">1826</option>
                    <option value="1831"style="color:red;">1831</option>
                    <option value="1861"style="color:red;">1861</option>                  
                    <option value="1870-1873"style="color:red;">1870-1873</option>
                    <option value="1878"style="color:red;">1878</option>                  
                    <option value="1882"style="color:red;">1882</option>
                    <option value="1882-1919"style="color:red;">1882-1919</option>
                    <option value="1886-1907"style="color:red;">1886-1907</option>
                    
                    
                    
                </select>

                <label for="sogn">Sted, By, Sogn, Gade</label>
                <input type="text" name="sogn" id="sogn" placeholder="Fritekst" style="color: #e08a94;">
                <input type="submit" value="Søg" name="Sog" id="Sog">  
                <input type="reset" value="Nulstil">
                <script>
                $(':reset', '#search').click(function(e) {
                    $('#ft_items').html('');
                    location.reload();
                });
                </script>

            </form>
        </div>  
        <!-- HEADER END -->        
    </div>   


    <div id="ft_items" </div>


    <script>

      // Search Button and Return key search function
      $('#search').submit(function(e) {
        e.preventDefault();
        $.ajax({
            url : 'ajaxFtHtml.php',
            method: 'post',
            data : $('#search').serialize(),
            dataType: 'html'
        }).done(function(res){
            $('#ft_items').html(res);
            $('#myTable').dataTable({searching: true, paging: false, info: false, "dom": '<"top"<if>', order: []}); 
        });
    });


      </script>


<script>
$(function() {
  $('#amt').change(function() {
     $.post('limit.php',{amt: $(this).val()}, function(options) {
        $('#aar').html(options)
     }) 
  });
  $('#type').change(function() {
     $.post('limit.php',{amt: $('#amt').val(), type: $(this).val()}, function(options) {
        $('#aar').html(options)
     })
  }); 

})
</script>      

  </body>
  </html>

Open in new window


And this CSS file:
        .dataTables_filter { float:right; }
        .dataTables_info { float: left; } 


        h2 {
            font-size: 14px;
            font-weight: normal;
            color: red;
            margin-left: 250px;
        }




      #myTable, th {
        border-top: 1px solid #666666;
        border-bottom: 1px solid #666666;
        border-right: 0px;
        border-left: 0px;
        padding-left:5px;
        padding-right:5px;
        margin-top:15px;
        margin-bottom:5px;
        border-collapse: collapse;
        padding-top:10px;
        padding-left:5px;
        color:black;
        font-family: Serif;
        font-size: 18px;
        font-weight: bold;
        text-align: left;
        background-color: #f6f6f6;
      }

      #myTable, td {

        border-top: 1px solid #666666;
        border-bottom: 1px solid #666666;
        border-left: 0px solid #666666;
        border-right: 0px solid #666666;
        border-collapse: collapse;
        vertical-align: bottom;
        height: 10px;
        margin-bottom:0px;
        margin-top:15px;
        padding-bottom: 0px:;
        padding-top:0px;
        padding-left:5px;
        padding-right:5px;
        color:black;
        font-family: Arial;
        font-size: 14px;
        font-weight: normal;
        text-align: left; 
        background-color: rgba(204, 255, 153, 0.2);


      }


        a:link {
            color: blue;
            text-decoration: underline;
            font-weight: bold;
        }
        a:visited {
            color: blue;
            text-decoration: underline;

        }
        a:hover {
            color: red;
            text-decoration: underline;
            font-weight:bold;
        }
        a:active {
            color: blue;
            font-weight: blue;
            text-decoration: underline;
        }



        #header { margin-top: 10px; margin-bottom:10px; }
 

Open in new window


I hope somebody can see where I am failing here :)
Peter KromanSenior Proposal SpecialistAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Snarf0001Commented:
It's coming directly from bootstrap's css:

a:focus,a:hover {
    color: #23527c;
    text-decoration: underline
}

Open in new window


Because you have Bootstrap as the last css file, it's overriding all of yours, since they're all just targeting the one level.
Generally speaking, you put BS as the first CSS include, so any overrides you need will be taken into account.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Peter KromanSenior Proposal SpecialistAuthor Commented:
Thanks Snarf0001,

You have saved my day - I have struggled with this little thing for several hours now. And of course is the last stylesheet the "controlling" one. Obvious  - I just could not see it :) :)

Thanks a lot for your help.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.