Looks good in IE & FF, but then comes Opera

[SmokingMan]

I know the problem has to be somewhere in my CSS (I think). The block elements in the menu display as wanted in FF & IE, but they don't even come close in Opera. I'm sure there's a problem with the margins or floats, but I can't seem to pick it out. Here's a link to the page in question: click meAnd here's my CSS:

 .menu-category{   font-family: Georgia,'Bookman Old Style',Garamond,'Times New Roman',serif;   font-style: italic;   font-weight: bold;   font-size: 16px;   line-height: 23px;   color: #330066;   text-align: center; }  /* id's for the in menu links */ #menu-cat1{} #menu-cat2{} #menu-cat3{} #menu-cat4{} #menu-cat5{} #menu-cat6{} #menu-cat7{}  .menu-item{   font-family: 'Trebuchet MS',Verdana,Tahoma,Arial,'Arial Black',Helvetica,'Century Gothic','Lucida Sans Unicode',Impact,sans-serif;   color: #000000;   font-weight: bold;   font-size: 13px;   line-height: 18px;   width: 260px;   text-align: left;   font-style: italic;   margin-left: 25px;   float: left; }  .menu-item-size{   font-family: 'Trebuchet MS',Verdana,Tahoma,Arial,'Arial Black',Helvetica,'Century Gothic','Lucida Sans Unicode',Impact,sans-serif;   color: #000000;   font-weight: bold;   font-size: 13px;   line-height: 18px;   width: 100px;   margin-left: 10px;    text-align: left;   font-style: italic;   float: left; }  .item-price{   font-family:Georgia,'Bookman Old Style',Garamond,'Times New Roman',serif;   font-style: italic;   font-weight:bold;   font-size: 13px;   line-height: 16px;   color: #000000;   width: 60px;   text-align: left;   float: right;   padding-right: 15px; }  .item-description{   font-family:'Comic Sans MS','Monotype Corsiva',cursive;   font-style: italic;   font-size: 12px;   color: #8b0000;   width: 440px;   text-align: left;   padding-left: 15px;   margin-left: 15px;   clear: both;   float: left;   overflow: auto; }  .cat-description{   font-family: 'Trebuchet MS',Verdana,Tahoma,Arial,'Arial Black',Helvetica,'Century Gothic','Lucida Sans Unicode',Impact,sans-serif;   font-style: italic;   font-size: 13px;   color: #8b0000;   width: 500px;   text-align: center;   margin-left: 35px; }    #menu-links{   text-align: center; }  .menulink-head{   font-family: Georgia,'Bookman Old Style',Garamond,'Times New Roman',serif;   font-style: italic;   font-weight: bold;   font-size: 16px;   color: #000000;   text-decoration: none; }  .menupage-link{   font-family: Georgia,'Bookman Old Style',Garamond,'Times New Roman',serif;   font-style: normal;   font-size: 12px;   color: #660000;   text-decoration: none; }  #menu-links a:hover{   color: #ff0000;   font-style:  bold;   text-decoration: underline; }  .menu-return{   font-family: serif;   font-size: 11px;   color: #ff0000;   text-decoration: none;   margin-left: 5px;   clear: both; }  .menu-return a:hover{   font-weight: bold;   text-decoration:underline; }

Any ideas?

[boen_robot]

What's wrong with what? I don't see any significant difference. Only pixel differences here and there between all three browsers, but nothing to really change the mood, and besides, it's normal when relative units are used.Btw, I think for the menu itself... I mean, the description of the things you can eat (not the site menu!), you could use a table.... or maybe a list. But divs are certanly not appropriate.

[yoshida]

I agree. Lists, or even hybrid table/css, are fine. css is intended to save bandwidth and design headaches.I used to be worried by things being 3 pixels off, but not anymore.