[SOLVED] Firefox "clicking" problem

[Zimi]

So here's my story:

I'm working on a design for some website and I just finished the menu that is actually a bunch of <li>s set as block elements.

The list (menu) itself is on the edge of the container.

In Firefox, when I click one of the links (blocks) it automatically add this weird broken-line, usually, it's not a problem, but apparently this broken line is counted as another pixel, so the container cant hold that much and end up adding horizontal scroll bar (which I hate <.<).

In IE it does not add another pixel.

 

1. I tried moving the menu one pixel to the left (it's sitting on the right edge) and this way it does not pop the scroll bar, so I know it's really one pixel line that is being added.

2. If after I click the menu I go and click anything else on the page the scroll bar disappears because the broken line disappears => confirm that it's indeed the line Firefox add that cause the problem.

 

Here's a pic I made to make things easier to understand (in this pic I clicked the block that says "level 30s"):

http://img29.imageshack.us/img29/6168/probb.jpg

 

I already though of a possible work around: making the background of the menu div the same background as the menu so I will be able to push the menu one pixel to the right without leaving a gap.

 

But I'm looking for a real solution.

 

Here's the menu HTML and CSS if you need it:

HTML:

            <div id="lvlBox">
            	<ul id="levelList">
                	<li class="picked"><a href="#">Level 10s</a></li>
                	<li class="normal"><a href="#">Level 20s</a></li>
                    <li class="normal"><a href="#">Level 30s</a></li>
                    <li class="normal"><a href="#">Level 40s</a></li>
                    <li class="normal"><a href="#">Level 50s</a></li>
                    <li class="normal"><a href="#">Level 60s</a></li>
                    <li class="normal"><a href="#">Level 70s</a></li>
			</ul>
            </div>

 

CSS:

#lvlBox
{
position:absolute;
top:328px;
right:0px;
width:149px;
height:175px;
background-color:#FFFFFF;
padding:0px;
margin:0px;
}

#levelList
{
list-style: none;
margin:0px;
padding:0px;
}
#levelList li
{
border-bottom: 1px solid #acc1ce;
padding:0px;
margin:0px;
}
.normal a:link, .normal a:visited {
font-size: 90%;
display: block;
padding-top:4px;
padding-bottom:5px;
padding-left:0px;
padding-right:0px;
border-left: 12px solid #2d4452;
background-color: #2f5a73;
color: #FFFFFF;
text-decoration: none;
margin:0px;
}

.picked a:link, .picked a:visited {
font-size: 90%;
display: block;
padding-top:4px;
padding-bottom:5px;
padding-left:0px;
padding-right:0px;
border-left: 12px solid #466a80;
background-color: #67a1c3;
color: #FFFFFF;
text-decoration: none;
margin:0px;
}

.hovered a:link, .hovered a:visited {
font-size: 90%;
display: block;
padding-top:4px;
padding-bottom:5px;
padding-left:0px;
padding-right:0px;
border-left: 12px solid #466a80;
background-color: #67a1c3;
color: #FFFFFF;
text-decoration: none;
margin:0px;
}

 

The 3 "modes" (classes): normal, picked, hovered. Are basically the same thing with different colors.

 

 

All help will be greatly appreciated! 

 

[TheFilmGod]

I'm sorry but I can't read that.

 

padding-top/bottom/right/left is not needed!

 

Use -> padding: top right bottom left;

 

So instead of:

padding-top: 10px;

padding-right: 11px;

padding-bottom: 0px;

padding-left: 12px;

 

You coudl do:

 

padding: 10px 11px 0 12px;

 

This would literally cut half of your code out. This also makes the browser faster in determining css values.

[Zimi]

Thanks for the tip, I changed all the paddings and margins on the site.

That's how it looks like now:

#lvlBox
{
position:absolute;
top:328px;
right:0px;
width:149px;
height:175px;
background-image:url(../img/menuBack.gif);
background-repeat:repeat;
padding:0px;
margin:0px;
}

#levelList
{
width:148px;
list-style: none;
margin:0px;
padding:0px;
}
#levelList li
{
border-bottom: 1px solid #acc1ce;
padding:0px;
margin:0px;
}
.normal a:link, .normal a:visited {
font-size: 90%;
display: block;
padding:4px 0 5px 3px;
border-left: 12px solid #2d4452;
background-color: #2f5a73;
color: #FFFFFF;
text-decoration: none;
margin:0px;
}

.picked a:link, .picked a:visited {
font-size: 90%;
display: block;
padding:4px 0 5px 3px;
border-left: 12px solid #466a80;
background-color: #67a1c3;
color: #FFFFFF;
text-decoration: none;
margin:0px;
}

.hovered a:link, .hovered a:visited {
font-size: 90%;
display: block;
padding:4px 0 5px 3px;
border-left: 12px solid #466a80;
background-color: #67a1c3;
color: #FFFFFF;
text-decoration: none;
margin:0px;
}

 

 

My work-around idea work but I'm still looking for a real solution.

[stewart]

Last I knew there is no real "solution" for this, except to design with it in mind. It is a built in feature of firefox last I knew, even adding border: none to :focus won't solve this.

There is probably some sort of javascript hack or some other form of way to remove it, but it definitely wouldn't be "clean".

[Zimi]

Thx.

Then I'll just use my work-around "solution".