Problems w/ external style sheet on MAC IE [Archive]

wac

10-27-2004, 05:01 AM

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'> </td>
<td class='btn_tm'> </td>
<td class='btn_tr'> </td>
</tr>
<tr>
<td class='btn_ml'> </td>
<td class='btn_mm'>
Test </td>
<td class='btn_mr'> </td>
</tr>
<tr>
<td class='btn_bl'> </td>
<td class='btn_bm'> </td>
<td class='btn_br'> </td>
</tr>
</table>

</div>
</body>
</html>

ronaldb66

10-27-2004, 08:52 AM

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.