OK in IE, Opera but not in FF and Safari

[kigoobe]

I'm facing a very strange issue. Here's a style I have declared in an external style sheet.

.menuTop {
background-color:#6897CB;
text-align: center;
color: #FFFFFF;
padding: 6px;
float: left;
font-weight: bold;
margin: 0px;
}

Next, i'm calling that in a page like this

<div>
<div class="menuTop" style="width:249px;"><?=MENU_TITRE?></div>
<div class="menuTop" style="width:50px;">&nbsp;</div>
<div class="menuTop" style="width:154px;"><?=EDIT?> / <?=DELETE?></div>
<div class="menuTop" style="width:10px;">&nbsp;</div>
<div class="menuTop" style="width:10px;">&nbsp;</div>
</div>

Problem, in IE 7 and Opera, I have things getting displayed exactly as it should. But in FF and Safari, I am not getting any style, as if I'm using the <div>s without any style, or as if the style menuTop doesn't exist.

Anyone ever encountered a similar issue ? It's strange to me and I have passed several hours trying to figure out what's going wrong ...

Edit:

If I make the style inline, means if I put the styles inside the divs with the style, that works without any problem.

Edit:

Edit again: OK guys, this is working now ... I changed the position of the style block, and it's working ... couldn't make it why it behaved in that way though ...

Thanks for any help guys.

[markbrown4]

You shouldn't mix inline styles like that - and any time you find yourself repeating a class on every elements in a container like that.. dont.

.menuTop div { /* put them here instead */}

<div class="menuTop">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

[kigoobe]

yeah, this is important. Thanks.