IE problem with width and min-width

Ok. I know that IE6 doesn't recognize min-width and supposedly treats width as a min-width, expanding as it needs. My problem is that I want a min-width for my menu bar. In Firefox, of course, this min-width works just fine but I can't get a workable hack in IE to work. Here's what I have...

My css file...
/* Stylesheet for Oasis Gaming USA website */
html, body {
margin: 0;
padding: 0;
width: 100%;
min-height: 100%;
font-size : 100%; /*Enable font resizing in IE*/
background-color: #ffffff;
color : #000000;
text-align : justify;
font-family : Verdana, Arial, sans-serif;
height: 100%;
}
html>body {
font-size: 9pt; /*Resets font size for non-IE browsers*/
}
h1 {
font-size: 1.3em;
}
h2 {
font-size: 1.2em;
}
h3 {
font-size: 1.1em;
font-weight: normal;
text-align: center;
display: block;
}
p {
margin : 5px 10px 10px 10px;
padding : 5px;
clear : both;
display : block;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
float: right;
}
#menu li {
float: left;
position: relative;
}
#menu li ul {
display: none;
position: absolute;
}
#menu li>ul { /* resets top and left for non IE browsers */
top: auto;
left: auto;
}
#menu li:hover ul, li.over ul {
display: block;
background-color: #15483a;
}
#menu a, #menu a:active, #menu a:visited {
width: 9em;
padding : 0;
color: #d2bc2d;
text-decoration : none;
font-weight: bold;
font-size: 1em;
display: block;
text-align: center;
}
#menu a:hover {
text-decoration : none;
background-color: #d2bc2d;
color: #15483a;
}
#page {
margin: 0 auto;
padding: 0;
width: 90%;
min-height: 100%;
background-color: #ffffff;
position: relative;
}
#header {
margin: 0 auto;
padding: 0;
width: 100%;
height: 168px;
}
#logo {
margin: 0;
padding: 0;
width: 159px;
height: 102px;
float: left;
margin-top: 5px;
margin-left: 40px;
display: inline;
background: #ffffff url(../images/Oasis-Logo2.gif) center no-repeat;
position: relative;
z-index: 100;
}
#menu {
margin: 90px 0 0 0;
padding: 5px;
height: 15px;
background-color: #15483a;
position: absolute;
z-index: 1;
width: 100%;
min-width: 850px;
left: 0;
}
* html #menu {
width: 850px;
}
#content {
margin: 0;
padding: 0;
width: 70%;
min-height: 100%;
float: left;
/* border: 1px solid red; */
}
.articleTitle {
font-size: 1.3em;
font-weight: bold;
text-align: left;
padding: 5px;
}
.article {
margin: 0;
padding: 5px;
font-size: 1em;
text-align: justify;
clear: left;
}
img#cabinet {
margin: 0;
padding: 0;
float: left;
position: relative;
}
#right {
margin: 0;
padding: 0;
width: 25%;
min-height: 100%;
float: right;
border: 1px solid blue;
}
#footer {
width: 100%;
height: 26px;
margin: 10px 0 0 0;
padding: 0;
clear: both;
font-size: .8em;
background-color: #15483a;
color: #d2bc2d;
position: absolute;
bottom: 0;
left: 0;
}
.copyright {
margin: 0 0 0 5px;
padding: 0;
position: relative;
top: 5px;
}
ul#footnav {
margin: -5px 0 0 0;
padding: 0;
list-style: disc;
float: right;
}
ul#footnav li {
float: left;
position: relative;
width: 8em;
}
ul#footnav a, ul#footnav a:active, ul#footnav a:visited {
width: 8.5em;
padding : 0 0 0 .5em;
color: #d2bc2d;
}
ul#footnav a:hover {
text-decoration : none;
}


As you can see I've tried the IE hack of * html #menu { width: 850px; } but IE still isn't recognizing that. Of course I have IE7 beta 2 installed rather than IE6 so there may be problem there, I don't know.

By the way, the link to the website where I'm testing this out is...http://www.oasisgamingusa.com/testlayout/index.php

Also, does anyone know why in IE my footer doesn't appear at the bottom of the screen but in FF it does? I want it to look like it does in FF.

Thanks

As you can see I've tried the IE hack of * html #menu { width: 850px; } but IE still isn't recognizing that. Of course I have IE7 beta 2 installed rather than IE6 so there may be problem there, I don't know.Internet Explorer 7 RC1 is supposed to support the minimum height property; you're using an out-dated version. The solution you proposed should work in Internet Explorer 6, however. Also:


The star-HTML exploit does not work in Internet Explorer 7.
The child selector (>) exploit does not work in in IE7 either because it now supports that selector.
If you want to serve IE-specific code, use conditional comments (http://www.quirksmode.org/css/condcom.html) instead of CSS exploits.

Hey thanks for the quick reply, I really appreciate it.

So IE7 RC1 is supposed to support the various min- attributes? That's nice to know. I also didn't know that the two hacks I've been trying to use don't work in IE7. I'll try using conditional comments and see what happens.

I have another question however. I have a #contect div and #right div but they are currently completely separate of each other. Would it be recommended to put some kind of wrapper div around those two divs and give it a min-width? I've been playing around with min-width and what not and I found out that if I give each of the #content and #right divs a min-width and then shrink the browser window, the right div (since it is floated to the right) ends up going down and below the #content div and I don't want this to happen.

I'll play around with a wrapper div and see what happens but I was just wondering if that's what most other web developers do, put a wrapper div around their main content area.

Thanks

The container div or your 'page' div is usually what most developers do. They put a min-width on the whole layout. IE6 does support expressions so you could use some js to fake min-width, however if you don't have to use JS don't. I found this method here (http://www.pmob.co.uk/temp/min-width-ie.htm) to work quite well for IE6. View the source, mainly the conditional comments.

Once again, thanks for all the help and info. I think I'm actually getting this stuff figured out!:)

I've still got a couple of minor things to figure out but at least I've got this min-width problem corrected. I've got it so that in both FF and IE7 the layout has a min-width of 900px. Don't ask me how I came up with that width for a minimum. It was just off the top of my head.

Anyway, I still have to figure out why IE7 doesn't have the footer at the bottom of the screen like FF. I also need to figure out why the paragraph doesn't appear next to the cycling images in IE7 but they do in FF.

I'll continue to play around with it but if you have any ideas on either of these problems I'd appreciate being pointed in the right direction.

Its your conditional comment. Its being fed to IE7 as well. It should be given to IE6
<!--[if lte IE 6]>
<style type="text/css">
#outer { padding-left: 900px; float: left; }
#inner { margin-left: -900px; }
#container { position: relative; width: 100%; }
#content { width: 630px; height: 100%;}
#right { width: 225px; }
</style>
<![endif]-->

Thanks once again. I initially tried out making that style section for IE6 and below but it didn't really seem to do anything. Then I remembered that I was running IE7 Beta 2 so I upgraded to IE7 RC1 and it looks good for the most part.

For some reason my paragraph isn't appearing to the right of the cycling images. The clear: left isn't doing the trick. Other than that it's looking good thanks to you _Aerospace_Eng_.

You don't want clear:left; you want to remove clear:left. clear:left; tells the element to not allow anything to the left of it which is why they go to the bottom.

Ok so I had that mixed up. I thought clear: left was to tell it to clear anything on the left, thereby allowing it to print next to something like an image. At anyrate, for some reason only the h1 header ended up going up next to the cycling images. The paragraph didn't go up there.

Now for some reason I do know that earlier when I had the paragraph in a span tag rather than a p tag, in FF at least, the paragraph would go up next to the images but if I have it as a p tag it prints below. Any idea on why that is?

You've set all of your paragraphs to clear:both; again you don't want that. I'll leave it up to you to find out where you set it.