CSS Coding

Discussion in 'Web Design & Coding' started by Bman, Apr 6, 2006.

  1. Bman

    Bman OSNN Veteran Original

    Messages:
    8,799
    Location:
    Ottawa, Ontario
    I have this code in place, for a popup box.

    a.info:hover .infobox {
    font-weight: normal;
    display:block;
    position:absolute;
    top:20px;;
    left:0;;
    width:205px;
    height:70px;
    border: 1px solid #ccc;
    background:#84be84 url(question.gif) no-repeat bottom right;
    color:#000;
    text-align:left;
    font-size:0.7em;
    padding-left:10px;
    padding-top:10px;

    how would I make it so the box was rounded off?
     
  2. zeke_mo

    zeke_mo (value not set) Staff Member Political User Folding Team

    Messages:
    1,984
    Location:
    Placerville, CA
    You could add an image to the top and bottom of it I suppose

    make the backgroud transparent of course






    sloppy ps work >.<
     

    Attached Files:

    • top.gif
      top.gif
      File size:
      7.1 KB
      Views:
      56
    Last edited: Apr 6, 2006
  3. Bman

    Bman OSNN Veteran Original

    Messages:
    8,799
    Location:
    Ottawa, Ontario
    what do you mean, remember I'm new at this...
     
  4. zeke_mo

    zeke_mo (value not set) Staff Member Political User Folding Team

    Messages:
    1,984
    Location:
    Placerville, CA
    If you backgroud is black, then add the same color image to the top and end of the box, like this one...much smaller of course :)
     

    Attached Files:

    • top.gif
      top.gif
      File size:
      521 bytes
      Views:
      70
  5. Bman

    Bman OSNN Veteran Original

    Messages:
    8,799
    Location:
    Ottawa, Ontario
    alright, I guess I can try that...is there a simpler way anyone?
     
  6. zeke_mo

    zeke_mo (value not set) Staff Member Political User Folding Team

    Messages:
    1,984
    Location:
    Placerville, CA
    I tend to make things as complicated as I can :)
     
  7. zeke_mo

    zeke_mo (value not set) Staff Member Political User Folding Team

    Messages:
    1,984
    Location:
    Placerville, CA
  8. Bman

    Bman OSNN Veteran Original

    Messages:
    8,799
    Location:
    Ottawa, Ontario
    none of them work, even if I write down what they say, it dosent work...
     
  9. Bman

    Bman OSNN Veteran Original

    Messages:
    8,799
    Location:
    Ottawa, Ontario
    I know why it wasen't working, that's for a box with rounded corners, I'm talking about a box that opens up when your mouse hovers over something, which right now is a square box, I want it rounded..
     
  10. Bman

    Bman OSNN Veteran Original

    Messages:
    8,799
    Location:
    Ottawa, Ontario
    no ideas?
     
  11. Geffy

    Geffy Moderator Folding Team

    Messages:
    7,805
    Location:
    United Kingdom
    maybe ...

    -moz-border-radius for firefox
    border-radius for CSS3 supporting browsers.

    no guarantees its going to work on tooltips though.