SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question js & css help needed... please?

    Hi there peeps,

    I've created my own webmail application but I would like a nicer GUI, i'm creating a look that people are used to ( outlook/express ). Pointless I know but it's worth a try.

    I'm using css to emulate the 3 button states, idle, hover, down.

    Now the first button that I created with a seperater works fine. but if I add another image and text into another column. Each time I mouseover the second button it shifts it self left 1 pixel, same with the seperator.

    rather then beat about the bush, heres the page.

    http://www.eycdwebdesign.co.uk/webmail/toolbar.asp

    and the css

    http://www.eycdwebdesign.co.uk/webma...css-engine.asp

    all is controlled by this.className=

    Gav

  2. #2
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    Finland
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seems you're adding 1px borders with :hover. That causes the shift.

    Try using { border: 1px solid transparent } as default style for all buttons, then overwrite borders for wanted effect.

  3. #3
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    on the css file, that border is to create the raised or dropped effect on the button, it just seems to do this only when you add a second button.

    any ideas?

  4. #4
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    Finland
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try this

    Code:
    .TOOLBAR-HOLD { background: #d4d0c8; }
    
    .TOOLBAR-HOLD td {
     height: 26px;
     font-family: Verdana, Tahoma;
     font-size: 10px;
     color: #999999;
     text-decoration: none;
     border:1px solid #d4d0c8;
    }
    
    td.TOOLBAR-HOLD-HOVER { border-color: #ffffff #808080 #808080 #d4d0c8;}
    
    td.TOOLBAR-HOLD-DOWN { border-color: #808080 #ffffff #ffffff #d4d0c8; }


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
  •