CSS Problem

Discussion in 'Web Design and Development' started by tektonnic, Sep 27, 2006.

  1. tektonnic macrumors 6502

    tektonnic

    Joined:
    Mar 6, 2006
    Location:
    Bucks, UK
    #1
    Hi All,

    The following code describes an input box on a form.

    <tr>
    <td valign="top" nowrap="nowrap">
     <?php echo htmlspecialchars($params->subjectlabel); ?> </td>
    <td>
    <input name="subject" type="text" class="inputbox" value="<?php echo
    htmlspecialchars($params->subjecttext.' '.$title); ?>" size="70" maxlength="100" /></td>
    </tr>


    I am trying to add some css within this to add a border, where can I put it?

    Cheers, Tek
     
  2. Mitthrawnuruodo Moderator emeritus

    Mitthrawnuruodo

    Joined:
    Mar 10, 2004
    Location:
    Bergen, Norway
    #2
    You could just use a style tag on the element you want to have a border...

    Let's say that is a td:

    <td style="border: 1px solid black">...
     
  3. tektonnic thread starter macrumors 6502

    tektonnic

    Joined:
    Mar 6, 2006
    Location:
    Bucks, UK
    #3
    <td style="border: 1px solid black">... Thats the one!

    so if I do:

    <td width=30 style="border: 1px solid black">

    then that should make the width of that max of 30?
     
  4. Mitthrawnuruodo Moderator emeritus

    Mitthrawnuruodo

    Joined:
    Mar 10, 2004
    Location:
    Bergen, Norway
    #4
    Take the width into the style, and remember to say if it's in px, em, ex or %.

    PHP:
    <table style="border: 2px solid #99f; text-align: center;" cellspacing="0">
        <
    tr style="background: #f99;">
            <
    td style="border: 1px solid #CCC; width: 80px;">---1---</td>
            <
    td style="border: 1px solid #999; width: 50px; ">---2---</td>
        </
    tr>
        <
    tr style="background: #9f9;">
            <
    td style="border: 1px solid #666">---3---</td>
            <
    td style="border: 1px solid #333">---4---</td>
        </
    tr>
    </
    table>
    <
    br/>
    <
    table style="" cellspacing="0">
        <
    tr style="">
            <
    td style="">---1---</td>
            <
    td style="">---2---</td>
            <
    td style="">---3---</td>
            <
    td style="">---4---</td>
        </
    tr>
        <
    tr style="background: #9f9;">
            <
    td style="border-left: 1px solid #333; border-top: 1px solid #333; border-bottom: 1px solid #333;">---5---</td>
            <
    td style="border-top: 1px solid #333; border-bottom: 1px solid #333;">---6---</td>
            <
    td style="border-top: 1px solid #333; border-bottom: 1px solid #333;">---7---</td>
            <
    td style="border-right: 1px solid #333; border-top: 1px solid #333; border-bottom: 1px solid #333;">---8---</td>
        </
    tr>
    </
    table>
     
  5. tektonnic thread starter macrumors 6502

    tektonnic

    Joined:
    Mar 6, 2006
    Location:
    Bucks, UK
    #5
    Hmmm, actually I don't think it looks right now, ta for your help though.

    Is there a way of making it so input boxes have a border, I know in safari its default style is to do that but in ie and ff the input boxs arn't very visible, any ideas?
     
  6. Mitthrawnuruodo Moderator emeritus

    Mitthrawnuruodo

    Joined:
    Mar 10, 2004
    Location:
    Bergen, Norway
    #6
    Same thing:

    <input type="text" style="border: 2px solid #000">

    But, as you say, this will not show up in any browser...
     
  7. tektonnic thread starter macrumors 6502

    tektonnic

    Joined:
    Mar 6, 2006
    Location:
    Bucks, UK
  8. c-Row macrumors 65816

    c-Row

    Joined:
    Jan 10, 2006
    Location:
    Germany
    #8
    It should work in all browsers (except for Safari).
     
  9. Mitthrawnuruodo Moderator emeritus

    Mitthrawnuruodo

    Joined:
    Mar 10, 2004
    Location:
    Bergen, Norway
    #9
    Well - especially for the people here at MR - that isn't all browsers... ;)

    Also, be careful if you use the size attribute in an input tag, like <input type="text" size="20" ... />, that will not always render to the same width in all browsers... (MSIE, I'm looking at you.)
     
  10. c-Row macrumors 65816

    c-Row

    Joined:
    Jan 10, 2006
    Location:
    Germany
    #10
    Size settings within the style attribute seem to work fine most of the time, but the standard 'size' attribute is indeed a bit wishy-washy... ;)

    You can also change an input field's font using style settings, so they blend better with the rest of your website.
     
  11. mnkeybsness macrumors 68030

    mnkeybsness

    Joined:
    Jun 25, 2001
    Location:
    Moneyapolis, Minnesota
    #11
    The size attribute is dependent on the browser's default settings and the operating system. Windows fonts are slightly different sizes than Mac fonts and so when it is figuring out the size, it will estimate based on the font that it has available.

    A more precise way of defining the size is to define:
    Code:
    input.yourElement { width: 100px; }
     

Share This Page