CSS - Form Element Inside Of Floated Div Mozilla Problem

Hi

I was wondering why only IE7 makes relatively positioned elements disappear into the right hand column on my site. It only happens when displayed in IE7, remaining browsers are ok (FF, Opera, even IE6). Being a newbie with IE7 bugs and workarounds, I ask you for advice.

This is the page

look at ghost images on RH column - IE7 only bug

Please note the quircky behavior when you hover on any backgrounded area within the RH column: images within "LO MAS COMPRADO" and "RECIEN LLEGADOS" appear and disappear as lights turn on and off on a Christmas tree. All the areas that trigger this bug have in common to shift its background on hover.

It's really funny, you hover on any area below those two blocks and all images dissapear, hover on any area above those blocks and images reappear, hover on areas within the blocks and image will appear only on the corresponding block.

Is this an IE6 peekaboo variant?

I've tried to isolate the problem, adding and deleting blocks inside the column, but it is a strange combination I can't realize. It happens just within the two blocks mentioned above, as you can see here. Images first appear ok, but they dissapear every time you hover over the "buttons" (wich are really block displayed <a>'s with shifting bg img. on hover), wich is almost the same that occurs in the complete Rh column version.

Any thoughts?

Thank you

Here's the site in Question: http://www.winchps.vic.edu.au

It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6.

Here's the CSS code for the basic layout:

Code:

body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}

#header {
width: 802px;
}

#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}

#content {
padding: 0px;
margin: 0px;
}

#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}

#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}

#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}

#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}

#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}

I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc).

Anyone got any ideas?

Hello,

I know that putting a block level element (such as <p> or <div>) inside an inline element (such as <a>) is against "xhtml 1.0 strict" rules, so I'm putting a <span> (inline) within an <a> (also inline).

I've made my <span> "display: block;", and it works in all browsers and validates fine, but I feel like I'm cheating the system a bit?

The thing is, I need to put a margin under a piece of text without using <br /> (as when a browser forces a line break, it will use that rule and make different pieces of text look odd), but all the text is within an anchor tag, so I can't use <p> or <div>.



Would appreciate any thoughts on the matter,

Cheers!

Hello,

I have a page where a left-floated <div> is nested within the main <div>. Content then is placed in a <div> next to the left-floated one.

My problem is that the main <div> does not stretch to the height of the left-floated <div>, rather just to the height of the content.

I placed:
Code:

<br style="clear: both;">

after the content <div> which usually does the trick but it's not working for some reason...

And even more confusing is the fact that if I change the <br> to something else like say <span>, the main <div> does stretch to the proper height BUT the content within the <h1> tag and the content <div> are not displayed until you do something like minimize the window then restore it or bring another window in front of it then bring it back to focus.

This happens in IE only.

Any ideas?

Page html/css:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 76%;
	background-color: #f9dcb3;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

#cRightPaneBot	{
	background-color: #D9E0EA;
	border: 1px solid #9DA7B5;
	margin: 23px 0px 0px 0px;
	padding: 15px 10px 15px 15px;
	/*
    width: 673px;
	height: 238px;
	*/	
}

.cLeftPane	{
    margin: 0px 20px 0px 0px;
	border: 1px solid #9DA7B5;
    overflow: hidden;
	float: left;
    background-color: #F5F7FB;
	height: 223px;
    /*
    */
}

h1  {
    font-size: 1.5em;
    /*
	display: inline;
	*/
}

.breakAfter {
    margin: 0px 0px 10px 0px;
}

</style>
</head>

<body>
<div id="cRightPaneBot">
	<h1 class="breakAfter">My Title</h1>
	<div class="cLeftPane" style="width: 200px;">
		hello
	</div>
	<div id="content">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tortor dui, imperdiet eu, porta vel, blandit in, augue. Morbi et sem ut libero tempus facilisis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vestibulum posuere neque. Nullam quis pede. Nulla posuere neque non pede. Etiam nec ante non eros sodales feugiat. Morbi malesuada lorem at velit. Praesent augue erat, sollicitudin sit amet, imperdiet eget, ornare at, dui. Curabitur at urna. 
	</div><br style="clear: both;">
</div>
</body>
</html>

I have a <ul> list in which I set the opacity for the <li> elements. Inside the <li> elements I have <a> elements. The issue is that the <a> element text is inheriting the opacity for the <li>???

Here is a link

http://casadelmar.tmhdesign.com

Thanks.

I have some tabular data that I would like displayed in two columns within a div. The div has some basic styling on it to create a block around the tables. The tables should appear side by side at the top of the div, so I floated the tables. I then found that the width of the div was always 100% unless I floated the div as well. This made the div wrap around the tables nicely, but caused the next element to appear to the right of the div, not on the next line as it normally would.

Here is the basic code I have so far: Code:

<html>
<head>
<style type="text/css">
div.box1 { 
	border: 1px solid red;
	background: #afafaf;
	padding: 2px;
	float: left;
}
div.box1 table { 
	float: left;
	border: 1px solid blue;
	margin-right: 15px;
}
</style>
</head>
<body>
<h1>Div</h1>
<div class="box1">
   <table>
    <tr>
     <td>Field1:</td>
     <td>Value</td>
    </tr>
    <tr>
     <td>Field1:</td>
     <td>Value</td>
    </tr>
    <tr>
     <td>Field1:</td>
     <td>Value</td>
    </tr>
    <tr>
     <td>Field1:</td>
     <td>Value</td>
    </tr>
   </table>
   <table>
    <tr>
     <td>Field2:</td>
     <td>Value</td>
    </tr>
    <tr>
     <td>Field2:</td>
     <td>Value</td>
    </tr>
    <tr>
     <td>Field2:</td>
     <td>Value</td>
    </tr>
   </table>
 </div>
</div>
<h1>Next Text</h1>
</body>
</html>

I would like for the "Next Text" to appear on a new line after the div. After reading this page, I added the following to my css: Code:

div.box1:after {
	content: 'clear me';
	clear: both;
	display: block;
	height: 0px;
	visibility: hidden;
}

However, this had no effect on the results in Firefox or Safari. The only way I have found to clear the div is to add style="clear: both" to the h1 tag following the div. I would prefer to not do this because it will be problematic for our graphics guys down the road. Any advice on how to clear the div and keep it wrapping around the tables?

hello, this is my first post so apologies if i give too much information, but rather than miss something crucial, i thought it best to cover all my bases.

i am new to CSS and have been trying to reproduce a design that i created as an image, in CSS for a website layout. i have managed the 'bones' of the website but am having difficulty when i get to the actual content.

not being the most technical when it comes to CSS terminology, i have uploaded an image which shows what i want it to look like

here

a cut down version of the page, including just the area in question is available here

XHTML

css

i validated my xhtml, but the css came up with warnings but didn't say it was invalid. i hope this is OK?

in firefox it looks fine, but in IE 6, you can see that the photo of the product is not flush to the left of the bordered div. i'm not sure if i have gone about it the wrong way or if it is IE.

a friend suggested that rather than have the 2 divs overlapping, i should just use a background image to create the effect, but being stubborn, i would like to try to fix this way, just for experience.

would anyone mind having a look?

hopefully i have provided enough info, but apologies if not. just ask and i will do my best to explain.

thank you for your time

J

I really hope somebody can help me out with this one. It might require some yucky hack, but I hope there's a good way to achieve it with regular css.

I got a header (140px height), main container and a footer.

The main container consists of three areas (from left to right):
- a fixed sized column with some illustration (48px)
- main contents column, (all available space)
- a fixed sized column with newsfacts and such (301px)

I've got an absolutely positioned div-element with an unordered list inside. The list-items got no bullets and are float: right, so the end result is a horizontal box. Each item is a link.

I want this div-element to be positioned at the top of the middle contents column with the unordered list bar right-aligned. For this I tried using a right-margin: 302px.

Also, each list-item is divided by a slim stripe/bar by giving the each li-element a left border. AND... the whole div-element got a bottom border which stretches as wide as the contents column is.

Here's a screenshot fragment in Firefox, the only browser in which I got it to work:
http://www.stack.nl/~rem/linksbox.jpg

I've got the following code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
   <link rel="stylesheet" href="/screen_abs.css" media="screen" type="text/css" title="regular" />
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
   <title>Welkomstpagina</title>
</head>

<body>
            <div id="startpageLinksBox">
	    <div id="links">links</div>

<!--               <ul>
                  <li><a href="#" onclick="window.open(this.href); return false;">dummy</a></li>
                  <li><a href="#" onclick="window.open(this.href); return false;">dummy</a></li>
                  <li><a href="#">dummy</a></li>
                  <li><a href="#">dummy</a></li>            
                  <li><a href="#">dummy</a></li>
               </ul>
-->
            </div>

</body>
</html>

with the following CSS file.

Code:

body {
  margin: 0;
  width: 100%;
  background: url("../../images/common/bg_news.gif") repeat-y top right;
}

div#links {
  display: inline;
  height: 20px;
  border: solid 1px #000000;
  float: right;
  width: 200px;
  margin-left: 48px;
  margin-right: 0px;
}

div#startpageLinksBox {
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  border-color: #e0e0e0;
  height: 20px;
  position: absolute;
  left: 48px;
  top: 140px;
  margin-right: 302px;
}

div#startpageLinksBox ul {
  margin-top: 0px;
  margin-bottom: 0px;
  list-style-type: none;
  border: solid 1px #000000;
  height: 20px;
}

div#startpageLinksBox ul li {
  float: right;
  border: solid 1px #e0e0e0;
  padding: 0px 5px;
}

a { font-family: Arial,sans-serif; font-size: 10px; color: #b0b0b0; }

Important note... since I was on the verge of screaming, I replaced the Unordered list temporarily with a div tag of class=links, to simplify things in a feeble attempt to isolate the problem.

It shows correctly in Mozilla Firefox 0.9.3 (0.1R1) by the way, but my boss wants it to be good in Firefox and Internet Explorer 5.5 and 6.0. Especially IE. I want it good in Firefox but darn... Firefox is the only one I get okay :P

The problem is.... with IE it puts the links to the right side of the screen. I've tried lots of things to get it 302 pixels from the right side of the screen, but everything gave problems.

I really hope somebody can give me an idea how I can fix it. It feels like it's just a small thing.

Hello, I have this arrow icon at the end of each <li> that is floated right. When the user clicks on it, he gets a dropdown list with options. I'm just having some trouble positioning it.

here is the screenshot of before and after the user clicks the arrow icon:


Here is the HTML that I am using to place it: Code:

<ol>
  <li><a class="control" href="javascript:toggleLayer('controlgroup01');">&nbsp;&nbsp;</a><a href="">System Executive Summary</a></li>
  <div class="controlgroup" id="controlgroup01">
    <a href="#">1</a><br />
    <a href="#">2</a><br />
    <a href="#">3</a><br />
    <a href="#">4</a><br />
  </div>
</ol>

I also tried encapsulating the <div> whithin the <li> in hopes that it would only affect that item like this: Code:

<ol>
  <li><a class="control" href="javascript:toggleLayer('controlgroup01');">&nbsp;&nbsp;</a><a href="">System Executive Summary</a>
    <div class="controlgroup" id="controlgroup01">
      <a href="#">1</a><br />
      <a href="#">2</a><br />
      <a href="#">3</a><br />
      <a href="#">4</a><br />
    </div>
  </li>
</ol>

Here is the CSS I am using to position the above <div> (which is invisible at first): Code:

.control
{
  float: right;
  border: 0px solid #000000;
  border-left: 1px dotted #cccccc;
  padding: 0px;
  padding-left: 8px;
  margin: 0px;
  margin-left: 8px;
  background-repeat: no-repeat;
  background-position: 100% 50%;
  text-decoration: none;
}

.controlgroup
{
  display: none;
  /* position: relative; */
  /* left: 70em; */
  border: 1px solid #fddc9a;
  background-color: #fff3ce;
  float: right;
}

.controlgroup a
{
  padding: 4px 4px 4px 24px;
  background-image: url(bulletarrow.bmp); /* Photoshop this into transparent GIF */
  background-repeat: no-repeat;
  background-position: 4px 50%;
}

I can't really use position: absolute; because depending on how the user resizes the browser, the box will be in a different place as it is supposed to be right justified, not left.

It can't be positioned the way it is b/c the items below it bump into it and get schootched over to the side. I wish there was some waay to do this. Does anybody know?

Thanks

In Firefox, I've got a right div that is not repsonding to an auto width in FF.

I am not a pro a CSS (yet ) and I hope that someone can give me the one line solution that I am missing.

I've included a screen shot of the problem, any help is greatly appreciated.

- K

CSS Code
Code:

#MainContainer
{
	float: 	left;
	width: 	auto; 
}

#Main
{
	margin-right: 0.2em;
}

#MainContent
{
	padding: 0.5em 0.5em 0.5em 0.5em;
}


#SidebarContainer
{
	float: 	right;
	width: 	250px;
	 	
border-top: 1px solid #C0C0C0;
	padding-top: 5px;
	clear: right;

}

#Sidebar
{	
	padding-bottom:	    5px;
	background:     	#ADADAD;
	background-image:   url(../images/SidebarBackground.jpg);
	background-repeat:  no-repeat;
	clear:left;
}

#SidebarContent
{
	margin: 0.2em 0.2em 0.2em 0.2em;
}

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!

http://www.em1.nl/martijn/test.html

It works perfect in IE, but in mozilla it doesn't, anyone has a solution?


Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
		<style type="text/css">

			#script {
				display: block;
				width : 200px;
				cursor : pointer;
			}
			A:HOVER {
				color : Yellow;

			}
			A {
				color : White;
				font-weight : bold;
				font-size : 12px;
				font-family : Arial, Helvetica, sans-serif;
				text-decoration : none;

			}

			body {
				font-family: arial, helvetica, serif;
			}

			
</style>
	<script> 
function showhide(id){ 

if (document.getElementById){ 
obj = document.getElementById(id); 
if (obj.style.display == "none"){ 
obj.style.display = ""; 
} else { 
obj.style.display = "none";
} 
} 
} 

</script>
</head>

<body bgcolor="#000000" link="#FFFFFF" vlink="#00FF00" alink="#FFFF00">

<div style="display: block;" onMouseOver="showhide('script');" onMouseOut="showhide('script');">&nbsp;<a href="#">Move mouse over this<br></a><font id="script" style="display: none;">
<a href="">link 1&nbsp;&nbsp;Works perfect in IE</a><br>
<a href="">link 2&nbsp;&nbsp;BUT mozilla it doesn't :-)</a><br>
<a href="">link 3&nbsp;&nbsp;anyone knows a solution?</a><br>
<a href="">link 4&nbsp;&nbsp;...............Thx</a><br></font></div>
</body>
</html>

Hello friends,

I have created this page

http://www.geocities.com/axe_42k1/index.html

with html and css its working fine with IE but in mozilla firefox, images in center are overlaping on right side images and no round border to themplease help me to solve this problem and i want to insert link to top left hand side image how can i do it with css?.

I have some css problems displaying in Netscape & Mozilla Firebird browsers with a site I've built. The top menu and dropdowns aren't displaying correctly. There are also some spacing and alignment problems in the main body area and right column section. It seems to set up an invalid CSS style, but I'm not sure how to correct this for these browsers. I've made several attempts to no avail. I want to keep it working in IE. I've looked at some css hacks, but can't get it working with my style sheet and correct the Mozilla browser problem.

Here is the link to the site:

http://www.delfuegocompanies.com

Any help is appreciated.

Thank you.
Regards,
-D-

Hi,


I am having problems with the layout in IE and Mozilla

Whats happening is i have a 3 colummn layout

but i dont see the footer in both browsers

Second problem is the right hand div i want it to extend till the bottom of the footer white is the background color for the right hand nav
Normally the right hand will have more text content then the left hand div will have

Third problem is in IE there is a huge gap between the top horizontal nav after contact me button and the gap is smaller in Mozilla

Fourth problem is the left hand nav width problem in mozilla
in IE it aligns right at the end of the Selling tab. In mozilla its little bit less them the selling tab

Can someone tell me what i am doing wrong

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>Realtor.</title>
<link href='style1.css' type='text/css' rel='stylesheet' />
<style type="text/css">

#dlmenu {height:10em;}

#menu {list-style-type:none; margin:0 0 10px; padding:0; position:absolute; width:183px; background:#B0C4DE; z-index:100;}

#menu li {display:block; padding:0; margin:0; position:relative; z-index:100;}

#menu li a, #menu li a:visited {display:block; text-decoration:none;}

#menu li dd {display:none;}

#menu li:hover, #menu li a:hover {border:0;}

#menu li:hover dt a , #menu li a:hover dt a {background:#1874CD center center; color:black; }

#menu li:hover dd, #menu li a:hover dd {display:block;}

#menu li:hover dl, #menu li a:hover dl {background:#1874CD;}

#menu table {border-collapse:collapse; padding:0; margin:-4px;}

#menu dl {width: 183px; margin: 0; background: #B0C4DE; cursor:pointer;}

#menu dt {margin:0; padding: 0;  border-top:1px solid #cce;}

#menu dd {margin:0; padding:0; text-align:left; }

.gallery dt a, .gallery dt a:visited {display:block; color:#fff; padding:5px 5px 5px 10px; background: #007FFF center center;}

.gallery dd a, .gallery dd a:visited {color:#000; min-height:1em; text-decoration:none; display:block; padding:4px 5px 4px 20px; background: #1874CD;}

* html .gallery dd a, * html .gallery dd a:visited {height:1em;}

.gallery dd a:hover {background:black; color:#1874CD;}

</style>

		

</head>
<body style="background:#B0C4DE;">
<div class="page_wrapper">

  <div class="page_header"></div>
  
  <div class="menu_bar">
    <div id="tabsJ">
  <ul>
		<li><a href="default.aspx" title="Home"><span>Home</span></a></li>
		<li><a href="buying.aspx" title="Buying"><span>Buying</span></a></li>
			<li><a href="selling.aspx" title="Selling"><span>Selling</span></a></li>
			<li><a href="relocation.aspx" title="Relocation"><span>Relocation</span></a></li>
		<li><a href="searchmls.aspx" title="Search MLS"><span>Search MLS</span></a></li>
		<li><a href="localinfo.aspx" title="Local Info"><span>Local Info</span></a></li>
				<li><a href="vma.aspx" title="Virtual Market Analysis"><span>Virtual Market Analysis</span></a></li>
								<li><a href="calculator.aspx" title="Calculator"><span>Calculator</span></a></li>
				<li><a href="contact.aspx" title="Contact Me"><span>Contact Me</span></a></li>
	  </ul>
	</div>
  </div>
<div style="clear:both;"></div>
<div class="lefthandmenu">

<div id="dlmenu">

<ul id="menu">


<li>
<dl class="gallery">
           <dt><a href="mortgagecal.asp" title="Mortgage Calculator">Mortgage Calculator</a></dt>
</dl>
</li>

<li>
<dl class="gallery">
            <dt><a href="loanamorcal.asp" title="Loan Amortization Calculator">Loan Amortization Calculator</a></dt>
</dl>
</li>

<li>
<dl class="gallery">
            <dt><a href="loancal.asp" title="Loan Calculator">Loan Calculator</a></dt>
</dl>
</li>


<li>
<dl class="gallery">
            <dt><a href="loancal.asp" title="Loan Calculator">Rent vs Buy Calculator</a></dt>
</dl>
</li>

<li>
<dl class="gallery">
<dt>
<a href="mailto:ssss@sssssssss.com">
<b><font color="black">Ssssss Ddddddd<br/>
<i>Broker Associate</i><br/>
<font size="2em">RRRRRR 11 Rrrr ReeeeeRealty<br/>
3212 North 12th St.<br/>
New England, DE 111111<br/>
213-234-1234<br/>
ssss@sssssssss.com</font></b></font></a>
</dt>
</dl>
</li>


</ul>

</div>


</div>

<div class="righthandmenu">
<h4>Calculators</h4>
<p>A mortgage calculator for every need
Whether you're buying a home or refinancing an existing loan, we have a mortgage calculator that can help you make the right decisions. Determine exactly which deal offers the lowest monthly payments, how much home you can afford, and whether it makes sense to rent or buy.</p>


</div>

<div style="clear:both;"></div>

<div class="footer">
heelo</div>

	


</div>

</body>
</html>

Code:

body {
  text-align: center;
  background-color: #D5D0B0;
  margin-bottom:10px;
  color:black;
   margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
  
}

.page_wrapper {
 margin-left: auto; 
  margin-right: auto;
    width:799px;
  text-align: left;
  background: #FFFFFF url('../img/content_bg.gif') top left repeat-y;
}

.page_header {
  height: 198px;
  background: #FFFFFF url('../images/banner.jpg') bottom left no-repeat;
  clear: both;
}

.menu_bar {
  margin:0px;
  padding:0px;
  clear:both;
  }


   #tabsJ {
      float:left;
      width:100%;
      background:#F4F4F4;
      font-size:93%;
      line-height:normal;

      }
    #tabsJ ul {
	  margin:0;
	  padding:5px 0px 0px 0px;
  
	  list-style:none;
      }
    #tabsJ li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsJ a {
      float:left;
      background:url("tableftJ.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 5px;
      text-decoration:none;
      }
    #tabsJ a span {
      float:left;
      display:block;
      background:url("tabrightJ.gif") no-repeat right top;
     padding:5px 9.4px 5px 9.41px;
      color:#24618E;
      }
    #tabsJ a span {float:none;}

    #tabsJ a:hover span {
      color:#FFF;
      }
    #tabsJ a:hover {
      background-position:0% -42px;
      }
    #tabsJ a:hover span {
      background-position:100% -42px;
      }

.lefthanddiv
{
  width:799px;
  margin:15px 10px 15px 10px;
}

h2 {
            color:#000000;
            font-family: Arial, Helvetica, Geneva, sans-serif;
            font-size: 125%;
            font-weight: bold;
            margin: 10px 0 0 0;
            padding:15px 0px 0px 0px;
			color:red;

}
ul {
   list-style-type: square;
}


h5 {
            color:#000000;
            font-family: Arial, Helvetica, Geneva, sans-serif;
            font-size: 100%;
            font-weight: bold;
            margin: 5px 0 0 0;
            padding:5px 0px 0px 0px;
			color:red;

}
.paraclass
{
padding: 1px 25px 3px 0px;
}
.container
{
width:879px;
background:#1C86EE;
}

.lefthandmenu
{
float:left;
width:200px;
padding:1px 0px 0px 0px;
}

.righthandmenu
{
float:left;
width:579px;
padding:1px 10px 10px 10px;

}

#menu1 {
	width: 187px;
	}

		
#menu1 li a {
	height: 32px;
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	height: 24px;
	text-decoration: none;
	}	
	
#menu1 li a:link, #menu1 li a:visited {
	color: #E4D6CD;
	display: block;
	background:  url(menu1.gif);
	padding: 6px 0 0 8px;
	}
	
#menu1 li a:hover {
	color: #FFF;
	background:  url(menu1.gif) 0 -32px;
	padding: 6px 0 0 8px;
	}	

.newul {
	list-style: none;
	margin: 0;
	padding: 0;
}

h4 {
            color:#000000;
            font-family: Arial, Helvetica, Geneva, sans-serif;
            font-size: 125%;
            font-weight: bold;
            margin: 3px 0 0 0;
            padding:3px 0px 0px 0px;
			color:red;

}
.sig
{
padding:5px 5px 5px 5px;
font-size:75%;
}

#footer {

width: 879px;
margin: 0 auto;
background: #ffc; 
border: 1px solid #000;

}

thank you so much for all your help

I am attaching the pictures as they look in both browsers