DeveloperBarn Forums

Go Back   DeveloperBarn Forums > Web Design > HTML & CSS Help
IE and Mozilla display problem IE and Mozilla display problem
Register Blogs FAQ Awards Members List Calendar Search Today's Posts Mark Forums Read

Discuss "IE and Mozilla display problem" in the HTML & CSS Help forum.

HTML & CSS Help - Discuss HTML, DHTML, XHTML and Cascading Style Sheets (CSS) here. Get tips on how to design your web site.


Reply « Previous Thread | Next Thread »
Page 1 of 2 1 2 >
 
LinkBack (2) Thread Tools Display Modes
  2 links from elsewhere to this Post. Click to view. #1 (permalink)  
Old April 17th, 2008, 10:57 PM
Contributing Member

  
Join Date: Mar 2008
Posts: 185
Thanks: 0
Thanked 0 Times in 0 Posts
Rep Power: 1
todd2006 is an unknown quantity at this point
Default IE and Mozilla display problem
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
Attached Images
File Type: jpg mozilla.jpg (48.1 KB, 4 views)
File Type: jpg IEcopy.jpg (45.6 KB, 3 views)
Reply With Quote
Sponsored Links
  #2 (permalink)  
Old April 18th, 2008, 08:08 AM
jmurrayhead's Avatar
Your Lord & Master

  
Join Date: Mar 2008
Location: Reston, VA, USA
Posts: 537
Thanks: 14
Thanked 40 Times in 39 Posts
Blog Entries: 2
Rep Power: 1
jmurrayhead will become famous soon enough

Awards Showcase
Microsoft .Net Microsoft SQL Server Microsoft Windows Classic ASP 
Total Awards: 4

Default
It looks like a two-column layout to me. Anyway, keep in mind that IE and FireFox render certain elements very differently. You'll especially notice it with spacing between elements.

It may help if you attach an image of what you want it to look like. I'm not the best when it comes to design, but I have a pretty solid two-column layout that I've been using for a while now. There's also plenty of examples out there that might help you get some ideas.
__________________
jmurrayhead
Did I help you out? Make me popular by clicking the icon!

If you found a post helpful, please click the button in the lower right-hand corner of the post.

Powered by ASP.Net
Reply With Quote
  #3 (permalink)  
Old April 18th, 2008, 10:02 AM
Contributing Member

  
Join Date: Mar 2008
Posts: 185
Thanks: 0
Thanked 0 Times in 0 Posts
Rep Power: 1
todd2006 is an unknown quantity at this point
Default
I changed my footer code now the footer appears at the bottom of the page

but the left hand side column and right hand side column dont touch the footer

can someone tell me what change i have to make in my lefthandmenu and righthandmenu

todd


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">
FOOTER
</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;

}
Reply With Quote
  #4 (permalink)  
Old April 18th, 2008, 10:07 AM
Contributing Member

  
Join Date: Mar 2008
Posts: 185
Thanks: 0
Thanked 0 Times in 0 Posts
Rep Power: 1
todd2006 is an unknown quantity at this point
Default
Sorry didnt test in both browsers

In IE the footer appears at the bottom and both left hand column and right hand column dont touch the footer so thats the problem in IE

In Mozilla the problem is the footer appears below the right hand column.

todd
Reply With Quote
  #5 (permalink)  
Old April 18th, 2008, 10:10 AM
jmurrayhead's Avatar
Your Lord & Master

  
Join Date: Mar 2008
Location: Reston, VA, USA
Posts: 537
Thanks: 14
Thanked 40 Times in 39 Posts
Blog Entries: 2
Rep Power: 1
jmurrayhead will become famous soon enough

Awards Showcase
Microsoft .Net Microsoft SQL Server Microsoft Windows Classic ASP 
Total Awards: 4

Default
Try setting a min-height for those divs and set it large enough to touch the footer.
Reply With Quote
  #6 (permalink)  
Old April 18th, 2008, 10:44 AM
Contributing Member

  
Join Date: Mar 2008
Posts: 185
Thanks: 0
Thanked 0 Times in 0 Posts
Rep Power: 1
todd2006 is an unknown quantity at this point
Default
Hi,

thanks for your reply.

See this is a problem if i set the height.

If the content in right hand column is more then the left hand column then it will cause a problem

same hold good if the content in left hand column is larger then right hand column

todd
Reply With Quote
  #7 (permalink)  
Old April 18th, 2008, 10:49 AM
Contributing Member

  
Join Date: Mar 2008
Posts: 185
Thanks: 0
Thanked 0 Times in 0 Posts
Rep Power: 1
todd2006 is an unknown quantity at this point
Default
here is the link

Realtor.
Reply With Quote
  #8 (permalink)  
Old April 18th, 2008, 11:39 AM
jmurrayhead's Avatar
Your Lord & Master

  
Join Date: Mar 2008
Location: Reston, VA, USA
Posts: 537
Thanks: 14
Thanked 40 Times in 39 Posts
Blog Entries: 2
Rep Power: 1
jmurrayhead will become famous soon enough

Awards Showcase
Microsoft .Net Microsoft SQL Server Microsoft Windows Classic ASP 
Total Awards: 4

Default
By setting a min-height, using the min-height attribute, you can adjust them to be the same size and they will only extend if the content inside them is larger than the min-height value.

There really is no easy solution for this difference in height. There are a few things you can do though. For example, you can find a JavaScript that will resize the divs for you to make them same height. I really don't like this solution. There is also a technique called faux columns. Also, by setting the background of the container for the div to the same color as the background of that div, you can give the illusion that the columns are the same size.
Reply With Quote
  #9 (permalink)  
Old April 18th, 2008, 12:42 PM
Contributing Member

  
Join Date: Mar 2008
Posts: 185
Thanks: 0
Thanked 0 Times in 0 Posts
Rep Power: 1
todd2006 is an unknown quantity at this point
Default
hi,

i got the footer problem fixed

now my last problem is the horizontal nav

if you look at the horizontal nav at the top of the page after the last tab contact me there is less space in Mozilla and more in IE

I want them to be flushed as the top banner is

here is my code

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">

#menu {list-style-type:none; margin:0 0 0px; padding:0; width:185px; 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: 185px; 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="container">
<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>

  <div id="clearfooter"></div>
<div id="footer">
FOOTER</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;
	font-size: 78.2%;
	font-family: verdana, Arial, Helvetica, sans-serif;
}

.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;
 width:100%;
}

 #tabsJ 
 {
      float:left;
      width:100%;
      background:#F4F4F4;
       line-height:normal;
  }
 #tabsJ ul {
	    margin:0px;
	  padding:5px 0px 0px 0px;
  	  list-style:none;
      }
    #tabsJ li {
      display:inline;
       margin:0px;
      padding:0px;
      }
    #tabsJ a {
      float:left;
      background:url("tableftJ.gif") no-repeat left top;
      margin:0px;
      padding:0 0 0 5px;
      text-decoration:none;
      }
    #tabsJ a span {
      float:left;
	  margin:0px;
      display:block;
      background:url("tabrightJ.gif") no-repeat right top;
      padding:5px 8.9px 5px 8.9px;
      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:799px;

}

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

.righthandmenu
{
width:579px;
padding:1px 10px 10px 10px;
height:auto;
}

#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;
}

#footer	{
position:relative;
		bottom:0;
		width:799px;
		height: 24px;
		background-color: #f5f5f5;
		border-top: 1px solid #e9e9e9;
}

#clearfooter 
{
clear:both;
}
here is the link

Realtor.

any help is highly appreciated
Reply With Quote
  #10 (permalink)  
Old April 18th, 2008, 01:00 PM
jmurrayhead's Avatar
Your Lord & Master

  
Join Date: Mar 2008
Location: Reston, VA, USA
Posts: 537
Thanks: 14
Thanked 40 Times in 39 Posts
Blog Entries: 2
Rep Power: 1
jmurrayhead will become famous soon enough

Awards Showcase
Microsoft .Net Microsoft SQL Server Microsoft Windows Classic ASP 
Total Awards: 4

Default
Attached is how your page looks in IE6. You might want to fix that as there are a large number of users who still use IE6.

As for the navbar, you could make the width of the block smaller, or make the width of the buttons wider. I don't think there is much you can do to fill space if you don't have anything to fill it with. Unless I don't understand what you're trying to do.
Attached Images
File Type: bmp todd.bmp (759.4 KB, 3 views)
Reply With Quote
Reply
Page 1 of 2 1 2 >

  DeveloperBarn Forums > Web Design > HTML & CSS Help

Bookmarks

« Previous Thread | Next Thread »
Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On
Forum Jump

LinkBacks (?)
LinkBack to this Thread: http://www.developerbarn.com/html-css-help/134-ie-mozilla-display-problem.html
Posted By For Type Date
DeveloperBarn Forums - ASP Help, ASP.Net Help, PHP Help, SQL Help, Tutorials, Windows Help This thread Refback April 26th, 2008 09:37 AM
IE and Mozilla display problem - HTML & CSS Help This thread Refback April 18th, 2008 08:16 PM


Sponsored Links
ASP.NET Resource Index
a directory of ASP.NET tutorials, applications, scripts, assemblies and articles for the novice to professional developer.

Free Web Directory
Including Chats and Forums Resources, Offer automatic, instant and free directory submissions. 		URLZ Web Directory
URLZ Web Directory

Free Web Directory - Add Your Link
The Little Web Directory 		Free Web Directory
Pegasus free web directory is a free directory organised by categories.

Web Directory & SEO Services
dirroot web directory

All times are GMT -4. The time now is 09:31 PM.

Contact Us - DeveloperBarn.com - Archive - Top

Powered by vBulletin® Version 3.7.2
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Content Relevant URLs by vBSEO 3.2.0
Copyright © 2008 DeveloperBarn.com

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46