Why does this work in IE6 but not in Firefox?

[gooseduck]

Using the following tags, I get the padding, margin and border for my thumbnail images in IE6, but Firefox shows NO padding, NO margin and NO border for the thumbnail images:

#thumbnails {
padding: 0;
margin: 0;
float: right;
}


#thumbnails img {
float: left;
padding: 4px;
margin: 0 0 0 8px;
border: 1px solid #BBB;
}


This is the generated code:

<div id="thumbnails">

<a href='index.php?showimage=829'><img src='thumbnails/thumb_20060621233904_img_7341.jpg' alt='Ready' title='Ready' class='thumbnails' width='75' height='75' /></a>

<a href='index.php?showimage=830'><img src='thumbnails/thumb_20060621234003_landscape.jpg' alt='Summer' title='Summer' class='thumbnails' width='75' height='75' /></a>

<a href='index.php?showimage=827'><img src='thumbnails/thumb_20060621231034_img_7472.jpg' alt='Portrait' title='Portrait' class='current-thumbnail' width='75' height='75' /></a>

</div>

Thanks!!!

[blinking8s]

because IE 6 lies to you...

please post a link if possible

[Joe[y]]

it would be better to use the built in .thumbnails class to define padding etc - that's why we put it there! to make life easier ;)

[codepoit]

also, for the element #thumbnails, I think you should define those numbers with a px after the number like you did for the element #thumbnails img

[jgrayson]

because IE 6 lies to you...


hahaha - i was going to say the same thing.

general browser/coding rules to live by:

if it only works in IE and not firefox/safari then there is something wrong with how you coded it.

if it only works in firefox/safari and not IE then it's because IE is crap

[Ubbe]

what exactly is it that isn't working, it seems to me as if its the float part that probably is making it not work in firefox, but as mentioned a link would really help.