Question

There is a strange bug in my code that just came up unexpectedly. I am using a side scrolling html template using the jquery sliding plug in. I did not write the code. I am unfamiliar with the deeper levels of jquery but I can mock up a website using a template. I am learning. I want to know why when I click on Fire Code that my Home Button does not work and will not allow me to navigate back to my Home Posiiton. The thing that bugs me is that if I click the City button and go into the third position then I can go back to my home position. It is only in the second position that causes me to not be able to come back to my home position and I do not know why.

The website in question is at http://lightsandfire.com and the corresponding CSS code is as follows as well.

   ul.vert-one{
        position: fixed;
        top: 5px;
        left: 5px;
        margin:0;
        padding:0;
        list-style-type:none;
        display:block;
        font:bold 16px Helvetica, Verdana, Arial, sans-serif;
        line-height:165%;
        width:200px;
    }

    ul.vert-one li{
        margin:0;
        padding:0;
        margin-top: 2px;
        border-top:1px solid #4D0000;
        border-bottom:1px solid #761A1A;

        }

    ul.vert-one li a{
        display:block;
        text-decoration:none;
    color:#fff;
    background:#600;
    padding:0 0 0 20px;
    width:180px;
    }

ul.vert-one li a:hover{
    background:#900 url("images/vert-one_arrow.gif") no-repeat 0 9px;
    }

ul.vert-one li a.current,ul.vert-one li a.current:hover{
    background:#933 url("images/vert-one_arrow.gif") no-repeat 0 9px;
    }

If you could help me identify the problem I would appreciate it greatly.

Answer 1

Its becouse of the h1 tag is really big so its overlap the home button.

Add this:

h1 {
    font-family: 'Revalia', cursive;
    position: relative;
    left: 250px;
    color: #E600E6; 
    width: 500px; /* This is the new line */
}