border problem

[Siltrince]

Hi people ,

those of you who use IE6 can see the border of the links changes from white to gray on all 4 sides ( and dashed if you use IE 6, solid if you use IE 5 ).

The problem is that Mozilla 1 doesn't render it wel , only the left and right border are visible execpt for the contact-link, there the left, right and bottom border change.

Any idea how to fix this ?


opps forgot link : http://percept.be/

[Lister14]

just an idea...

in your css:

A:LINK.main {
color: #FFFFFF;
text-decoration: none;
border: 1px solid #FFFFFF;
}

A:VISITED.main {
color: #FFFFFF;
text-decoration: none;
border: 1px solid #FFFFFF;
}

A:ACTIVE.main {
color: #FFFFFF;
text-decoration: none;
border: 1px solid #FFFFFF;
}

A:HOVER.main {
color: #FFFFFF;
text-decoration: underline;
border: 1px dashed #D8D8D8;
}

include a padding of maybe just the 1px to give it a bit more space, that might fix it.

[Siltrince]

Yeah , I tried that before and it didn't help , but thanks for the suggestion

I'm gonna try to add a 1 pixel transparent border to the images ... maybe that helps

[Siltrince]

Nope , nothing seems to help ... and to think I choose to do this with CSS to avoid compatibillity problems.

[Siltrince]

Now I really don't understand it anymore ... Mozilla 1 seems to render a little piece of the topborder at both sides but for some reason it won't render it completely.

see screenshot : http://www.percept.be/sitepoint/menu-comparison-1.gif

Anyone know a way to fix this or is this a bug maybe ?

[renedox]

Well In your CSS you have:

A:LINK.main {
color: #FFFFFF;
text-decoration: none;
border: 1px solid #FFFFFF;
padding: 0px;
}

A:VISITED.main {
color: #FFFFFF;
text-decoration: none;
border: 1px solid #FFFFFF;
padding: 0px;
}

A:ACTIVE.main {
color: #FFFFFF;
text-decoration: none;
border: 1px solid #FFFFFF;
padding: 0px;
}

A:HOVER.main {
color: #FFFFFF;
text-decoration: underline;
border: 1px dashed #D8D8D8;
padding: 0px;
}

I was tought to type it like this:

A.main:link {
color: #FFFFFF;
text-decoration: none;
border: 1px solid #FFFFFF;
padding: 0px;
}

A.main:visited {
color: #FFFFFF;
text-decoration: none;
border: 1px solid #FFFFFF;
padding: 0px;
}

A.main:active {
color: #FFFFFF;
text-decoration: none;
border: 1px solid #FFFFFF;
padding: 0px;
}

A.main:hover {
color: #FFFFFF;
text-decoration: underline;
border: 1px dashed #D8D8D8;
padding: 0px;
}

Does it make any difference? Try it and see :S

[fillup07]

Try this:

.main a:link {
             color: #FFFFFF;
             text-decoration: none;
             border: 1px solid #FFFFFF;
             padding: 0px; }
.main a:visited {
             color: #FFFFFF;
             text-decoration: none;
             border: 1px solid #FFFFFF;
             padding: 0px; }
.main a:hover {
             color: #FFFFFF;
             text-decoration: none;
             border: 1px solid #FFFFFF;
             padding: 0px; }
.main a:active {
             color: #FFFFFF;
             text-decoration: none;
             border: 1px solid #FFFFFF;
             padding: 0px; }

[Siltrince]

Thanks guys but I doesn't change a thing , I'm pretty sure it's a bug ? Anyone who could confirm this ?

[Lister14]

Check out this test page with dotted-bordered links...
...unfortunately i'm unable to test it in mozilla, however, i kept it really simple (so i think).

Maybe a cross-analysis helps you find a solution

[KillAllDash9]

This article should help you: http://www.alistapart.com/stories/taminglists/

[wisbin]

If you put the borders ON with your menu-images, like this for example:

.imagelink {
   	   padding: 0px;
	   margin: 0px;
	   border: 1px solid #545E66;
}

You see whats happening? it's behind the image-box, i guess

I would use text for these "buttons"so you could have the same effect (and more)

good luck

Wisbin

[Paul O'B]

Hi,
Try reducing your image size by 1 pixel, it seems to make it work in Mozilla.

Or if you don't want to change the image try increasing the font size in A.main :Hover {font-size: 17px;}

Hope this helps.

Paul

[Siltrince]

Thanks everyone for the replies ! Paul O'B it finally works , it's not 100% correct but at least it doesn't look so bad anymore. Thank you all.