CSS - Setting The Width Of Display: Inline

Okay i have been working on this for a while now, and i hate asking for help.. but i have given up on it.

Firstly i started using display:inline-block; which meant i could have a width so my hover over menu effect would work. But this did not work in IE7 which means it is useless to what i am doing.

So i then moved onto Display:inline; This worked fine, in both IE and Firefox, but the width cannot be set with this value. This value just wraps itself around the content. But i need to set a width to the Inline value.

Any help?


CSS:
Code:

#navcontainer ul{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li { 
display: inline;
width: 65px;
height: 21px;
background: url("images/tabbg.gif") 0 0 no-repeat;
text-decoration: none;
text-align:center; 
}

#navcontainer ul li a{
display:inline;
width: 65px;
height: 21px;
background: url("images/tabbg.gif") 0 0 no-repeat;
text-decoration: none;
}

#navcontainer ul li a:hover{
background-position: -65px 0;
color:#FFFFFF;
}

html:
Code:

<div id="navcontainer">
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
</div> 

Also a link to the actual page is
http://www.therow2.com/adsense/zzzzzzzzzzzzzzz.php

Hi, can anybody help me stretch green buttons for Firefox just like they appear in IE? I'd greatly appreciate the help.

Please see the attached html.

Hi guys,

I am building a page with CSS and I'm running into some problems with the CSS buttons I'm trying to use. Right now I have a large box along the top of the page and want two rows of buttons inside of it. These text on these buttons will likely be changing on a semi-regular basis. So instead of using gif buttons made in a graphics program, I'm using CSS to create the buttons. Since each row will have multiple buttons, I first used the display:inline; item and it worked fine in IE. In FF however, the buttons lost their height and width. If I also used the float:left; it worked right, but the buttons were not centered. In looking for a solution, I discovered that inline items cannot use the height and width properties. Any ideas on how to get what I'm looking for?

I can't post a link, because this is an intranet page, but here is my relevant code...

CSS Code:
Original - CSS Code /*the main box which will contain the buttons*/ div#Main-buttons { width:96%; margin:2%; margin-top:10px; height:100px; padding-top:10px; background-color:#84C394; border:ridge medium #004500; } /*adjustments for FireFox*/ html>body div#Main-buttons { width:90%; margin:5%; margin-top:10px; height:100px; padding-top:0px; background-color:#84C394; border:ridge medium #004500; } /*class for individual buttons*/ div#buttons { width:100px; height:30px; margin:3px; float:left; background-color:#F7F3B5; border-style:solid; border-width:2px; border-color:#ffffff; line-height:1.6; display:inline; } a.buttonLinks:link {color:#000000; text-decoration:none;} a.buttonLinks:active {color:#000000; text-decoration:none;} a.buttonLinks:visited {color:#000000; text-decoration:none;}

  

  


 /*the main box which will contain the buttons*/


 div#Main-buttons {


     width:96%;


     margin:2%;


     margin-top:10px;


     height:100px;


     padding-top:10px;


     background-color:#84C394;


     border:ridge medium #004500;


     }


 /*adjustments for FireFox*/


 html>body div#Main-buttons {


     width:90%;


     margin:5%;


     margin-top:10px;


     height:100px;


     padding-top:0px;


     background-color:#84C394;


     border:ridge medium #004500;


     }


     


 /*class for individual buttons*/


 div#buttons {


     width:100px;


     height:30px;


     margin:3px;


     float:left;


     background-color:#F7F3B5;


     border-style:solid;


     border-width:2px;


     border-color:#ffffff;


     line-height:1.6;


         display:inline;


     }


  


 a.buttonLinks:link {color:#000000; text-decoration:none;}


 a.buttonLinks:active {color:#000000; text-decoration:none;}


 a.buttonLinks:visited {color:#000000; text-decoration:none;} 

HTML Code:
Original - HTML Code <div id="Main-buttons"> <a href="#" class="buttonLinks"><div id="buttons">Testing</div></a><a href="#" class="buttonLinks"><div id="buttons">Testing</div></a></div>

  
<div id="Main-buttons">
      <a href="#" class="buttonLinks"><div id="buttons">Testing</div></a><a href="#" class="buttonLinks"><div id="buttons">Testing</div></a></div>

Thanks in advance guys!

I am sure there is an obvious explanation but why does using display:inline in this class definition stop the height/width working? Remove it and the dimensions are preserved.

PHP Code:
 DIV.special_offer_middle {
    width: 100px;
    height: 20px;
     display: inline;
    border: 1px dashed white;
 } 

I'm at the very very very begaining of a table-less design (my first, actually). The problem is, since I have decided to have a non-fixed width, when the browser is minimized, at a certain point the design breaks.

See it here (please don't make fun! it's just the start): SiliconSatan.com/test.php

I'd like to set a minimum width, probably on the container <div>, so at a certain point it sort of becomes like a fixed width? No smaller than a set width?

[EDIT]

Also, I have a question about background color mismatch, but it was not quite OT for the CSS forum:

http://forums.devshed.com/web-desig...e7t-403266.html