CSS - Fire Fox And Ie Compatibiltiy Issues!

I'm trying to make a simple style sheet that will work with firefox, I can get one to work in Internet Explorer but not in firefox.

I have split up the stylesheet and tried to import it through php but when it came up, things like repeating-x or y factors didn't show up.

I need some help and heres an example of my style rather simple.

Code:

BODY
{
    font-size: small;
    margin: 5px;
    color: black;
    font-family: Courier New;
    background-color: #f1f1f1;
}
.lcolumnt
{
    background-position: right top;
    background: white url(images/css_bg_lcoumn.gif) no-repeat;
    font-size: small;
}
.lcum
{
    background-position: right center;
    background: white url(images/bg_lcoumn.gif) repeat-y;
}
TABLE
{
    font-size: 11.5px;
    COLOR: #000000;
    font-family: Courier New;
}
INPUT
{
    border-right: #a4a4a4 1px solid;
    border-top: #a4a4a4 1px solid;
    font-size: x-small;
    border-left: #a4a4a4 1px solid;
    color: #585858;
    border-bottom: #a4a4a4 1px solid;
    font-family: Courier New;
    background-color: #f4f4f4;
}
.contentheader
{
    background-position: left center;
    background: url(images/main_content_header.gif) no-repeat;
}
.mctop
{
    background-position: left top;
    background: url(images/mc_bg_top.gif) repeat-y;

}
.mcbg
{
    background-position: 0% 50%;
    background: url(images/mc_main_bg.gif) repeat-y;
}
A:link
{
    font-size: small;
    COLOR: black;
    font-family: 'Courier New';
    text-decoration: none;
}
A:visited
{
    font-size: small;
    COLOR: gray;
    font-family: 'Courier New';
    text-decoration: none;

}
A:hover
{
    font-weight: bold;
    text-decoration: underline;
}

Ok look i want to make a dedicate for me and 5 of my freind we are in the same block. and we want a private server for 5 of our friends. so what is the command to do the ak rapid fire.


tyvm.

I have this proplem on my site where it looks perfect in IE but in Fire Fox it looks like cr@p.
http://www.bf2editor.org/

I want my CSS to look the same way on Fire Fox how can I fix this? This is my CSS doc

Code:

a:link    {color: black; text-decoration: underline}
a:visited {color: black; text-decoration: underline}
input {font-size: 12px; font-weight: bold;}



body      {
background-color: 000000; 
margin:0;
padding:0;
line-height: 1.5em;
}
hr         {color: black}

.top{

clear: left;
width: 100%;
background-image: 
url('bar2.png');
background-repeat: repeat-x
color: #FFF;
text-align: center;
font-style: arial;
font-family: arial;
}

.top2{

clear: left;
width: 100%;
background-image: 
url('bar2.png');
background-repeat: repeat-x
color: #FFF;
text-align: center;
font-style: arial;
font-family: arial;
}

.top3{

clear: left;
width: 100%;
background-image: 
url('bar2.png');
background-repeat: repeat-x
color: #FFF;
text-align: center;
font-style: arial;
font-family: arial;
margin-top: -48;
}



div#news
{
   background-color: E5E5E5;
   width: 140px;
   margin-top: 30;
   margin-left: 22;
}

div#login
{
   background-color: E5E5E5;
   width: 140px;
   margin-left: 22;
   margin-top: 2;
}

div#about
{
   background-color: #CCCCCC;
   width: 797px;
   height: 500;
   margin-top: -2;
   margin-left: 52;
}


div#who
{
   background-color: E5E5E5;
   width: 140px;
   margin-left: 22;
   margin-top: 2;
}

}

div#info
{
   background-color: 898989;
   width: 600px;
   margin-top:  1cm;
   margin-left: 4cm;
}
   div#info h2 { background: url( bar.png ); color: #ffffff; 
background-repeat: repeat-x;
}
   div#p { }


/*Page Layout*/



#maincontainer{
width: 969px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}


#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-left: 100px; /*Set left margin to LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 160px; /*Width of left column*/
height: 836px;
margin-left: -990px; /*Set left margin to -(MainContainerWidth)*/
background: #898989;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

For a project I'm working on, for whatever reason, I cannot get that left side at the top. It appears fine in Opera 6, but in that browser, the content is far to the right.

I've been dealing with this all day. Usually, I do have minor problems with getting the float right, but I usually figure it out. For the life of me, though, I cannot figure out what I'm missing.

Any ideas out there? I appreciate it.

Tim Trice

Thanks for taking the time to read my question.

I am having problems with my #MenuItem a:hover in IE. I really don't know why. It refers to the left nav on the page.

In IE the links at the bottm of the left nav list act funny. Place the mouse around the area between the text (the line separating the two boxes) It seems that IE is not sure which one to activate for the hover event.

If that makes no sense, just move you mouse over all the links in the left nav from top to bottom and hopefully you'll see what I mean.

It works fine in Fire Fox.... ya I know typical.

Any suggestions?

Brad

Pierced is my band name. I don't have any other URL to post this under for people to view.

http://www.pierced.ca/FeedProductionRecordsHelp.htm
http://www.pierced.ca/FeedProductionRecordsHelp.css

I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically??

Code:

<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div>
<div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div>

</div>


<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div>
<div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div>

</div>

Hey,

I came across this forum and hopefully somebody can help me.

Here is my website: http://www.jmuelectricmotorcycle.tk

When the page is in firefox, If you page zoom out, the navbar goes under the content instead of staying on the right. I think it has something to do with padding and the sidebar not having enough room so it drops down. When I set the content to 1005 instead of 1000, it works, but there's a giant 5 pixel gap between my side bar and my content container.

Also, does anybody know how to style called data from ssi.php in SMF forums? I want my login boxes to look like my main page.

Thanks. Here is my css:

Code:

html {
	font: normal 12px verdana, arial;
        background-color: #000
}

body {
text-align: center
}

#fw-container {
margin: 0 auto;
width: 1000px;
text-align: left
}

.hasSidebar #fw-container {
	width: 1000px;
}

a, 
a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* --- Header --- */

#fw-head {
	position: relative;
	height: 196px;
	background: #242424;
}

#fw-title {
	font: bold 26px verdana;
	letter-spacing: -1px;
	position: absolute;
	top: 20px;
	left: 20px;
	padding: 0;
	margin: 0;
	z-index: 10;
}

#fw-title a, 
#fw-title a:visited, 
#fw-title a:hover {
	color: #fff;
}

.fw-logo {
	width: 760px;
	height: 196px;
	position: absolute;
}

.hasSidebar .fw-logo {
	width: 1000px;
}

/* --- Navigation --- */

#fw-mainnavwrap {
	background: #242424;
	padding: 10px 20px;
	font-family: arial;
	font-weight: normal;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

#fw-mainnavwrap ul {
	margin: 0;
	padding: 0;
	background: transparent;
	list-style-type: none;
}

#fw-mainnavwrap li {
	margin: 0px 15px 0px 0px;
	display: inline;
}

/* --- Content --- */


#fw-bigcontain {
	width: 760px;
	float: left;
}

.fw-paragraph {
	background: #242424 url('../Waveform/img/bg-p.gif') repeat-x top left;
	border-bottom: 1px solid #000;
	padding: 15px 20px 10px;
	overflow: hidden;
}

.fw-title {
	margin: 0px 0px 10px;
	font: 18px verdana;
	color: #fff;
}

.fw-text {
	margin-bottom: 10px;
}

/* --- Sidebar stuff --- */

.hasSidebar #fw-sidebar {
	width: 239px;
	float: right;
	font-size: 12px;
	clear: right;
	border-left: 1px solid #000;
}

#fw-sidebar .fw-title a,
#fw-sidebar .fw-title a:visited,
#fw-sidebar .fw-title a:hover {
	color: #fff;
	text-decoration: none;
}

#fw-sidebar .fw-title {
	font-size: 1.3em;
	font-weight: normal;
}

/* --- Footer --- */


#fw-footer {	
	font: normal 10px verdana, sans-serif;
	background: #242424;
	margin: 0px;
	padding: 11px 0px 1px;
	color: #999;
	clear: both;
	width: 760px;
}

.fw-footertext {
	background: #161616;
	border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	margin: 0px;
	padding: 6px 0px 6px 20px;
}

I am curious to know if IE8 as released is what I should be designing for? I have noticed that sites I have developed that look good in IE7 and FF look as they should, but open them up in IE8 and they do not look good at all. Tom

Ok, this is my last chance at solving this problem.

I've created my site using CSS and XHTML, working fine in all the PC browsers I can find, but for some reason it is a different story on a Mac, especially IE.

It seems the left hand column of my site spreads across the full width, knocking the right frame down below it. I've looked and looked at my CSS code and I can't see what might be causing the problem.

My site is here, my CSS and XHTML is valid, although I have removed one CSS file due to problems so that is nothing to worry about.

If anyone can help, pref if you have a Mac, I would be so greatful.

EDIT #2: Would have been nice if I had gotten some help. Anyways, managed to fix it by just messing around with the coding.

Here's what I did if anyone needs this as reference or help:
Quote:
/* --------------- Div ID's --------------- */

/* ----- HEADER ----- */

#header {
width:741px;
height:224px;
background-image:url("");
border:solid 0px #000;
}

/* FAUX LAYOUT WRAPPER */

#wrapper{
width:741px;
background:url("") repeat-y;
overflow:auto;
margin-top:0px;
position: relative;
}

/* ----- NAVIGATION ----- */

#sidebar {
width:182px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
background:transparent;
border:solid 0px #000;
float: right;
position:relative;
right:92px;
top:0px;
}

/* ----- MAIN CONTENT ----- */

#main {
width:362px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
background:transparent;
border:solid 0px #000;

margin-top:0px;
position:relative;
left:72px;
top:0px;
}

/* ----- FOOTER ----- */

#footer {
width:741px;
height:325px;
background-image:url("");
margin-top:0px;
border:solid 0px #000;
}






EDIT: I fixed problems 1 and 3 but I still need help with problem 2. Why aren't my div layers moving AT ALL when I use the position: absolute value relative to another div layer????? Please help! Thanks!

Oh, forgot to mention, I'm using wordpress 2.7 in case it affects anything at all.

And here's the part of css concerning the divs :

Quote:
/* --------------- Div ID's --------------- */

/* ----- HEADER ----- */

#header {
width:741px;
height:224px;
background-image:url();
border:solid 0px #000;
}


/* FAUX LAYOUT WRAPPER */

#wrapper{
width:741px;
background:url();
overflow:auto; /* USE FIREFOX GUYS! WE ONLY NEED THIS LINE BECAUSE INTERNET EXPLODER ISN'T READING CODE PROPERLY */
margin-top:0px;
position: relative;
}


/* ----- NAVIGATION ----- */

#sidebar {
width:180px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
background:transparent;
border:solid 1px #000;
float:right;
}


/* ----- MAIN CONTENT ----- */

#main {
width:460px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
background:transparent;
border:solid 1px #000;
margin-top:0px;
position: absolute;
top:0;
right:30;
}


/* ----- FOOTER ----- */

#footer {
width:741px;
height:325px;
background-image:url();
margin-top:0px;
border:solid 0px #000;
}




Resolved Stuff: (incase anyone has the same issue and wanted to know what I did)

Quote:
Okay, I'm having trouble positioning my div boxes in the wrapper and some other minor issues that I just can't seem to make it work. They a

1) The background images are not lined up. How do I make the background images line up? (The header and footer have a background image and so does the content box). They are all off by a couple of pixels and I can't seem to get it to work. [FIXED: Just changed the size of the images, apparently css wasn't the problem.]

2) How do move the two div boxes in the div wrapper so that they are only over the image? (More specifically, the right div over the yellow paper part and the left div over the notebook paper part that's a bit faded.)

3) The footer cuts off and does not go to the full height I specified (325 px). [FIXED: Took another route and changed my css layering entirely.]

Ok so i made a site that validates in w3c check and shows ok on all browsers save for IE. Im really not sure where to begin on debugging it! http://new.mostardesigns.com/

Any help is much appreciated!

Hello guys, my name's Ben, how y'all doing?

I recently took over a website for my uni canoe club and am trying to design a new, better looking version of the site at present. I am getting there, but I am having a few issues with CSS that I can't seem to fix. Note that I have been testing the site on Firefox, and plan to come back to any IE issues once it looks good with standards.

A static mockup (php will come later) of the site as it stands now can be found here (URL www DOT uhcc DOT co DOT uk/v3_mockup/) (excuse the dodgy slogon, that's just a placeholder from one of our old t-shirts) the two problems I am having are as follows:
I can't seem to remove the white spaces between the images in the right hand column. margin and padding are set to 0 for the images, so I can't see what is causing it I need the left and right column to extend right down to the footer. They are both set at "height:100%" but that doesn't seem to work. Also the #main div doesn't seem to extend down as far as the footer, either! ARGH!
Any help will be much appreciated!

hello all,
I am stuck on few things here. I want to make the following changes and I tried fixing them several times but could not succeed.

1. quantity input align right at the center.
2. remove button v-align at the bottom of the total1 div tag, centered.
4. subtotal text positioned on same vertical line with Qty.
3. update button position 50px left side of subtotal text.


I'd appreciate any help I could get. If you think my css is sloppy please advise, I am open to make any changes, its better late than wrong.

http://www.refinethetaste.com/html/content/basket/basket.htm


Code:

<style>
/*basket*/
#basket	{ width:576px; float:left; margin-left:2px; }
#basket .basket	{ float: left; width: 574px; margin: 10px 0; border: #ece7d1 1px solid;}
#basket h1	{ height:30px; font-size: 18px; color:#716759; line-height:30px;}
#basket .basket .desc { float: left; width:274px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#basket .basket .weight	{ float: left; width:60px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#basket .basket .price	{ float: left; width:60px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#basket .basket .qty	{ float: left; width:60px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#basket .basket .total	{ float: left; width:60px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#basket .basket .desc1 { float: left; width:274px; height:80px; margin:3px; padding:3px;  }
#basket .basket .weight1	{ float: left; width:60px; height:80px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#basket .basket .price1	{ float: left; width:60px; height:80px; text-align: center; color:#716759; margin:3px; padding:3px;  }
#basket .basket .qty1	{ float: left; width:60px; height:80px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#basket .basket .total1	{ float: left; width:60px; height:80px; text-align: center; font-weight:bold; font-size:14px; color:#716759; margin:3px; padding:3px;  }
#basket .basket .remove	{ float: left; width:574px; height:15px; border-bottom: #ece7d1 1px dotted;   }
#basket .basket .subtotal { float: left; width:504px; text-align:right; font-weight:bold; font-size:14px; border-right: #ece7d1 1px dotted; margin:10px 0 10px 0;   }
#basket .basket .subtotalint { float: left; width:60px; text-align:center; font-weight:bold; font-size:14px; border-bottom: #ece7d1 1px dotted; margin:10px 0 10px 0;}


#basket .hline {	border-bottom:5px solid #ece7d1; margin:10px 0 10px 0; padding:0; }

#signup form fieldset { margin: 10px 0; border: #ece7d1 1px solid; }
#signup form div label {  display: block;  float: left;  width: 120px;  padding: 5px; margin: 0 0 10px 0;  text-align: left;}
#signup form div.required label, label.required {  font-weight: bold; }
input.signupsubmit	{ float: right; border:0;}

#basket img#update { float:right; width: 48px; height: 15px; padding-right:150px; border: 0px; }
#basket img#remove { float:right; width: 52px; height: 15px; border: 0px; }
#basket img#contshopping { float:right;	width: 141px; height: 25px; padding-right:50px; border: 0px; }
#basket img#checkout { float:right;	width: 89px; height: 25px; border: 0px; }

#basket input.quantity { border:1px solid #716759; width:30px; text-align:right;	}

</style>
	<div id="basket">
        <h1>Create a New Account</h1>
        To take full advantage of your Williams-Sonoma account, please provide all the information below.
        <div class="hline"></div>
        <img alt="" src="http://www.refinethetaste.com/html/THEMES/default/images/checkout_step1.gif" /> 
    	<div class="basket">
            <div class="desc">Product Description</div>
            <div class="weight">Weight</div>
            <div class="price">Price</div>
            <div class="qty">Qty</div>
            <div class="total">Total</div>
            
              
			<form action="?Section=basket&Process=updatecart" method="post">          
                <div class="desc1">
                	<a href="default.asp?Section=product&PRODUCTID=13">Organic Fruit Harvest</a>
                    <br />
                    
                </div>
                <div class="weight1">2.5</div>
                <div class="price1">60</div>
                <div class="qty1"><input type='text' name='adet_13' onKeyup='if(this.value==0){this.value=1; this.select(); }' onclick='this.select();' maxlength='3' value='1' class="quantity"></div>
                <div class="total1">60</div>          
                <div class="remove"><a href="?Section=basket&Process=deletefromcart&PRODUCTID=13"><img alt="Remove" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_remove.gif" id="remove" /></a></div>
            </form>
              
			<form action="?Section=basket&Process=updatecart" method="post">          
                <div class="desc1">
                	<a href="default.asp?Section=product&PRODUCTID=15">Cornucopia</a>
                    <br />
                    
                </div>
                <div class="weight1">2</div>
                <div class="price1">60</div>
                <div class="qty1"><input type='text' name='adet_15' onKeyup='if(this.value==0){this.value=1; this.select(); }' onclick='this.select();' maxlength='3' value='1' class="quantity"></div>
                <div class="total1">60</div>          
                <div class="remove"><a href="?Section=basket&Process=deletefromcart&PRODUCTID=15"><img alt="Remove" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_remove.gif" id="remove" /></a></div>
            </form>
              
			<form action="?Section=basket&Process=updatecart" method="post">          
                <div class="desc1">
                	<a href="default.asp?Section=product&PRODUCTID=14">Organic Cider Celebration</a>
                    <br />
                    
                </div>
                <div class="weight1">1</div>
                <div class="price1">60</div>
                <div class="qty1"><input type='text' name='adet_14' onKeyup='if(this.value==0){this.value=1; this.select(); }' onclick='this.select();' maxlength='3' value='1' class="quantity"></div>
                <div class="total1">60</div>          
                <div class="remove"><a href="?Section=basket&Process=deletefromcart&PRODUCTID=14"><img alt="Remove" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_remove.gif" id="remove" /></a></div>
            </form>
          
			<div class="subtotal"><img alt="Update" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_update.gif" id="update" /> SubTotal</div>
			<div class="subtotalint">180</div>
            
        </div>



    <br />
    <a href="?Section=checkout"><img alt="Checkout" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_checkout.gif" id="checkout" /></a>
    <a href="http://www.refinethetaste.com/html"><img alt="Checkout" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_contshopping.gif" id="contshopping" /></a>
    </div>
   

hello again,

I coded the basket page with rows and cells this time as per kk5st's suggestion. But yet here again with few problems.

see it yourself page:
http://www.refinethetaste.com/html/content/basket/basket.htm

1. I dont understand why the table is short now. it should strech up until the border.
2. I want remove button v-align at the bottom of the cell.
3. I want quantity input align right at the center.

I'd appreciate any help I could get. If you think my css is sloppy please advise, I am open to make any changes, its better late than wrong



Code:

<style>
/*basket*/
#basket	{ width:576px; float:left; margin-left:2px; }
#basket .basket	{ float: left; width: 574px; margin: 10px 0; border: #ece7d1 1px solid;}
#basket h1	{ height:30px; font-size: 18px; color:#716759; line-height:30px;}
#basket .basket .thdesc { float: left; width:274px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#basket .basket .th	{ float: left; width:60px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#basket .basket .tddesc { float: left; width:274px;  height:80px; font-size: 14px; color:#716759; margin:3px; padding:3px; vertical-align:text-top;  }
#basket .basket .color	{ float: left; width:60px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px; vertical-align:text-top;  }
#basket .basket .noncolor	{ float: left; width:60px; text-align: center; color:#716759; margin:3px; padding:3px; vertical-align:text-top;  }
#basket .basket .intprice	{ font-weight:bold; }

#basket .hline {	border-bottom:5px solid #ece7d1; margin:10px 0 10px 0; padding:0; }

#signup form fieldset { margin: 10px 0; border: #ece7d1 1px solid; }
#signup form div label {  display: block;  float: left;  width: 120px;  padding: 5px; margin: 0 0 10px 0;  text-align: left;}
#signup form div.required label, label.required {  font-weight: bold; }
input.signupsubmit	{ float: right; border:0;}

#basket img#updatesbasket { float:left; width: 141px; height: 15px; border: 0px; }
#basket img#remove { float:right; width: 52px; height: 15px; border: 0px; }
#basket img#contshopping { float:right;	width: 141px; height: 25px; padding-right:50px; border: 0px; }
#basket img#checkout { float:right;	width: 89px; height: 25px; border: 0px; }

#basket input.quantity { border:1px solid #716759; width:30px; text-align:right;	}

</style>
	<div id="basket">
      <h1>Create a New Account</h1>
	  To take full advantage of your Williams-Sonoma account, please provide all the information below.
	  <div class="hline"></div>
	  <img alt="" src="http://www.refinethetaste.com/html/THEMES/default/images/checkout_step1.gif" />
      <div class="basket">
        <table>
          <tr>
            <th class="thdesc">Product Description</th>
            <th class="th">Weight</th>
            <th class="th">Price</th>
            <th class="th">Qty</th>
            <th class="th">Total</th>
          </tr>
          
          <form action="?Section=basket&Process=updatecart" method="post">
            <tr>
              <td class="tddesc"><a href="default.asp?Section=product&PRODUCTID=13">Organic Fruit Harvest</a> <br />
               </td>
              <td class="color">2.5LBS</td>
              <td class="noncolor"><span class="intprice">$360</span></td>
              <td class="color"><input type='text' name='adet_13' onkeyup='if(this.value==0){this.value=1; this.select(); }' onclick='this.select();' maxlength='3' value='2' class="quantity" /></td>
              <td class="noncolor">
              <span class="intprice">$120</span>
              <a href="?Section=basket&Process=deletefromcart&PRODUCTID=13"><img alt="Remove" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_remove.gif" id="remove" /></a>
              </td>
            </tr>
            <tr>
              <td colspan="5" height="1px" bgcolor="#ece7d1" ></td>
            </tr>

          <form action="?Section=basket&Process=updatecart" method="post">
            <tr>
              <td class="tddesc"><a href="default.asp?Section=product&PRODUCTID=15">Cornucopia</a> <br />
               </td>
              <td class="color">2.15LBS</td>
              <td class="noncolor"><span class="intprice">$360</span></td>
              <td class="color"><input type='text' name='adet_15' onkeyup='if(this.value==0){this.value=1; this.select(); }' onclick='this.select();' maxlength='3' value='1' class="quantity" /></td>
              <td class="noncolor">
              <span class="intprice">$60</span>
              <a href="?Section=basket&Process=deletefromcart&PRODUCTID=15"><img alt="Remove" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_remove.gif" id="remove" /></a>
              </td>
            </tr>
            <tr>
              <td colspan="5" height="1px" bgcolor="#ece7d1" ></td>
            </tr>

          <form action="?Section=basket&Process=updatecart" method="post">
            <tr>
              <td class="tddesc"><a href="default.asp?Section=product&PRODUCTID=14">Organic Cider Celebration</a> <br />
               </td>
              <td class="color">1LBS</td>
              <td class="noncolor"><span class="intprice">$360</span></td>
              <td class="color"><input type='text' name='adet_14' onkeyup='if(this.value==0){this.value=1; this.select(); }' onclick='this.select();' maxlength='3' value='1' class="quantity" /></td>
              <td class="noncolor">
              <span class="intprice">$60</span>
              <a href="?Section=basket&Process=deletefromcart&PRODUCTID=14"><img alt="Remove" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_remove.gif" id="remove" /></a>
              </td>
            </tr>
            <tr>
              <td colspan="5" height="1px" bgcolor="#ece7d1" ></td>
            </tr>

            <tr>
            	<td colspan="2"><img alt="Update Shopping Basket" src="http://www.refinethetaste.com/html/THEMES/default/images/btn_updatesbasket.gif" id="updatesbasket" /></td>
                <td></td>
                <td>Subtotal</td>
                <td class="color">$240</td>
            </tr>
            <tr>
                <td>Shipping Options & Charges</td>
                <td colspan="2"></td>
                <td>Total</td>
                <td class="color">$90</td>
            </tr>
          </form>
        </table>
      </div>

I am brand new to CSS and I'm having two issues. I've searched around and I cannot figure this out.

1. I cannot get text inside a div. I'm using an external style sheet and I can't seem to get text to go inside a scrolling DIV. I'm completely confused.

2. The second issue is if the window shrinks or someone is using a smaller resolution, I want the CSS to shrink the page and stay uniform as well. It also doesn't play nicely in IE.

The issue I'm having is I'm not very comfortable with my CSS yet so I'm kind of hesitant to play around too much.

Here is my code. Please don't laugh too hard :/

Code:

body {
	background: white url(xxxxxx) repeat-y center;
}

#header { 

position: fixed; top: 0px; left: 20%;

}

#headertext {

position: fixed; top: 15px; left: 268px;
width: 100%;

}

#navbar {

position: fixed; top: 150px; left: 256px;
width 100%;

}

#navbartext {

position: fixed; top: 150px; left: 240px;
width: 100%;

}

#footer {

position: fixed; top: 735px; left: 256px;
width 100%;

}

#footertext {

position: fixed; top: 747px; left: 251px;
width 100%;

}

#textbackground {

background-color: #000000;
position: fixed; top: 193px; left: 256px;
width: 768px;
height: 542px;
overflow: auto;

}

I think I did alright for a first time CSS writer but it's obviously not right.