Firefox CSS Image Issue

Forum Moderators: not2easy

Message Too Old, No Replies

Firefox CSS Image Issue

zenassassin

11:13 pm on Sep 5, 2008 (gmt 0)

I'm having a little difficulty with the way Firefox displays (or in this case doesn't displays) images. More than likely I've probably been staring at code for too long and missed something but the issue I'm having doesn't appear in IE6 so... here goes.

I basically have a page comprised of tables. The cells are formatted via CSS.

Example (CSS Style):


.imageHeader1 {
background-attachment: fixed;
background-image: url(../site/purple/header01.jpg);
background-repeat: no-repeat;
height: 157px;
width: 381px;
}

Example: (Html):


<html>
<head>
<title>Something</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
 <tr>
 <td class="imageHeader1">&nbsp;</td>
 </tr>
</table>
</body>
</html>

In IE it displays fine but in Firefox it doesn't even show. This isn't the actual full on code used (just a similar example based on the scenario). I can provide a link to the actual url if needed to see for yourself.

Thanks in advance. ;)

swa66

11:34 pm on Sep 5, 2008 (gmt 0)

First: that code will never validate (you forgot to open the <table> tag.)

Second in all likelyhood FF is doing the right thing and IE is doing the wrong thing (one of those reasons to never develop using IE)

You do know what background-attachment: fixed; is supposed to do ?
[w3.org...]

Once I added the <table> tag it worked for me in FF3 with this code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or
g/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Untitled</title>
  <style type="text/css">
   .imageHeader1 {
    background-attachment: fixed;
    background-image: url(/example.jpg);
    background-repeat: no-repeat;
    height: 157px;
    width: 381px;
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <td class="imageHeader1">&nbsp;</td>
   </tr>
  </table>
 </body>
</html>

As a matter of fact. why bother with the table at all ? A regular <p> will do it in much less code.

zenassassin

12:24 am on Sep 6, 2008 (gmt 0)

Okay I was admittedly sloppy with the coding right there in the example. To better understand what I'm getting at look at this: <>

In IE6 the CSS framework shows up. In FF it doesn't (least on this system that I'm working on).

The linked stylesheet has the following styles:


.imageNav {
background-attachment: fixed;
background-image: url(../site/purple/navigation.gif);
background-repeat: no-repeat;
height: 34px;
width: 763px;
}
.imageBorderL {
background-attachment: fixed;
background-image: url(../site/purple/border-left.gif);
background-repeat: repeat-y;
width: 13px;
}
.imageBorderR {
background-attachment: fixed;
background-image: url(../site/purple/border-left.gif);
background-repeat: repeat-y;
width: 12px;
}
.imageCornerL {
background-attachment: fixed;
background-image: url(../site/purple/corner-bottom-left.gif);
background-repeat: no-repeat;
width: 13px;
}
.imageCornerR {
background-attachment: fixed;
background-image: url(../site/purple/corner-bottom-right.gif);
background-repeat: no-repeat;
width: 12px;
}
.imageBorderB {
background-attachment: fixed;
background-image: url(../site/purple/border-bottom.gif);
background-repeat: repeat-x;
height: 19px;
}

Any ideas?

[edited by: SuzyUK at 6:41 pm (utc) on Sep. 6, 2008]
[edit reason] Please No URI's, see guidelines at top of forum [/edit]

zenassassin

2:23 pm on Sep 6, 2008 (gmt 0)

Disregard... I've found a fix.