i've been trying to do this layout this entire day.. :( and its still not really working.

here's my css:

body {
background-color : #F2F2F2;
font-family : verdana;
color : #666666;
margin : 0;
width:98%;
text-align : center;
font-size : 11px;
}
img {
border : 0;
}
.clearBoth {
clear : both;
}
.titel {
text-transform : uppercase;
padding-left : 5px;
padding-right : 5px;
line-height : 10px;
}
#menus {
vertical-align : bottom;
float : left;
padding-left : 120px;
margin-top : 80px;
}
#box {
background-image : url(http://thelittleoriental.com/testing/Image4_2x1.png);
background-color : #ffffff;
color : #666666;
width : 727px;
padding-bottom : 8px;
margin: 0px auto;
}
#main {
float : left;
width : 380px;
padding : 40px;
}
* html #main {
float : left;
width : 380px;
margin-left : 40px;
}

.storyTitle {
margin : 8px 0 10px;
border-bottom : 1px solid #C3C3C3;
padding : 2px;
font-size : 14px;
text-align : right;
font-weight : 700;
font-family : 'Trebuchet MS', Arial, Helvetica, sans-serif;
}
.storyContent, #menu, .nono, .storyContentblog {
font-size : 11px;
line-height : 15px;
font-family : 'Trebuchet MS', Tahoma, Arial, Helvetica, sans-serif;
}

.storyContent a:hover, .storyContent a:active, .storyContent2 a:hover, .storyContent2 a:active, .storyContentblog a:hover, .storyContentblog a:active {
font-weight : 380;
color : #999999;
line-height : 15px;
background-color : #fefefe;
border-bottom : 1px solid #ff98cc;
}
.storyContent img {
display : block;
padding : 4px;
margin-right : 5px;
background-color : #ffffff;
border-bottom : 2px solid #e7dbc8;
border-right : 2px solid #e7dbc8;
}

#right {
float : left;
margin-left : 85px;
width : 135px;
min-height : 400px;
}
* html #right {
width : 199px;
}

#text {
width : 470px;
padding : 6px;
border : 1px solid #c3c3c3;
}
.bleh {
background-image : url(b_g.PNG);
background-color : #FFFFFF;
text-align : justify;
padding : 10px 8px 6px;
font-size : 11px;
font-family : Tahoma, Arial, Helvetica, sans-serif;
color : #999999;
line-height : 14px;
}

h1 {
background-color : #d8d8d8;
font-family : century gothic;
font-weight : 800;
font-size : 18px;
font-decoration : bold;
color : #ffffff;
margin : 0;
padding : 0 0 0 8px;
border-top : 1px solid #808080;
border-bottom : 1px solid #808080;
text-align : left;
letter-spacing : 0;
}

#header {
background-color : #ffffff;
height : 150px;
width : 727px;
}
#footer {
background-image : url(http://thelittleoriental.com/testing/Image4_3x1.png);
background-repeat: no-repeat;
width : 727px;
height : 60px;
clear : both;
}

textarea {
background-color : #f0e7da;
font-family : Arial, Helvetica, sans-serif;
color : #999999;
padding : 4px;
margin : 4px 0 4px 4px;
font-size : 11px;
line-height : 11px;
border : 1px solid #d5c2a5;
}
li {
margin : 2px;
}
a:link, a:visited {
font-weight : 500;
color : #aa8a6a;
text-decoration : underline;
}
a:active, a:hover {
font-weight : 500;
color : #999999;
}
.image {
display : block;
background-color : #ffffff;
padding : 3px;
border-top : 1px solid #ff98cc;
}
ul.outside {
list-style-type : circle;
}


http://www.thelittleoriental.com/test.html

Its how i want it in mozilla firefox, but its messed up in IE. Also, i put non repeat on the background at the bottom, but it still repeats part of it, so i don't know what else to do. please please help me someone. thank you for your time!

It is very beautiful layout by the way :)

So, using Web Developer toolbar for Firefox I discovered that it isn't the background for footer that is repeating. Instead what you see bottom is .box background. I'm not sure why you have the following line but removing that solves your problem: padding-bottom : 8px;

By saying "messed up in IE" you mean that there's no free space before footer? If so then this caused by right div. Firefox reads min-height : 400px; and displays so but IE does not take standards so seriously and therefore it makes the div only as long as the content is. You could add linebreaks to make it longer in IE or just add padding-bottom to right div which should do the trick aswell.

thank you sooo much!! ^^;; I changed "margin-top : 80px;" of #menu to 0px... bcus there was such a big gap between the #main and the #menu, but now in firefox the #main has been partly covered up. =S

Found few errors:
* forgot to close "Home" <li> after ...<li><a href="http://thelittleoriental.com/blog.php">Blog</a></li></ul>
* forgot to close #box <div> before </body>
* in the right div there should be <img src... not <image src...

Again Firefox reads precisely widths and heights, IE does not. You had height of 222 px for your header swf but only 150 px for header div. You need them to be equal ;)

i didn't close the #box div bcus everything is suppose to be inside the box.. :) Thank you..!! i thought it would be a stupid mistake like that.. i'm too stupid to notice >.<

I don't know.. in IE... the image 'everlasting.png' is more to the right then the left, if i change the pixels... it messes it up in FF. Its suppose to be where it is in firefox. :(

In your html you miss doctype and character encoding. It causes browsers to display in quirks mode. Doing so IE and Firefox understand divs with padding and/or margin differently. To make them display the same use the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TESTING</title>
<script ...

After that you should see the same in both browsers and can change pixels the way you want.

Thank you.. for the millionth time :D yay!! lol ...oh.. and the navigaiton only drops down in IE.. i'm not if its only a small errot? =S or i'll just re do the whole navigation.

Unless fixing one nesting error that validator found helps you probably need to redo it.
Instead of what you have now put:
...udm">
<li><a href="http://www.thelittleoriental.com" title="Home" class="title">Home</a>
<ul>
<li><a href="http://www.thelittleoriental.com">Index</a></li>
<li><a href="http://thelittleoriental.com/blog.php">Blog</a></li>
</ul>
</li>
<li><a href="http://thelittleoriental.com/about.php...
If that doesn't help I'd suggest you to try the following tutorial which seems to work with both browsers: http://www.alistapart.com/articles/dropdowns/

TYTYTY.. its finally all done. =] and i didn't have to re do the navigation ^^ yay... thankya again! x x x

omg.. sorrry.. to be such a hassle again. i wanted to change the header slightly... but i've messed up something again.. i've tried whole of this morning trying to work out where i went wrong but i can't figure it out..

its suppose to look like this: http://www.thelittleoriental.com/testing/ss.PNG

i don't know why its stretched in IE. :(

Does the following make it better?
h1 {
height : 44px;
width : 470px;
font-size : 28px;
letter-spacing : 8px;
text-align : left;
color : #000000;
padding-top: 7px;
padding-left: 100px;
font-family : century gothic;
background-image: url('http://www.thelittleoriental.com/testing/head.PNG');
background-repeat: no-repeat;
background-position: 0 0;
margin-top : 0;
margin-bottom : 0;
}

:( the box is still streched in IE. I must have messed up either the content, 'blehh', or text div. but i don't know where..... :S

What about after:
h1{
width: 370px;}

oh yeah.. silly me >.< I had that before, then i tried getting rid of the gap in between the header and the text and then that's how it messed up. ....the main still isn't the right width in FF, as it is in IE. :S

After that:
#text{
width: 470px;}
?

=] ty. but there's still the gap that i can't get rid of in between the head image, and the text =S

You have your h1 higher than you need. It should be height: 38px; only.

Oh, and you might really enjoy Web Developer Toolbar for Firefox. That's what I used to help you out. It makes it easy to edit css and see changes at the same time so you know what should be changed. Also if divs behave wierd you can outline them and see where they are exactly.

https://addons.mozilla.org/firefox/60/ this addon right? ermm.. i tried installing it.. but it opens up netscape broswer... and says, cannot install.

I don't really understand the css padding in different browsers...
on my main layout for my site.. http://www.thelittleoriental.com/
i tried positioning the content text with css, padding-left; 36px; width... ect but it didn't do any of that. so i ended up using a div code:
<div id="content" style="position: relative; left: 36px; top: 0px; width: 270px; background: transparent; overflow:auto">
but then its to far left in internet explorer. :S

https://addons.mozilla.org/firefox/60/ this addon right? ermm.. i tried installing it.. but it opens up netscape broswer... and says, cannot install.
Netscape? Em..you're trying this with Firefox, the latest version, right? I have no clue, since I just updated my version and had no problems.

Thanx for the tool.. its great. =] I uninstalled some browser's and managed to install it. ty!

You're welcome!