[Firefox] : CSS rendering different locally from remotely

Fri, 25 Mar 2005 07:27:55 -0800

Hello !

 

(I also posted this mail to mozilla-general because I just found out about this mailing-list)

 

While working on the CSS of a website, I came across a weird phenomenon.

Basically, the way firefox renders some CSS features when browsing a local page is not the same when browsing the same page, but remotely.

 

I’m using Firefox 1.0.2 but it is the problem exists with Firefox 1.0.1 and Mozilla 1.7.3 too.

For both remote and local file I’m using an external CSS file. The CSS file is exactly the same. The HTML files are slightly different but not for the part where the hMenuItemCell class is used (see below). I checked, the downloaded CSS file is the good one.

 

I don’t know if this is a known issue. I personally don’t see why the CSS rendering engine (if such a thing exists, I’m not familiar with firefox’s code) would behave differently with the same css file. I have no idea what’s wrong, so I’m asking you guys. Maybe you can give me some clues.

 

To be more precise, here is the CSS code that is at fault:

.hMenuItemCell {
        background-color: #CCCCCC;
        text-align: center;
        height: 18px;
        width: 86px;
        background-repeat: repeat-x;
        background-image: url(../images/item_bckg.gif);
}
 
.hMenuItemCell:hover {
        background-color: #43D7E5;
        border-top-width: 1px;
        border-bottom-width: 1px;
        border-top-style: solid;
        border-bottom-style: solid;
        border-top-color: #666666;
        border-bottom-color: #660000;
        background-image: none;
}


 



The hMenuItemCell class is applied to several table
cells to create a menu:



<table>
<tr>
  <td class="hMenuItemCell"><a href="">lorem ipsum</a></td>
  <td class="hMenuItemCell"><a href="">lorem ipsum</a></td>
  <td class="hMenuItemCell"><a href="">lorem ipsum</a></td>
  <td class="hMenuItemCell"><a href="">lorem ipsum</a></td>
</tr>
</table>



 



 



The expected behaviour is a cell with a background
image repeated horizontally. When the mouse is over the cell, the background
must change to a uniform color.



When rendering this CSS code from a remote file,
it’s just like the :hover code is ignored.



 



Regards,



 



Sebastien

Reply via email to