css IE vs css FF

[genius_supreme]

hey guys... i really need help.

i've been trying to figure out a way to have both firefox and IE to the same style setting but unfortunately i failed.

this is what i wanted

the div settings in FF using % to cover the width and height is perfect
but in IE its not working with the % for example (i set the height:78%
 in FF its working fine but in IE its not... ) how do i do it?

if i use px or em for the width its working fine in IE but not in FF

so how do i do it?


my actual stuff:

im planning to have a scrollable content dhtml which i got it from this 
web site which i modified (cool) but instead of the arrow im using a
 div content of "Move up" and "Move Down" which has an absolute 
position at the top conner right and bottom conner right

this scrollable content is in side another div which is used as an actual border  


	
	
problem:
1) my Move UP and Move Down is not in the right position in both IE 
and FF at the same time (regardles of whether i use px, em or %)!!!
2) my height is not the same in both IE and FF at the same time!!!
please help me.

any help is appreciated

[mburt]

Can we see an example page, or the source code?

[jscheuer1]

The trick isn't to get things to look the same in all browsers. And, you should keep in mind that there are many, many, many more browsers out there than just IE and FF. Even among those two, there are different versions in use, most of which have their own rendering quirks.

The trick is to have everything look OK in as many browsers as possible. Starting your blank page off with a strict DOCTYPE will prevent many rendering inconsistencies across browsers. You may want to put some things in a container division and positioning that instead of the individual items. For things that absolutely, positively, just have to line up in the horizontal or vertical planes, a table still works, though is frowned upon, especially nested tables of too great a depth or complexity that contain large images - makes the page load really slowly. Floating divisions can usually be used instead.

It is hard to be specific without seeing what you are trying to achieve.

[genius_supreme]

Can we see an example page, or the source code?

these are the codes

note: some codes have been removed/modified for open display in DD Froum

css codes:

body
{
font-size:85%;
color:#99bb55;
background-color:#000000;
margin: 0px 0px 0px 0px;
width:100%;
height:100%;
}

a
{
text-decoration:none;
color: green;
padding:0px 0px 0px 5px;
}

#scrollerBoxTop{ 		
  float:right;
/*  position:absolute;
  top:27.5%;
  left:86.7%;*/
/*  float:right;*/
  width:7em;
  background-color:#000000;
  border: 1px solid lightgreen;  
  text-align:center;
  cursor:hand;
  height:1.5em;
}			 

#scrollerBoxBottom{ 
  float:right;
/*  position:absolute;
  top:361px;
  left:629px;*/
  width:7em;
  height:1.5em;
  background-color:#000000;
  border: 1px solid lightgreen;  
  text-align:center;
  cursor:hand;
}			 

#Menu_Box
{
float:left;
border-top:1px solid green;
border-right:1px solid green;
border-bottom:1px solid green;
margin:8px 2px 2px 5px;
width:15%;
height:15em;
font-size:95%;
cursor:arrow;
}

#Menu_Item
{ 
float:left;
border:1px dashed lightgreen;
width:70%;
cursor:hand;
text-decoration:none;
text-align:left;
color:lightgreen;
margin:3px 0px 2px 5px;
padding:2px 0px 2px 15px;
}

.Menu_Item a
{
float:left;
border:1px dashed lightgreen;
width:70%;
cursor:hand;
text-decoration:none;
text-align:left;
color:lightgreen;
margin:3px 0px 2px 5px;
padding:2px 0px 2px 15px;
font-weight:bold;
}


.Menu_Item a:hover
{
float:left;
border:1px dashed lightgreen;
width:75%;
cursor:hand;
text-decoration:none;
text-align:center;
color:white;
margin:3px 0px 2px 5px;
padding:2px 0px 2px 15px;
font-weight:bold;
}



#Header_Box
{
 border-bottom:1px  solid green;
width: 98%;
height:6em;
margin:5px 0 0 5px;
text-align:center;
}

#Content_Box
{
float:left;
margin:5px  0px 0px 5px;
border:1px solid green;
/*background: #FFFFFF ;*/
width:81.5%;
padding: 5px 5px 5px 5px;
height:75%;
font-size:95%;
}

#Box
{
float:left;
margin:5px  5px 0px 5px;
border:1px solid lightgreen;
background-color: #000000 ;
width:98%;
padding: 2px 2px 2px 2px;
height:70%;
font-size:12px;
}

#Footer_Box
{
float:Left;
margin: 5px 0 0 2px;
border:1px solid green;
text-align:center;
color:#FFFFFF;
width:98.5%;
font-size:70%;
}

html codes:

<html>

<head><title></title>
<link rel="stylesheet" type="text/css" href="css/style2.css">
<script type="text/javascript">

/******************************************
* Scrollable content script II- © Dynamic Drive (www.dynamicdrive.com)
* Visit http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
******************************************/

iens6=document.all||document.getElementById
ns4=document.layers

//specify speed of scroll (greater=faster)
var speed=5

</script>

</head>
<body style="scrollbar-3dlight-color: black; scrollbar-arrow-color: lightgreen; scrollbar-base-color: black; scrollbar-darkshadow-color: black; scrollbar-face-color: #000000; scrollbar-highlight-color: black; scrollbar-shadow-color: #000000; scrollbar-track-color: black;">



<div id="Layout_Box">
	<div id="Header_Box">
	well come<BR>
	</div>
	<div id="Menu_Box">
	this is menu	
		<div class="Menu_Item">
		<a href="#"  onClick="ExpandBox(1)" >item 1</a>
		<a href="#"  onClick="ExpandBox(2)" >item 2</a>
		<a href="#"  onClick="ExpandBox(3)" >item 3</a>
		<a href="#"  onClick="ExpandBox(4)" >item 4</a>
		</div>
	</div>
	<div id="Content_Box">
		<div id="Box">
		<span id="scrollBox">
			<a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)"><div id="scrollerBoxTop"><b><font color="#00ff00">Move Up</font></b></div></a>
				<div id="container" style="position:relative;width:595px;height:250px;border:0px;overflow:hidden">
				<div id="content" style="position:absolute;width:595px;left:0;top:0px">	
					<ilayer name="nscontainer" width=200 height=60 clip="0,0,175,160">
					<layer name="nscontent" width=200 height=60 visibility=hidden>
					<!--INSERT CONTENT HERE-->
					<p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML is the
					combination of HTML, JavaScript, and CSS</font></p>
					<p><font size="2" face="Arial">- DOM stands for Document Object Model</font></p>
					<p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML allows
					content on a page to change on the fly, without reloading the page</font></p>
					<p><font size="2" face="Arial">- CSS allows for the separation between content
					definition and formatting</font></p>
					<p><font size="2" face="Arial">- CSS stands for Cascading style sheet</font></p>
					<p><font size="2" face="Arial">- </font><font size="2" face="Arial"><a 				href="http://www.dynamicdrive.com">Dynamic
					Drive</a> provides free, cut and paste DHTML scripts</font></p>
					<p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML is the
					combination of HTML, JavaScript, and CSS</font></p>
					<p><font size="2" face="Arial">- DOM stands for Document Object Model</font></p>
					<p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML allowsasdfasdfasdfsadf adsf asdf adsf adsf asdf adsf adsf adsf adsf adsf adsf 
					content on a page to change on the fly, without reloading the page</font></p>
					<p><font size="2" face="Arial">- CSS allows for the separation between content
					definition and formatting</font></p>
					<p><font size="2" face="Arial">- CSS stands for Cascading style sheet</font></p>
					<p><font size="2" face="Arial">- </font><font size="2" face="Arial"><a 				href="http://www.dynamicdrive.com">Dynamic
					Drive</a> provides free, cut and paste DHTML scripts</font></p>
					<!--END CONTENT-->
					</layer>
					</ilayer>
				</div>
			</div>
		</span><div id="scrollerBoxBottom"><a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)"><b><font color="#00ff00">Move Down</font></b></a></div>
		</div>
	</div>
</div>

<script language="JavaScript1.2">
if (iens6){
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}

function movedown(){
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}

function moveup(){
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)

}

function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
window.onload=getcontent_height
</script>

	<div id="Footer_Box">
	this is me
	</div>

</body>
</html>

note:
1) the position of the Move Up and Move Down are perfect in IE but not in FF
2) the height of the page is just perfect in FF but not in IE (Should be a full screen that fits any screen resolution thats why i use % instead of px or em)

please tell me what and where i went wrong...

thanks in advance

[jscheuer1]

Get rid of this (red):

#Box
{
float:left;
margin:5px  5px 0px 5px;
border:1px solid lightgreen;
background-color: #000000 ;
width:98%;
padding: 2px 2px 2px 2px;
height:70%;
font-size:12px;
}