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 2 of 2
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    visited links in internet explorer 8

    I am having an issue in internet explorer 8 where when I click links, they move out of position. This happens in a few different instances actually. Here is one example, which is my navigation bar (code provided below). Everything seems to line up fine before you click on anything, but once a link has been visited, it moves out of position somehow. Any ideas about how to fix this for IE8? Again, everything looks okay and then once links have been visited, they don't behave correctly.

    HTML:

    <ul id="nav">
    <li><a href="/learning-toys/">Learning Toys</a></li>
    <li><a href="/spelling-toys/">Spelling Toys</a></li>
    <li><a href="/educational toys/">Educational Toys</a></li>
    <li><a href="/classroom-toys/">Classroom Toys</a></li>
    <li><a href="/library-toys/">Library Toys</a></li>
    <li><a href="/reading toys/">Reading Toys</a></li>
    </ul>

    CSS:

    #nav {
    float: left;
    width: 798px;
    margin-top: 2px;
    margin-right: 26px;
    margin-bottom: 0px;
    margin-left: 38px;
    }

    #nav li {
    list-style: none;
    float: left;
    font-family: "Comic Sans MS", sans-serif;
    letter-spacing: 1px;
    text-align: center;
    width: 133px;
    }

    #nav a:link, #nav a:visited {
    border: 1px solid #26D578;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #26D578;
    text-decoration: none;
    outline: none;
    font-size: 16px;
    display: block;
    }

    #nav a:hover {
    display: block;
    color: #000000;
    }

  • #2
    New Coder
    Join Date
    Mar 2012
    Location
    Tulsa, OK
    Posts
    31
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Code:
    #nav a:link, #nav a:visited {
    border: 1px solid #26D578;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #26D578;
    text-decoration: none;
    outline: none;
    font-size: 16px;
    display: block;
    }
    There is a lot of stuff going on here.

    The padding is changing from the un-clicked link to the clicked link... that will move it.

    There is a new border on the clicked link... that will move it.

    The link is changing display modes, from inline to block... that will move stuff.

    The font-size is changing on the clicked link... that will move things as well.


  •  

    Posting Permissions

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