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

todd2006 · #1 April 17th, 2008, 10:57 PM

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

jmurrayhead · #2 April 18th, 2008, 08:08 AM

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.

todd2006 · #3 April 18th, 2008, 10:02 AM

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;

}

todd2006 · #4 April 18th, 2008, 10:07 AM

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

jmurrayhead · #5 April 18th, 2008, 10:10 AM

Try setting a min-height for those divs and set it large enough to touch the footer.

todd2006 · #6 April 18th, 2008, 10:44 AM

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

todd2006 · #7 April 18th, 2008, 10:49 AM

here is the link

Realtor.

jmurrayhead · #8 April 18th, 2008, 11:39 AM

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.

todd2006 · #9 April 18th, 2008, 12:42 PM

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

jmurrayhead · #10 April 18th, 2008, 01:00 PM

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.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

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

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.