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 2 of 2
  1. #1
    wac
    wac is offline
    Regular Coder wac's Avatar
    Join Date
    Sep 2002
    Location
    Cary, North Carolina, USA
    Posts
    359
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Problems w/ external style sheet on MAC IE

    This code works when the style is internal to the JSP, but not when it is in an external .css file. I'm on a MAC using IE 5.2.3
    The images specified by the classes are displayed when the style sheet is specified directly. I know that the style sheet is being loaded because I see the blue color where .btn_tm is specified. Any one have an idea? This stuff seemed so straight forward.

    <html>
    <head>
    <title>Tests</title>
    <link rel="stylesheet" type='text/css' href='css/styles.css' />
    <%--
    <style type='text/css'>
    .btn_tl
    {
    background-image: url("img/btntl.gif");
    background-repeat: no-repeat;
    background-position: center center;
    }

    .btn_tm
    {
    background-color: blue ;
    background-image: url("img/btntm.gif");
    background-repeat: repeat-x;
    background-position: center center;
    }

    .btn_tr
    {
    background-image: url("img/btntr.gif");
    background-repeat: no-repeat;
    background-position: center center;
    }

    .btn_ml
    {
    background-image: url("img/btnml.gif");
    background-repeat: no-repeat;
    background-position: center center;
    }

    .btn_mm
    {
    background-image: url("img/btnmm.gif");
    background-repeat: repeat;
    background-position: center center;
    }

    .btn_mr
    {
    background-image: url("img/btnmr.gif");
    background-repeat: no-repeat;
    background-position: center center;
    }

    .btn_bl
    {
    background-image: url("img/btnbl.gif");
    background-repeat: no-repeat;
    background-position: center center;
    }

    .btn_bm
    {
    background-image: url("img/btnbm.gif");
    background-repeat: repeat-x;
    background-position: center center;
    }

    .btn_br
    {
    background-image: url("img/btnbr.gif");
    background-repeat: no-repeat;
    background-position: center center;
    }

    </style>
    --%>
    <body>
    <div >Testing border
    <table id='btn_border' cellpadding='0' cellspacing='0'>
    <tr>
    <td class='btn_tl'>&nbsp;</td>
    <td class='btn_tm'>&nbsp;</td>
    <td class='btn_tr'>&nbsp;</td>
    </tr>
    <tr>
    <td class='btn_ml'>&nbsp;</td>
    <td class='btn_mm'>
    Test </td>
    <td class='btn_mr'>&nbsp;</td>
    </tr>
    <tr>
    <td class='btn_bl'>&nbsp;</td>
    <td class='btn_bm'>&nbsp;</td>
    <td class='btn_br'>&nbsp;</td>
    </tr>
    </table>

    </div>
    </body>
    </html>
    Wayne Christian

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Path

    When using an external style sheet, URLs for images such as background images must be specified in relation to the location of the style sheet.

    I don't have a complete picture of your directory structure, but it looks something like this:

    http://www.yourdomain.ext/ holds the pages;
    http://www.yourdomain.ext/css/ holds the style sheet;
    http://www.yourdomain.ext/img/ holds the images.

    If you want to refer to an image in said directory from the style sheet, your URL should look something like this: url(../img/yourimage.gif).
    Notice the ".." to move up one level (which is the root) to then descend down to the img directory.
    Regards,
    Ronald.
    ronaldvanderwijden.com


  •  

    Posting Permissions

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