Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
navigation shows weird lines in firefox
Old 09-09-2009, 08:20 AM navigation shows weird lines in firefox
Junior Talker

Posts: 3
Name: simon
Trades: 0
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.
Attached Images
File Type: jpg weirdlines2.jpg (36.9 KB, 4 views)

Last edited by spedax; 09-09-2009 at 08:28 AM..
spedax is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 09-09-2009, 08:35 AM Re: navigation shows weird lines in firefox
chrishirst's Avatar
Missing! presumed drunk.

Posts: 41,519
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
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.
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
A foolish consistency is the hobgoblin of little minds
Thought for today:- I SEO the only industry where all the cowboys are Indians?
chrishirst is offline
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 09-09-2009, 08:47 AM Re: navigation shows weird lines in firefox
Junior Talker

Posts: 3
Name: simon
Trades: 0
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.
spedax is offline
Reply With Quote
View Public Profile
 
Old 09-09-2009, 09:12 AM Re: navigation shows weird lines in firefox
chrishirst's Avatar
Missing! presumed drunk.

Posts: 41,519
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
that's just the Firefox default active: pseudo class

add

Code:
a:active {
   outline:none;
}
to your stylesheet
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
A foolish consistency is the hobgoblin of little minds
Thought for today:- I SEO the only industry where all the cowboys are Indians?
chrishirst is offline
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 09-09-2009, 11:00 AM Re: navigation shows weird lines in firefox
Junior Talker

Posts: 3
Name: simon
Trades: 0
Quote:
a:focus
{
-moz-outline-style: none;
}


fixed the problem, thanks anyway!

Last edited by spedax; 09-09-2009 at 11:20 AM..
spedax is offline
Reply With Quote
View Public Profile
 
Old 09-09-2009, 11:48 AM Re: navigation shows weird lines in firefox
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
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.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to navigation shows weird lines in firefox
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.23070 seconds with 13 queries