#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    2
    Rep Power
    0

    Underline Submit Buttons with CSS in Mozilla


    I'm trying to use CSS to make Submit buttons that look like text links (so they match other text links on the page). Background color is the same as the page, no borders, etc. It works great in IE, and everything works in Mozilla except for underlining. Am I doing something wrong, or does Mozilla not support underlining for form buttons? I've searched the Web and haven't found any info on this.

    CSS definition:
    input.add {
    font-size: 9pt;
    text-decoration: underline;
    color: #000000;
    background-color: #FFFFFF;
    border-width: 0px;
    border-style: none;
    cursor: pointer;
    }

    HTML:
    <input class="add" type=submit value="Submit">

    I really appreciate any suggestions or insights on this!
  2. #2
  3. Twilight Thinking
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2003
    Location
    Oxford UK
    Posts
    656
    Rep Power
    38
    You could just use an ordinary blank link, and use javascript to submit the form:

    ie:
    <a href="#" onclick="document.getElemntById('form').submit();">submit</a>

    Any use?
    Cheers,
    Dusk

    My portfolio
  4. #3
  5. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    you could set a color to border-bottom instead,

    input.add {
    font-size: 9pt;
    color: #000000;
    background-color: #FFFFFF;
    border-width: 0px;
    border-style: none;
    border-bottom:1px solid #15f;
    cursor: pointer;
    }
  6. #4
  7. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    2
    Rep Power
    0
    Thank you for both tips. I tried the JavaScript idea, but I can't assume that the people who use the site with have JavaScript enabled. I ended up with setting the border-bottom, and that looked good in Mozilla, but not quite right in IE. So I had to use some CSS hacks to get the right stuff to each browser. Thank you!

IMN logo majestic logo threadwatch logo seochat tools logo