CSS - Oh How I Hate Ie6!!!

Quote:
Alright for some reason this wont work in IE.

http://65.26.50.204/ec/index.php?page=1

First off the paragraph isnt moving over 8px like its supposed to, making it appear on the edge of the background in the transitional background.

Second off the div's are displaying on 2 diffrent lines... they are supposed to function like table cells.

The first problem appears in firefox every 1 out of 10 pageloads, for some reason. Which is bs, how is it rendering it diffrent when its the same exact data? Thats not even possible, the computer cant make its own descisions and its following the same rendering process!!! What the hell is it doing?

This is really starting to piss me the hell off.

I would really appreciate some help.



Well I figured it out, after removing some things, which is gonna require a lot of changing in my sites structure, but oh well.

I will move onto 3 other issues.

1. The bottom bar he http://65.26.50.204/ec/index.php?page=1 appears on 2 lines instead of 1, in IE only, but in FF it looks fine.
2. I would like the layouts body background to be "100%", how do I achieve that?
3. I have heard my doctype should not be HTML 4.01 Transitional (because of transitional), and I have absoulutely no idea about what doctypes to use, and where the file is located, so what should I use? (I have never used doctypes in any of my past codings, this is a first)

I'm trying to build a site:

http://smith.incyberspace.net/temp/

I left the CSS in the HTML course so you can read it easily.
here is those container CSS if you don't wanna view source (i wanna make it easy on you
Code:

 

#container { width: 900px; margin: 0 auto; }

#content { background-color:#333333; background-image:url(content.jpg); width: 640px; opacity:.40; float: left; margin-left: 120px; border-left:groove 5px #003366; border-right:groove 5px #003366; }

#showcase { width: 185px; margin-top: 23px; position:fixed; z-index:99;}

The idea for design is simple enough but I can't get the one DIV (layer) in the same place on IE as I have in Firefox


The background stays where its suppose to
The middle layer scrolls like it should
The top image that is suppose to stay stationary does... but only lines up where i want it to in Firefox (in IE its WAY off to the right)...

I dont know if this can be handled with IE only code, but I am hoping it doesnt come to browser specific hacks.. Im actually hoping i just messed something silly up


Any and all help is appreciated... I been banging my head off the wall for hours.


p.s. i know there is an opacity issue in IE too, but thats not nearly as impt as this one


Thank you!

Man i am working an an all new CSS theme and it was all going well intel i seen a bug.

It only pops up in ie, the menu gets cut off 10%!
If i resize the code it appears larger in firefox,opera,+ but looks ok in ie...

I don't want to resize it just for IE witch only 2% of my old members used.

Is there way to fix it without a major headach?

Page code.
Code:

<div id="main_menu">
<ul id="main_menu">
      <li><a href="home.php">Home Page</a></li>           
      <li><a href="javascript:void(0)" class="down" onclick="expand_nav(this); return false;">Members</a><ul style="display: none;">
        <li><a href="./login.php">Community Login</a></li>   
        <li><a href="./lostpass.php">Retrive Account</a></li>
        <li><a href="./signup.php?task=350_!sx0993tru35500x0p40e_002354mpL334!500X6PK000D30001">Signup Free!</a></li>
      </ul></li>
      <li><a href="javascript:void(0)" class="down" onclick="expand_nav(this); return false;">Features</a><ul style="display: none;">
                <li><a href="#">Live Chat</a></li>       
        <li><a href="#">Live Demo</a></li>             
        <li><a href="#">Feature List</a></li>
              </ul></li>
      <li><a href="./forum/">Forums</a></li>
      
        <li><a href="./blogs/">Blog</a></li>
      
      <li><a href="javascript:void(0)" class="down" onclick="expand_nav(this); return false;">Support</a><ul style="display: none;">
        
          <li><a href="./help.php">FAQs</a></li>
        
		<li><a href="#">Mail Us</a></li>
          <li><a href="#">Phone Us</a></li>
        <li><a href="./contact.php">Contact Support</a></li>         
        <li><a href="./tos.php">Terms Of Service</a></li> 
      </ul></li>
      
    </ul></div>

Css:
Code:

ul#main_menu {
	color: #231f20;
	padding:0; 
	margin:0 0 0 0;
	background-color:#666666;
	border-left:1px solid #6b6659;	
	border-right:1px solid #6b6659;
	border-bottom:1px solid #6b6659;
	border-top:1px solid #7d786c;

}
ul#main_menu li {
	list-style: none;
	margin: 0;
	padding: 0;	
	font-size:12px;
}
ul#main_menu li a {
	color: #ffffff;
	text-decoration:none;
	padding:7px;
	padding-left:14px;	
	padding-right:6px;
	width:128px;
	display:block;
	border-top:1px solid #a29e91;
	border-bottom:1px solid #8a8477;	
}
ul#main_menu li a:hover {
	background-color:#DDFADA;
	border-top: 1px solid #a29e91;
	border-bottom: 1px solid #7d786c;
	color: #666666;
}
ul#main_menu .selected {
	background-color: #CCCCCC;
	border-bottom: 1px solid #5a5548;
	color: #fea849;	
	font-weight:bold;
}
ul#main_menu .down {
	background-image:url(images/icons/plus16_disabled.gif);
	background-repeat:no-repeat;
	background-position:130px;
}
ul#main_menu .down:hover {
	background-image:url(images/icons/plus16_disabled.gif);
	background-repeat:no-repeat;
	background-position:130px;
}
ul#main_menu .down_open {
	background-image:url(images/icons/minus16_disabled.gif);
	background-repeat:no-repeat;
	background-position:130px;
	background-color:#DDFADA;
	border-top: 1px solid #a29e91;
	border-bottom: 1px solid #7d786c;
	color: #666666;
	font-weight:bold;
}
ul#main_menu .down_selected {
	background-image:url(images/icons/back16.gif);
	background-repeat:no-repeat;
	background-position:130px;
	background-color: #CCCCCC;
	border-bottom: 1px solid #5a5548;
	color: #fea849;	
	font-weight:bold;
}



ul#main_menu ul {
	color: #231f20;
	margin: 0; padding: 0;	
	border-bottom:1px solid #8a8477;
}
ul#main_menu ul li {
	list-style: none;
	margin: 0;
	padding: 0;	
}
ul#main_menu ul li a {
	color: #666666;
	text-decoration:none;
	padding:6px;
	padding-left:14px;	
	padding-right:4px;
	width:130px;
	display:block;
	border:0;
	background-color: #CCCCCC;
	border-top:1px solid #e4decf;
	font-size:11px;
}
ul#main_menu ul li a:hover {
	color: #111111;
	background-color:#DDFADA;	
	border:0;
	border-top:1px solid #e4decf;
	font-weight:normal;		
}
ul#main_menu ul li .submenu-down {
	color: #ffffff;
	background-color: #7e755c;	
}

Hey guys i've got a problem that I just can't figure out a solution for, i've attached a screenshot of the design. Basically there are various textboxes arranged in two columns, but their backgrounds (glows/curves behind the boxes) are causing me problems.

The width of the design with the curves is larger than my target resolution (1024x768). I've tried playing around with margins but it makes the design generally very inflexible (all boxes have to be non-expandable that way). Is there anyway anyone can think doing this without
a) having the minimum with of the website at 1200px
b) positioning the boxes absolutely

Cheers

I am trying to do a layout thats dynamic for different screen sizes in height. So I have a header at 120px high, footer at 40px high and I want the middle part 100% high.

Can anyone help please??

I used a css generator now trying to get the 100% height going and its not working .

Thanks

http://stealaz.myvnc.com/438335.htm
http://stealaz.myvnc.com/438335.css