Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Unwanted white pixels in buttons

    Hello. I've been playing with css for about a week now and after tearing my hair out and calling it a stupid language a number of times, have eventually solved all my problems.

    However todays problem I thought I'd ask about.

    There are 3 or 4 white pixels at the corners of my css image changing navigation buttons that I didn't put there. They don't show up when viewed in photoshop or when I use Javascript rollovers. I can't find any help anywhere else either.

    Here's my script

    body {
    background-color: #9EA76C;
    margin: 0px;
    padding: 0px;
    text-align: center;
    }

    #container {
    background-image: url(images/bar.gif);
    background-repeat: repeat-y;
    margin: 0 auto;
    width: 800px;
    left: 0px;
    top: 0px;
    position: relative;
    background-color: #9EA76C;
    text-align: left;

    }

    #navigation {
    height: 369px;
    width: 206px;
    left: 23px;
    top: 168px;
    position: absolute;
    margin: 0px;
    padding: 0px;




    }


    #banner {
    position: absolute;
    height: 100px;
    width: 453px;
    left: 80px;
    top: 25px;
    background-image: url(images/Logo-target-language-curved.gif);
    background-repeat: no-repeat;
    }
    #contenttop {
    position: relative;
    left: 295px;
    top: 160px;
    width: 480px;
    padding-top: 22px;
    background-image: url(images/blocktop.gif);
    background-repeat: no-repeat;


    }
    #contentcentre {
    background-color: 763721;
    position: relative;
    width: 480px;

    }

    #contentbottom {
    background-color: transparent;
    background-image: url(images/blockbottom.gif);
    background-repeat: no-repeat;
    position: relative;
    width: 480px;
    height: 34px;

    }
    #footer {
    height: 110px;
    width: 700px;
    background-image: url(images/panel.gif);
    background-repeat: no-repeat;
    position: relative;
    left: 80px;
    top: 200px;
    }

    .contact {
    background-image: url(images/contactbuttonover.gif);
    background-repeat: no-repeat;
    height: 58px;
    width: 200px;
    }

    .contact a{
    background-image: url(images/contactbutton.gif);
    background-repeat: no-repeat;
    height: 58px;
    width: 200px;
    background-color : transparent;
    }

    .contact a:hover{
    background: none;
    margin: 0px;
    padding: 0px;
    }

    .home {
    background-image: url(images/homebuttonover.gif);
    background-repeat: no-repeat;
    height: 58px;
    width: 200px;
    }

    .home a{
    background-image: url(images/homebutton.gif);
    background-repeat: no-repeat;
    height: 58px;
    width: 200px;
    display: block;
    background-color : transparent;
    }

    .home a:hover{
    background: none;
    }

    .course {
    background-image: url(images/coursebuttonover.gif);
    background-repeat: no-repeat;
    height: 58px;
    width: 200px;
    }

    .course a{
    background-image: url(images/coursebutton.gif);
    background-repeat: no-repeat;
    height: 58px;
    width: 200px;
    display: block;
    }

    .course a:hover{
    background: none;
    }

    .business {
    background-image: url(images/businessbuttonover.gif);
    background-repeat: no-repeat;
    height: 58px;
    width: 200px;
    }

    .business a{
    background-image: url(images/businessbutton.gif);
    background-repeat: no-repeat;
    height: 58px;
    width: 200px;
    display: block;
    }

    .business a:hover{
    background: none;
    }

    .who {
    background-image: url(images/whobuttonover.gif);
    background-repeat: no-repeat;
    height: 58px;
    width: 200px;
    }

    .who a{
    background-image: url(images/whobutton.gif);
    background-repeat: no-repeat;
    height: 58px;
    width: 200px;
    display: block;
    }

    .who a:hover{
    background: none;
    }

    .learn {
    background-image: url(images/learnbuttonover.gif);
    background-repeat: no-repeat;
    height: 58px;
    width: 200px;
    }

    .learn a{
    background-image: url(images/learnbutton.gif);
    background-repeat: no-repeat;
    height: 58px;
    width: 200px;
    display: block;
    }

    .learn a:hover{
    background: none;
    }


    Thanks in advance. (How's the script? Amateur?)

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    Sounds like certain areas of the image should be transparent or the same as the background.
    Need to see the site.

  • Users who have thanked Fang for this post:

    bloke (10-23-2007)

  • #3
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    5
    Thanked 0 Times in 0 Posts
    the images have transparent backgrounds. if i put the exact same images on the page using <img src...... there is no problem. its only when i use css to change the button.

    the site isnt on line at the moment.

    thanks for replying.

  • #4
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    Are you changing the background color? If so it could be that not enough of the image is transparent.
    We really need to see the problem to help.

  • #5
    New Coder
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    5
    Thanked 0 Times in 0 Posts
    ok. here is the page. i know its a small problem but things would look a lot nicer without it.

    http://www.liveandlearncr.com/index.htm

  • #6
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    Not enough of the image is transparent or not matched to the background color.

  • #7
    Regular Coder
    Join Date
    Apr 2006
    Posts
    186
    Thanks
    21
    Thanked 6 Times in 6 Posts
    What is your dither set to? And is the matte color the same color as your bg?


  •  

    Posting Permissions

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