...

View Full Version : Problems w/ external style sheet on MAC IE



wac
10-27-2004, 06: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'>&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>

ronaldb66
10-27-2004, 09: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum