SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: border problem

  1. #1
    Non-Member Siltrince's Avatar
    Join Date
    Aug 2001
    Location
    Belgium
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    border problem

    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/

  2. #2
    ********* Streaker Lister14's Avatar
    Join Date
    Jun 2002
    Location
    C:\Documents and Settings\Desktop\Recycle Bin
    Posts
    677
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    roy.lu
    C:\DOS... C:\DOS\RUN... RUN\DOS\RUN...!

  3. #3
    Non-Member Siltrince's Avatar
    Join Date
    Aug 2001
    Location
    Belgium
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    Non-Member Siltrince's Avatar
    Join Date
    Aug 2001
    Location
    Belgium
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope , nothing seems to help ... and to think I choose to do this with CSS to avoid compatibillity problems.

  5. #5
    Non-Member Siltrince's Avatar
    Join Date
    Aug 2001
    Location
    Belgium
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ?

  6. #6
    SitePoint Member
    Join Date
    Dec 2002
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Renegade's Paradox

  7. #7
    Phil fillup07's Avatar
    Join Date
    May 2002
    Location
    Jacksonville, FL
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:
    Code:
    .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; }

  8. #8
    Non-Member Siltrince's Avatar
    Join Date
    Aug 2001
    Location
    Belgium
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys but I doesn't change a thing , I'm pretty sure it's a bug ? Anyone who could confirm this ?

  9. #9
    ********* Streaker Lister14's Avatar
    Join Date
    Jun 2002
    Location
    C:\Documents and Settings\Desktop\Recycle Bin
    Posts
    677
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    roy.lu
    C:\DOS... C:\DOS\RUN... RUN\DOS\RUN...!

  10. #10
    killall -9 lusers
    Join Date
    Oct 2002
    Location
    Cincinnati, Ohio, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This article should help you: http://www.alistapart.com/stories/taminglists/

  11. #11
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation its in the margins!

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

    Code:
    .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
    Last edited by wisbin; Jan 5, 2003 at 12:29.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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
    Last edited by Paul O'B; Jan 5, 2003 at 15:24.

  13. #13
    Non-Member Siltrince's Avatar
    Join Date
    Aug 2001
    Location
    Belgium
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •