belledumonde
06-04-2006, 03:17 AM
here's the link: http://taglehomes.awardspace.com
open it in Firefox, Opera or Netscape and it looks fine. open in IE and you'll see the problem. the box on the right with the title "Terms" should be aligned at the top with the box on the left entitled "The Area", and the box called "Updates!" appears neatly below "Terms". in IE, "Terms" is not horizontally aligned with "The Area".
this is probably a simple problem, but im new to this and cant figure out what to do. i'd really appreciate the help!
here's the CSS and HTML code...
CSS
body, html {
background-color: #F6CF7C;
margin: 0;
padding: 0;
}
#wrap {
background-color: #FBE7BD;
margin: 0 auto;
width: 738px;
}
/*Banner*/
#banner img{display:block}
#banner {
background-color: #F6CF7C;
margin: 0;
padding: 0;
clear: both;
}
/*Upper navigation bar*/
#navup {
background-color: #AB770C;
margin: 0;
padding: 0;
clear: both;
}
#navup ul {
margin: 0;
padding: 0;
padding: 2px;
list-style: none;
text-align: right;
}
#navup li, #navup a, #navup a.first{
background-color: #AB770C;
color: #FBE7BD;
padding: 0;
padding-left: 5px;
padding-left: 5px;
display: inline;
}
#navup a {
font-size: 8pt;
border-left: solid 1px #FBE7BD;
}
#navup a.first{
border-left: none;
}
/*Menu on left*/
#menu, #menu li {
float:left;
width:142px;
padding:0;
margin:0
}
#menu ul{
list-style:none;
}
#menu, #menu ul{
margin:0;
padding: 0;
width:142px;
}
#menu li a {
font-size: 10pt;
color:#AB770C;
background-color:#FBE7BD;
display:block;
width:127px;
padding:6px 0 6px 15px;
font-weight:bold;
}
#menu li a:hover {
color:#FBE7BD;
background-color:#CC9966;
text-decoration:none;
}
/*Links in General*/
a {
font-family: Verdana, Arial, sans-serif;
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/*List of Links*/
.sitemap {
list-style:none;
}
li.indent {
padding-left: 30px;
}
/*Content Layout*/
/*mac hide \*/
* html div#content {height:1%}
/* end hide */
#content {
margin: 0 0 0 142px;
background-color: white;
padding: 15px 40px 15px 40px;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* mac hide \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide */
/* mac hide\*/
* html #content {height:1%;margin-left:139px}
* html #menu {margin-right:-3px;}
/* end hide */
/*#content's content*/
.rightlinks {
margin:0;
padding:0;
text-align: right;
}
#content a {
font-size: 10pt;
background-color: white;
color: #AB770C;
}
.text, .imgcap, h1, .bullet, .bullet li, .caption{
background-color: white;
font-family: Verdana, Arial, sans-serif;
color: #4B4B4B;
}
.text, .bullet ul, .bullet li {
text-align: justify;
font-size: 10pt;
line-height: 150%;
}
.imgcap {
text-align: center;
font-size: 10pt;
font-style: italic;
line-height: 150%;
}
h1 {
margin:0;
padding:0;
text-align: left;
font-size: 12pt;
text-decoration: underline;
line-height: 150%;
}
.vert, .hori, #tb, #ff {
background-color:#FDF2DB;
}
.vert {
width:263px;
height:350px;
}
.hori {
width:350px;
height:263px;
}
#tb{
width:450px;
height:214px;
}
#ff {
width:450px;
height:125px;
}
/*Lower navigation bar*/
#navlow {
clear:both;
float:left;
width: 738px;
}
#navlow, #navlow ul, #navlow li, #navlow a {
background-color: #AB770C;
margin: 0;
padding: 0;
}
#navlow ul {
padding: 2px;
text-align: center;
}
#navlow li {
display: inline;
}
#navlow a{
font-size: 8pt;
color: #FBE7BD;
padding: 0;
padding-left: 5px;
padding-left: 5px;
border-left: solid 1px #FBE7BD;
}
#navlow a.first{
border-left: none;
}
/*Footer*/
#footer {
margin: 0;
padding: 0;
clear:both;
background: #F6CF7C;
}
.smallprint, .smallprint a{
margin: 0;
padding: 0;
background-color: #F6CF7C;
font-family: Verdana, Arial, sans-serif;
color: #AB770C;
text-align: center;
font-size: 8pt;
}
/*Boxes*/
.boxL, .boxR {
margin: 10px 0 10px 0;
background-color:white;
border:none;
text-align:center;
width:250px;
}
.boxL {
float: left;
clear:left;
}
.boxR {
float: right;
clear:right;
}
#content a.title{
display:block;
margin:0;
padding:0;
background-color: #AB770C;
color:#FBE7BD;
}
#content a.title:hover {
background-color: #FBE7BD;
color: #AB770C;
text-decoration:none;
}
/* mac hide \*/
* html
div#content a {height:1%;margin:0;padding:0;display: block;}
/* End hide */
.caption {
margin:0;
padding: 3px 0 0 0;
background-color: white;
text-align: center;
font-size: 10pt;
line-height: 120%;
}
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en">
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="keywords" content="home house pampanga sale townhouse philippines san fernando">
<meta name="description" content="Realize your dreams of a quiet country home in the Philippines only minutes away from all the benefits of a highly urbanized lifestyle">
<meta name="robots" content="index,follow">
<title>Townhouses for sale in Pampanga, Philippines! - Tagle Homes</title>
</head>
<body >
<div id="wrap">
<div id="banner">
<img id="sunkissed" src="sunkissed.gif" alt="Tagle Homes in Pampanga, Philippines">
</div>
<div id="navup">
<ul>
<li><a class="first" href="index.htm">Home</a></li>
<li><a href="Site_map.htm">Site Map</a></li>
<li><a href="Contact_us.htm">Contact Us</a></li>
</ul>
</div>
<div id="menu">
<ul>
<li><a href="The Townhouses.htm">The Townhouses</a></li>
<li><a href="GalleryMain.htm">Gallery</a></li>
<li><a href="The_Area.htm">The Area</a></li>
<li><a href="Terms.htm">Terms</a></li>
</ul>
</div>
<div id="content" class="clearfix">
<p class="imgcap">
<img src="welcome.GIF" alt="Welcome!"><br>
</p>
<p class="text">
The desire for a better home and a better life for your family becomes
a reality with Tagle Homes' Townhouses Pampanga! Meticulously planned
and built, these townhouse units are designed to realize your dreams of
a quiet country home, yet only minutes away from all the benefits of a
highly urbanized lifestyle.
</p>
<p class="text">
Tucked away in the friendly streets of Pilar Village, the townhouses are
in a clean and secure environment while also situated at the heart of
Pampanga in the City of San Fernando.</p>
<p class="text">
This prime location grants quick and easy access to:</p>
<ul class="bullet">
<li>Quality educational institutions</li>
<li>Shopping centers</li>
<li>Hospitals</li>
<li>Churches (Including Catholic, Baptist, and Iglesia ni Cristo)</li>
<li>Business establishments</li>
<li>Government offices</li>
<li>Recreational facilities and much more!</li>
</ul>
<p class="text">
Every effort has been made to provide all the information you need when
purchasing a house! So explore each section to find out more!
</p>
<div class="boxL">
<a class="title" href="The Townhouses.htm">The Townhouses</a>
<p class="caption">Details on the structure of the houses can be found here
including measurements and a floorplan.</p>
<p class="imgcap"><a href="The Townhouses.htm"><img border="0" src="townhousesPreview.gif" alt="Glimpse of the Floorplans"></a></p>
</div>
<div class="boxR">
<a class="title" href="GalleryMain.htm">Gallery</a>
<p class="caption">View photos of both the interior and exterior of the townhouses in this online photo gallery!</p>
<p class="imgcap"><a href="GalleryMain.htm"><img border="0" src="galleryPreview.gif" alt="Sneak peek of the Gallery"></a></p>
</div>
<div class="boxL">
<a class="title" href="The_Area.htm">The Area</a></div>
<p class="caption">Learn more about the strategic location of the townhouses in Pampanga; its
proximity to hospitals, schools, malls etc.</p>
<p class="imgcap"><a href="The_Area.htm"><img border="0" src="theareaPreview.gif" alt="Preview of the Photos of Pilar Village"></a></p>
</div>
<div class="boxR">
<a class="title" href="Terms.htm">Terms</a>
<p class="caption">Click here to find out the terms of payment; both in cash and installment.</p>
</div>
<div class="boxR">
<a class="title" href="update.htm">Updates!</a>
<p class="caption">Keep up to date by reading the modifications made to the information on the site.</p>
</div>
</div>
<div id="navlow">
<ul>
<li><a class="first" href="index.htm">Home</a></li>
<li><a href="Site_map.htm">Site Map</a></li>
<li><a href="Contact_us.htm">Contact Us</a></li>
</ul>
</div>
<div id="footer">
<p class="smallprint">
The Tagle Homes website was built to provide information
on the townhouses<br> we have for sale in the City of San
Fernando, Pampanga, Philippines. <a href="disclaimer.htm">Disclaimer</a>
<br><a href="http://validator.w3.org/check?uri=referer">
<img src="valid-html401.gif" width="60px" height="21.1px" border="0" alt="Valid HTML 4.01 Page"></a>
<a href="http://www.statcounter.com/" target="_blank">
<img src="statcounter.gif" width="60px" height="21.1px" alt="Free Web Hit Counter" border="0"></a>
</p>
<!-- Start of StatCounter Code -->
<script type="text/javascript" language="javascript">
var sc_project=1611906;
var sc_invisible=1;
var sc_partition=15;
var sc_security="e296a824";
</script>
<script type="text/javascript" language="javascript" src="http://www.statcounter.com/counter/counter.js"></script>
<!-- End of StatCounter Code -->
</div>
</div>
</body>
</html>
open it in Firefox, Opera or Netscape and it looks fine. open in IE and you'll see the problem. the box on the right with the title "Terms" should be aligned at the top with the box on the left entitled "The Area", and the box called "Updates!" appears neatly below "Terms". in IE, "Terms" is not horizontally aligned with "The Area".
this is probably a simple problem, but im new to this and cant figure out what to do. i'd really appreciate the help!
here's the CSS and HTML code...
CSS
body, html {
background-color: #F6CF7C;
margin: 0;
padding: 0;
}
#wrap {
background-color: #FBE7BD;
margin: 0 auto;
width: 738px;
}
/*Banner*/
#banner img{display:block}
#banner {
background-color: #F6CF7C;
margin: 0;
padding: 0;
clear: both;
}
/*Upper navigation bar*/
#navup {
background-color: #AB770C;
margin: 0;
padding: 0;
clear: both;
}
#navup ul {
margin: 0;
padding: 0;
padding: 2px;
list-style: none;
text-align: right;
}
#navup li, #navup a, #navup a.first{
background-color: #AB770C;
color: #FBE7BD;
padding: 0;
padding-left: 5px;
padding-left: 5px;
display: inline;
}
#navup a {
font-size: 8pt;
border-left: solid 1px #FBE7BD;
}
#navup a.first{
border-left: none;
}
/*Menu on left*/
#menu, #menu li {
float:left;
width:142px;
padding:0;
margin:0
}
#menu ul{
list-style:none;
}
#menu, #menu ul{
margin:0;
padding: 0;
width:142px;
}
#menu li a {
font-size: 10pt;
color:#AB770C;
background-color:#FBE7BD;
display:block;
width:127px;
padding:6px 0 6px 15px;
font-weight:bold;
}
#menu li a:hover {
color:#FBE7BD;
background-color:#CC9966;
text-decoration:none;
}
/*Links in General*/
a {
font-family: Verdana, Arial, sans-serif;
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/*List of Links*/
.sitemap {
list-style:none;
}
li.indent {
padding-left: 30px;
}
/*Content Layout*/
/*mac hide \*/
* html div#content {height:1%}
/* end hide */
#content {
margin: 0 0 0 142px;
background-color: white;
padding: 15px 40px 15px 40px;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* mac hide \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide */
/* mac hide\*/
* html #content {height:1%;margin-left:139px}
* html #menu {margin-right:-3px;}
/* end hide */
/*#content's content*/
.rightlinks {
margin:0;
padding:0;
text-align: right;
}
#content a {
font-size: 10pt;
background-color: white;
color: #AB770C;
}
.text, .imgcap, h1, .bullet, .bullet li, .caption{
background-color: white;
font-family: Verdana, Arial, sans-serif;
color: #4B4B4B;
}
.text, .bullet ul, .bullet li {
text-align: justify;
font-size: 10pt;
line-height: 150%;
}
.imgcap {
text-align: center;
font-size: 10pt;
font-style: italic;
line-height: 150%;
}
h1 {
margin:0;
padding:0;
text-align: left;
font-size: 12pt;
text-decoration: underline;
line-height: 150%;
}
.vert, .hori, #tb, #ff {
background-color:#FDF2DB;
}
.vert {
width:263px;
height:350px;
}
.hori {
width:350px;
height:263px;
}
#tb{
width:450px;
height:214px;
}
#ff {
width:450px;
height:125px;
}
/*Lower navigation bar*/
#navlow {
clear:both;
float:left;
width: 738px;
}
#navlow, #navlow ul, #navlow li, #navlow a {
background-color: #AB770C;
margin: 0;
padding: 0;
}
#navlow ul {
padding: 2px;
text-align: center;
}
#navlow li {
display: inline;
}
#navlow a{
font-size: 8pt;
color: #FBE7BD;
padding: 0;
padding-left: 5px;
padding-left: 5px;
border-left: solid 1px #FBE7BD;
}
#navlow a.first{
border-left: none;
}
/*Footer*/
#footer {
margin: 0;
padding: 0;
clear:both;
background: #F6CF7C;
}
.smallprint, .smallprint a{
margin: 0;
padding: 0;
background-color: #F6CF7C;
font-family: Verdana, Arial, sans-serif;
color: #AB770C;
text-align: center;
font-size: 8pt;
}
/*Boxes*/
.boxL, .boxR {
margin: 10px 0 10px 0;
background-color:white;
border:none;
text-align:center;
width:250px;
}
.boxL {
float: left;
clear:left;
}
.boxR {
float: right;
clear:right;
}
#content a.title{
display:block;
margin:0;
padding:0;
background-color: #AB770C;
color:#FBE7BD;
}
#content a.title:hover {
background-color: #FBE7BD;
color: #AB770C;
text-decoration:none;
}
/* mac hide \*/
* html
div#content a {height:1%;margin:0;padding:0;display: block;}
/* End hide */
.caption {
margin:0;
padding: 3px 0 0 0;
background-color: white;
text-align: center;
font-size: 10pt;
line-height: 120%;
}
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en">
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="keywords" content="home house pampanga sale townhouse philippines san fernando">
<meta name="description" content="Realize your dreams of a quiet country home in the Philippines only minutes away from all the benefits of a highly urbanized lifestyle">
<meta name="robots" content="index,follow">
<title>Townhouses for sale in Pampanga, Philippines! - Tagle Homes</title>
</head>
<body >
<div id="wrap">
<div id="banner">
<img id="sunkissed" src="sunkissed.gif" alt="Tagle Homes in Pampanga, Philippines">
</div>
<div id="navup">
<ul>
<li><a class="first" href="index.htm">Home</a></li>
<li><a href="Site_map.htm">Site Map</a></li>
<li><a href="Contact_us.htm">Contact Us</a></li>
</ul>
</div>
<div id="menu">
<ul>
<li><a href="The Townhouses.htm">The Townhouses</a></li>
<li><a href="GalleryMain.htm">Gallery</a></li>
<li><a href="The_Area.htm">The Area</a></li>
<li><a href="Terms.htm">Terms</a></li>
</ul>
</div>
<div id="content" class="clearfix">
<p class="imgcap">
<img src="welcome.GIF" alt="Welcome!"><br>
</p>
<p class="text">
The desire for a better home and a better life for your family becomes
a reality with Tagle Homes' Townhouses Pampanga! Meticulously planned
and built, these townhouse units are designed to realize your dreams of
a quiet country home, yet only minutes away from all the benefits of a
highly urbanized lifestyle.
</p>
<p class="text">
Tucked away in the friendly streets of Pilar Village, the townhouses are
in a clean and secure environment while also situated at the heart of
Pampanga in the City of San Fernando.</p>
<p class="text">
This prime location grants quick and easy access to:</p>
<ul class="bullet">
<li>Quality educational institutions</li>
<li>Shopping centers</li>
<li>Hospitals</li>
<li>Churches (Including Catholic, Baptist, and Iglesia ni Cristo)</li>
<li>Business establishments</li>
<li>Government offices</li>
<li>Recreational facilities and much more!</li>
</ul>
<p class="text">
Every effort has been made to provide all the information you need when
purchasing a house! So explore each section to find out more!
</p>
<div class="boxL">
<a class="title" href="The Townhouses.htm">The Townhouses</a>
<p class="caption">Details on the structure of the houses can be found here
including measurements and a floorplan.</p>
<p class="imgcap"><a href="The Townhouses.htm"><img border="0" src="townhousesPreview.gif" alt="Glimpse of the Floorplans"></a></p>
</div>
<div class="boxR">
<a class="title" href="GalleryMain.htm">Gallery</a>
<p class="caption">View photos of both the interior and exterior of the townhouses in this online photo gallery!</p>
<p class="imgcap"><a href="GalleryMain.htm"><img border="0" src="galleryPreview.gif" alt="Sneak peek of the Gallery"></a></p>
</div>
<div class="boxL">
<a class="title" href="The_Area.htm">The Area</a></div>
<p class="caption">Learn more about the strategic location of the townhouses in Pampanga; its
proximity to hospitals, schools, malls etc.</p>
<p class="imgcap"><a href="The_Area.htm"><img border="0" src="theareaPreview.gif" alt="Preview of the Photos of Pilar Village"></a></p>
</div>
<div class="boxR">
<a class="title" href="Terms.htm">Terms</a>
<p class="caption">Click here to find out the terms of payment; both in cash and installment.</p>
</div>
<div class="boxR">
<a class="title" href="update.htm">Updates!</a>
<p class="caption">Keep up to date by reading the modifications made to the information on the site.</p>
</div>
</div>
<div id="navlow">
<ul>
<li><a class="first" href="index.htm">Home</a></li>
<li><a href="Site_map.htm">Site Map</a></li>
<li><a href="Contact_us.htm">Contact Us</a></li>
</ul>
</div>
<div id="footer">
<p class="smallprint">
The Tagle Homes website was built to provide information
on the townhouses<br> we have for sale in the City of San
Fernando, Pampanga, Philippines. <a href="disclaimer.htm">Disclaimer</a>
<br><a href="http://validator.w3.org/check?uri=referer">
<img src="valid-html401.gif" width="60px" height="21.1px" border="0" alt="Valid HTML 4.01 Page"></a>
<a href="http://www.statcounter.com/" target="_blank">
<img src="statcounter.gif" width="60px" height="21.1px" alt="Free Web Hit Counter" border="0"></a>
</p>
<!-- Start of StatCounter Code -->
<script type="text/javascript" language="javascript">
var sc_project=1611906;
var sc_invisible=1;
var sc_partition=15;
var sc_security="e296a824";
</script>
<script type="text/javascript" language="javascript" src="http://www.statcounter.com/counter/counter.js"></script>
<!-- End of StatCounter Code -->
</div>
</div>
</body>
</html>