CSS - Site Displays Wrong In Firefox/mozilla

Hi-

I am finishing up design of a site, and validated it with the W3c validator (everything is valid). When I go to it on IE, everything shows up the way that it should. However, when I go to it on Firefox or Safari, on three pages there seems to be a 'chunk' taken out of the left side. If you compare the three pages in IE and Firefox you should see what I mean (devshed won't let me post links so sorry for the formatting):

01f086d.netsolhost dot com/yk/services dot html
01f086d.netsolhost dot com/yk/experience dot html
01f086d.netsolhost dot com/yk/principals dot html

It seems to be the page length that is causing this, because on shorter length pages, there is no chunk.

I am using DIV tags to lay the site out, which should be pretty easy to follow if you view source. My CSS file is at: 01f086d.netsolhost dot com/yk/assets/css/defaultPage dot css (also validated with W3C).

Any help would be GREATLY appreciated as I have spent hours on this last problem and can't figure out what is causing it!

I apologize if this is supposed to be in the HTML forum. Since html code can be viewed from the source I thought I will post the css code to cross check since I couldn't figure out what is causing the problem. So thought I would post it in CSS forum.

I have the following site that displays fine in Firefox but is all a mess in IE.

http://www.geocities.com/dhaagey08/DhaageyTab2.html

Following is the CSS code I am using.

======================================

* {
margin: 0;
padding: 0;
}
html {
background: #fff url("images/html1.png") repeat-x left top;
}
body {
font-family: arial, sans-serif;
font-size: 12px;
color: #888888;
background: url("images/body.png") repeat-y left top;
width: 1000px;
margin: 0 auto 30px auto;
position: relative;
}
a img {
border: 1px solid #ccc;
}

a {
color: #f48a88;
text-decoration: none;
}
a:hover {
visibility: visible;
/* IE bug fix */
}
a:hover img {
border: 1px solid #729AD7;
}
h1 {
font-size: 14px;
}
h2 {
font-size: 12px;
}
.page {
background: url("images/page3.jpg") no-repeat left top;
padding: 15px 125px 0px 115px;
width: 760px;
}

.header{
position: relative;
width: 760px;
height: 170px;
left: 5px;
top: 0;
background: url("images/header1a.jpg") no-repeat left top;
}


/************* menu1 ******************/

.bar4285801 {

width: 345px;
height: 35px;
position: relative;
}

.bar4285801 table.tabbar {
position: absolute;
width: auto;
height: auto;
top: 0px;
left: 45px;
}

.bar4285801 div {
height: 35px;
width: 115px;
}

.bar4285801 div.button {
background: url(menu47831178.jpg);
}

/****************** menu2 ***********************/
.bar4285846 {

width: 345px;
height: 35px;
position: relative;
}

.bar4285846 table.tabbar {
position: relative;
width: auto;
height: auto;
top: -35px;
left: 390px;
}

.bar4285846 div {
height: 35px;
width: 115px;
}

.bar4285846 div.button {
background: url(menu30455262.jpg);
}
.main {
width: 706px;
margin: 0 auto;
}
.box1 {
border: 1px solid #ccc;
clear: both;
padding: 0 5px 25px 2px;
width: 690px;
height:350px;
position: relative;

}
.lady {
float: left;
width:220px;
height:350px;
background: url("images/lady2s.jpg");

}

#right {
width: 457px;
float: right;
padding-bottom: 130px;
}

.dhaagey {
font-family: monotype corsiva;
font-size: 30px;
color: #89201d;
}
.contact{
font-family: monotype corsiva;
font-size: 18px;
color: #89201d;
float: right;
margin-top: 55px;
}

.photos {

margin-top: 5px;
padding-bottom: 8px;
}
.photos a {
width: 106px;
height: 140px;
float: left;
background: #C2D3EE;
text-align: center;
color: #A2A3A6;
text-decoration: none;
font-size: 11px;
font-weight: bold;
margin-right: 14px;
}
.photos>a {
min-height: 148px;
height: auto;
}
.photos a.last, .greybox-background .right a.last {
margin-right: 0;
}
.photos a:hover {
color: #f48a88;
}
.photos a span {
display: block;
padding-top: 2px;
}
.photos a>span {
padding-top: 5px;
}
.greybox {
border: 1px solid #ccc;
margin-bottom: 39px;
padding: 5px 0;
}
.greybox-background {
background: url("images/gbback.jpg") repeat-y left top;
width: 100%;
line-height: 170%;
}
.greybox-background .left, .greybox-background .right {
width: 321px;
float: left;
padding: 0 10px;
}
.greybox-background .right {
float: left;
padding: 0 19px 0 20px;
}

.greybox-background .right a {
display: block;
float: left;
margin-right: 11px;
margin-top: 8px;
}
.greybox2 {
border: 1px solid #ccc;
margin-bottom: 15px;
padding: 9px 7px;
width: 688px;
}
.greybox2 .preview {
float: left;
margin-right: 40px;
margin-right: 44px;
}
.greybox2 .preview img {
padding: 5px;
}
.greybox2 .right {
float: left;
width: 350px;
}
.greybox2 .right a {
float: left;
margin: 0 14px 7px 0;
}
.footer1 {
text-align: center;
padding: 0 27px 3px 27px;
}
.footer1 a {
color: #872323;
text-decoration: none;
}
.footer1 a:hover {
color: #d87126;
text-decoration: none;
}
.footer2 {
font-size: 0px;
line-height: 0px;
height: 15px;
background: url("images/footer.png") no-repeat left top;
margin-left: 110px;

}
.cleaner {
font-size: 0px;
line-height: 0px;
height: 0px;
clear: both;
}
============================================

Any help is greatly appareciated.

The website
Quote:
downloadwarez.org


CSS
Quote:
/* default styles */
body { padding: 5px 0 0 0; margin: 0; font: .7em Tahoma, Arial, sans-serif; line-height: 1.7em; background: #fff url(images/bg.gif) repeat-x; color: #454545; }
a { color: #2F637A; background: inherit; }
a:hover { color: #808080; background: inherit; }
p { margin: 0 0 5px 0; }
h1 { font: bold 2.2em Arial, Sans-Serif; padding: 8px 0 0 0; margin: 0; letter-spacing: -1px; }
h2 { margin: 0; padding: 0; font: bold 1.8em Arial, Sans-Serif; letter-spacing: -1px; }
h1 a, h2 a { color: #000; background: inherit; text-decoration: none; }
ul { margin: 0; padding : 0; list-style : none; }
img { border: 0; }


/* layout */
#content { margin: 10px auto; width: 960px; }
#logo { margin: 0 0 10px 0; }
#slogan { font-size: 0.9em; margin: 0 0 10px 2px; padding: 0; color: #808080; background: #fff; }
#top_info { line-height: 27px; float: right; color: #808080; background: #fff; margin: 12px 5px 7px 0; text-align: right; height: 74px; }

/* round blue login button */
#loginbutton a { text-decoration: none; width: 24px; padding: 7px 12px; margin: 0 0 0 8px; height: 28px; background: #fff url(images/lb.gif) no-repeat; color: #000; }
#loginbutton a:hover{ background: #fff url(images/lbhover.gif) no-repeat; color: #000;}

/* main horizontal menu */
#tablist{ padding: 3px 0; margin: 0; float: left; }
#tablist li{ list-style: none; display: inline; margin: 0; }
#tablist li a{
text-decoration: none;
padding: 4px 22px;
margin-right: 2px;
background: #808080 url(images/corner.gif) no-repeat top right;
font-weight: bold;
color: #fff;
}
#tablist li a:hover{
background: #6495AB url(images/corner.gif) no-repeat top right;
color: #fff;
}
#tablist li a.current{
background: #9FC7D8 url(images/corner.gif) no-repeat top right;
color: #2F637A;
padding: 6px 22px;
}
#tablist .key { text-decoration: none; }

/* main menu topics */
#topics {
clear: left;
float: left;
width: 640px;
background: #B0D0DC url(images/topicsbg.gif) repeat-x left bottom;
padding: 8px 5px;
margin: 0 0 5px 0;
color: #fff;
height: 59px;
}
#topics li a { background-image: url(images/bullet.gif); background-repeat: no-repeat; background-position: center left; padding: 0 0 0 12px; }

/* main menu search */
#search {
float: right;
text-align: right;
background: #fff url(images/searchbg.gif) no-repeat;
color: #000;
padding: 32px 20px 12px 20px;
min-height: 32px; /* FF height */
height: 25px; /* IE height */
width: 270px;
}
/* search form styling */
form, form p { margin: 0; padding: 0; line-height: 25px; }

.search { width: 170px; border: 1px solid #357994; background: #fff; color: #478F36; padding: 4px; margin: 0; font-weight: bold; font-size: 1.3em; }
.button { padding: 4px; font: bold 1em Arial, Sans-Serif; }

/* left side */
#left {
float: left;
width: 635px;
margin: 0 0 10px 0;
}
.subheader {
margin: 0 0 10px 0;
padding: 8px;
background: #f4f4f4 url(images/bgshade.gif) repeat-x;
color: #808080;
border-bottom: 1px solid #ccc;
}
.left_articles {
margin: 0px 0 10px 0;
background: #fff url(images/bgshade.gif) repeat-x;
color: #454545;
padding: 15px 15px 5px 10px;
}
.date { font-size: .9em; padding: 0 0 0 12px; background: #fff url(images/news.gif) no-repeat center left; color: #808080; }
.bigimage {
float: left;
clear: left;
border: 1px solid #ccc;
background: #eee;
color: #000;
width: 200px;
height: 150px;
margin: 0 15px 10px 0;
}
.left_box {
background: #f4f4f4;
color: #808080;
border-top: 1px dotted #ccc;
border-bottom: 1px dotted #ccc;
padding: 15px;
margin: 0 0 15px 0;
}
.thirds {
float: left;
width: 186px;
padding: 0 10px 0 15px;
}

/* right side */
#right {
float: right;
width: 310px;
margin: 0 0 10px 0;
}
.right_articles {
border: 1px solid #ccc;
padding: 8px;
margin: 0 0 10px 0;
background: #eee;
color: #454545;
}
.image { float: left; margin: 0 9px 3px 0; }
.notes {
border-top: 1px dotted #ccc;
border-bottom: 1px dotted #ccc;
padding: 17px 10px 17px 80px;
margin: 0 0 10px 0;
background: #fff url(images/notes.gif) no-repeat center left;
color: #454545;
}
/* footer */
#footer {
clear: both;
color: #808080;
background: #FFF;
padding: 10px 15px;
border-top: 1px solid #ccc;
}
#footer .right { float: right; }

The page bar should be below the software table, like it is displayed in FireFox. But it shows wrong in Internet Explorer and Opera.

The code looks ok, so i think it must be CSS. Can anyone help

Hi:

Could someone be kind enough to point out what I should do to fix this problem?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TASK SELECTION FORM</title>
<style type="text/css">
form {display:inline;font-family: Arial;font-weight: bold;font-size: 12px;color: #000000;}
legend {color:#000000;}

.heading {font-weight: bold;font-size: 15px;color:#000000;}
.npt {width:35%;float: center;}

#f1	{font-family: Arial;font-weight: bold;font-size: 17px;color: #ffffcc;}

#f2 {background-color:#99ccff;}

#f3, #f4, #f5, #f6, #f7, #f8 {background-color:#ffffcc;}

#f2 {width: 240px;height: 425px;border: 5px ridge #777;padding: 20px;margin: 0px auto;text-align:right;background-color:#99ccff;float: center;}

#f3 {width: 215px;height: 40px;border: 1px ridge #777;padding: 10px;margin: 0px auto;text-align:right;background-color:#ffffcc;float: center;}

#f4 {width: 215px;height: 40px;border: 1px ridge #777;padding: 10px;margin: 0px auto;text-align:right;background-color:#ffffcc;float: center;}

#f5 {width: 215px;height: 40px;border: 1px ridge #777;padding: 10px;margin: 0px auto;text-align:right;background-color:#ffffcc;float: center;}

#f6 {width: 215px;height: 40px;border: 1px ridge #777;padding: 10px;margin: 0px auto;text-align:right;background-color:#ffffcc;float: center;}

#f7 {width: 215px;height: 40px;border: 1px ridge #777;padding: 10px;margin: 0px auto;text-align:right;background-color:#ffffcc;float: center;}

#f8 {width: 215px;height: 40px;border: 1px ridge #777;padding: 10px;margin: 0px auto;text-align:right;background-color:#ffffcc;float: center;}

.button {width:100px;margin-right:6px;}
</style>
</head>

<body bgcolor="#6699cc">

<div id="f1">
	<center>
		<legend>WELCOME!</legend>

		<br>
		<br>

		<legend>KINDLY SELECT A TASK FROM THE TABLE BELOW</legend>
		<br>
		<hr width="50%" size="2" color="black">
		<br>
	</center>
</div>

<div id="f2">
		<center>
		<div class="heading">TASK SELECTION FORM</div>
		<br>
		</center>

<div id="f3">
	<form method="POST" action="job_sheet_1.html">
		<fieldset>
		<div class="npt"><input type="submit"	name="job_sheet" value="       CREATE JOB SHEET       "></div>
		</fieldset>
	</form>
</div>

<div id="f4">
	<form method="POST" action="create_job_sheet.html">
		<fieldset>
		<div class="npt"><input type="submit"	name="create_job_sheet" value="         PRINT JOB SHEET          "></div>
		</fieldset>
	</form>
</div>

<div id="f5">
	<form method="POST" action="work_sheet.php">
		<fieldset>
		<div class="npt"><input type="submit"	name="work_sheet" value="     CREATE WORK SHEET    "></div>
		</fieldset>
	</form>
</div>

<div id="f6">
	<form method="POST" action="admin_passwd.html">
		<fieldset>
		<div class="npt"><input type="submit"	name="admin_passwd" value="             ADD NEW USER            "></div>
		</fieldset>
	</form>
</div>

<div id="f7">
	<form method="POST" action="delete_record.php">
		<fieldset>
		<div class="npt"><input type="submit"	name="delete" value="           DELETE RECORD           "></div>
		</fieldset>
	</form>
</div>

<div id="f8">
	<form method="POST" action="taskselectionform.php">
		<fieldset>
		<div class="npt"><input type="submit"	name="exit" value="             EXIT PROGRAM             "></div>
		</fieldset>
	</form>
</div>
</div>
</body>
</head>
</html>

In IE 6.0 the display is jagged.

Thanks for your help!

I designed a site,caringfriendsinc.com . Everything displays fine in Firefox, but in IE7 the images in the center of the services page are spaced apart just a little bit. It is noticeable around the edges. I can't seem to figure out how to fix it.

Thanks in advance.