SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Enthusiast hotdiggity's Avatar
    Join Date
    Aug 2004
    Location
    Brisbane
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Totally weird IE (PC) bug?

    Not sure if it's my coding or an Win IE bug (works fine on all other recent browsers on both PC and Mac including Mac IE), but the simple inclusion of a '#' in a href interferes with the correct css display of the link - in this case it wrongly takes on the 'menu' div style.

    Here's the page: http://www.selectivemutism.info/test.html.

    ...and the links:

    <a href="#top">Top</a> (displays incorrectly)

    <a href="top">Top</a> (displays correctly)


    ...and the code:


    <html>

    <head>
    <style type="text/css" media="screen"><!--
    body, html {
    color: #333;
    font-size: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color: white;
    margin: 0;
    padding: 0;
    height: auto }

    p, ul, li, td {
    font-size: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif }

    #menu a, a:visited, a:active {
    color: #636;
    text-decoration: none;
    display: block;
    margin-right: 20px;
    margin-left: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc }

    #menu a:hover {
    color: black;
    text-decoration: none;
    display: block;
    margin-right: 20px;
    margin-left: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc }

    #menu p {
    padding-left: 15px }

    a, a:active {
    color: #c00;
    text-decoration: underline }

    a:visited {
    color: #777;
    text-decoration: underline }

    a:hover {
    color: #000;
    font-weight: normal }

    --></style>
    </head>

    <body>
    <a id="top" name="top"></a><a href="#top">Top</a>&nbsp;|&nbsp;<a href="(EmptyReference!)">Home</a>&nbsp;|&nbsp;<a href="(EmptyReference!)">Privacy</a>&nbsp;|&nbsp;<a href="(EmptyReference!)">Disclaimer</a>
    <p><br>
    <br>
    <br>
    This is the correct displaybr>
    <br>
    <a href="top">Top</a>&nbsp;|&nbsp;<a href="(EmptyReference!)">Home</a>&nbsp;|&nbsp;<a href="(EmptyReference!)">Privacy</a>&nbsp;|&nbsp;<a href="(EmptyReference!)">Disclaimer</a></p>
    </body>

    </html>

    Can anyone explain please?

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's because you're declaring a:visited and a:active twice - change the third CSS rule to this:
    HTML Code:
    #menu a, #menu a:visited, #menu a:active {
    color: #636;
    text-decoration: none;
    display: block;
    margin-right: 20px;
    margin-left: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc }

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    It's because you're declaring a:visited and a:active twice
    Thats about the 4th time thats come up in the last few days - everyone must be reading the wrong book lol


Bookmarks

Posting Permissions

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