CSS Forum

**spedax** · 08:28 AM

Here is my HTML code and CSS code , I also added a screenshot of what actually happens.

HTML Code:

<body>
    <div class="container">
        <div id="header">
            <div id="logo">
            </div><!-- end logo -->
            <div id="navigation">
                <ul>
                    <li id="nav_home" class="current"><a href="index.html">Home</a></li>
                    <li id="nav_port" ><a href="index.html">Portfolio</a></li>
                    <li id="nav_know"><a href="index.html">Knowledge</a></li>
                    <li id="nav_con"><a href="index.html">Contact</a></li>
                </ul>
            </div><!-- end navigation -->
             <div class="clear"></div>
             <div id="headertext">
             </div><!-- end headertext -->
        </div><!-- end header -->
        <div classs="clear"></div>

Code:

* {
    margin:0;
    padding:0;
    border:0;
}
body{

    background-color: #f9f8f9;
    background-image: url(../images/bg.jpg); 
    background-position:top center;
    background-repeat: no-repeat;

}
.clear{
    clear:both;
}
.container {
    height:1000px;
    width:960px;
    margin: auto;
    margin-top: 50px;
    margin-bottom: 100px;
    background-color: white;
}
#logo{
    float:left;
    width: 176px;
    height:62px;
    background-image:url(../images/logo.jpg);
    margin-left:60px;
    margin-top:41px;
}
#header{
    width: 960px;
    height:100px;
}
#navigation{
    float:right; 
    width: 376px;
    height:75px;
    padding-top:54px;
    padding-right:60px;
}
#navigation li
{
display: inline;
list-style-type: none;
}

#nav_home a{
    float:left;
    display:block;
    width:79px;
    height:41px;
    background-image:url(../images/home.jpg);
    text-indent: -9999px;
}
#nav_home a:hover{
    background-position:0 -41px;
}


#nav_port a{
    float:left;
    display:block;
    width:91px;
    height:41px;
    background-image:url(../images/port.jpg);
    text-indent: -9999px;
}
#nav_port a:hover{
    background-position:0 -41px;
}
#nav_know a{
    float:left;
    display:block;
    width:120px;
    height:41px;
    background-image:url(../images/know.jpg);
    text-indent: -9999px;
}
#nav_know a:hover{
    background-position:0 -41px;
}
#nav_con a{
    float:left;
    display:block;
    width:86px;
    height:41px;
    background-image:url(../images/contact.jpg);
    text-indent: -9999px;
}
#nav_con a:hover{
    background-position:0 -41px;
}
.current a{
    background-position:0 -41px;    
}

I have no idea what might be causing this, any tips would be greartly appriciated!

See attached picture for how it actually looks.

Edit: I forgot to say it only happens when you click on the button.

**chrishirst** · 09-09-2009, 08:35 AM

and the "weird lines" are which ones?

BTW screenshots are of absolutely no use at all for debugging CSS.

Also, we cannot recreate the "problem" as we do not have the images available. So we need a URI to see what is actually happening.

**spedax** · 09-09-2009, 08:47 AM

here ya go

http://weblabs.be/index.html

It actually only happens when you click the buttons, and just for a short while until the new page loads.

**chrishirst** · 09-09-2009, 09:12 AM

that's just the Firefox default active: pseudo class

add

Code:

a:active {
   outline:none;
}

to your stylesheet

**spedax** · 11:20 AM

Quote:

a:focus
{
-moz-outline-style: none;
}

fixed the problem, thanks anyway!

**LadynRed** · 09-09-2009, 11:48 AM

Those 'outlines' are there for accessiblity ! You really should leave them alone, but if you do remove them, you should compensate for your removal this function so as to keep things usable and accessible.