fl00d
01-30-2008, 02:59 AM
Well,
I haven't much to say except that in Firefox, everything is lining up nice and tight, but in IE, it's all over the place! This is the first time where I've had a completely different result in different browsers and I couldn't find the problem. The problematic part is the image saying "BUYING OR SELLING A HOUSE". In FX, it shows up perfectly under the menu. In IE, there is a terribly long stretch. I read that sometimes IE has float issues, but on previous sites I have used float and everything turned out fine.
I'm stumped :(
I'm hoping perhaps someone here will be able to point me in the right direction as to what could be wrong.
Below are 2 screenshots, one taken from FX, the other IE.
Proper Alignment - FX
http://img441.imageshack.us/img441/216/screencapture1tq8.png
Problematic Alignment - IE
http://img86.imageshack.us/img86/5669/screencaptureev2.png
Here is the CSS/HTML (All in one file)
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Maureen McCall - REMAX Certified Montreal Real Estate Agent</title>
<style type="text/css">
body {
width:100%;
min-height:100%;
background:#4A567E;
}
img {
border:none;
}
.container {
width:800px;
min-height:500px;
margin:0 auto;
clear:both;
background:url('images/body_bg.gif');
background-repeat:repeat;
}
#header {
width:800px;
height:141px;
margin:0 auto;
font-size:20px;
}
/* titles in header */
.h1Title1 {
margin-left:20px;
display:inline;
color:red;
}
.h1Title2 {
margin-left:20px;
font-size:17px;
display:inline;
color:red;
}
/* body container for nav menu, content etc */
#bodyContainer {
width:100%;
min-height:500px;
background:url('images/body_bg.gif');
background-repeat:repeat;
margin:0 auto;
}
/* image title before nav menu */
#navMenuTitle {
width:150px;
height:20px;
background:url('images/navmenu_title.png');
text-align:center;
margin-left:5px;
margin-top:10px;
line-height:200%;
font-size:12px;
}
/* navigation menu control */
#navMenu {
width:138px;
height:auto;
border:1px solid #365B7E;
border-top:none;
margin-left:5px;
text-align:center;
padding:5px;
float:left;
}
#navMenuLinks {
width:138px;
height:auto;
margin:0 auto;
font-size:14px;
}
#navMenuLinks a:link {
color:#FF0000;
text-decoration:none;
}
#navMenuLinks a:visited {
color:#FF0000;
text-decoration:none;
}
#navMenuLinks a:hover {
padding:2px;
color:#4674B8;
font-weight:bold;
text-decoration:none;
}
#navMenuLinks ul, li {
list-style:none;
}
/* content division structure */
.contentContainer {
width:73%;
height:auto;
float:left;
margin:0 auto;
margin-left:20px;
}
.contentBlock {
width:100%;
height:auto;
background:white;
margin:0 auto;
}
.content {
padding:10px;
font-size:12px;
color:black;
}
.content a:link {
color:#4674B8;
}
.content a:visited {
color:#FF0000;
}
.h1TitleContent {
font-size:17px;
font-weight:bold;
text-decoration:underline;
}
/* division under nav menu for pictures/"ads" */
#bottomAd {
width:140px;
height:auto;
border:1px white;
margin-left:5px;
}
#footer {
width:800px;
height:30px;
background:url('images/footer_bg.png');
background-repeat:repeat;
margin:0 auto;
}
#footerContent {
padding-top:19px;
color:#FFFFFF;
font-size:11px;
text-align:center;
}
</style>
</head>
<body>
<div class="container">
<div id="header"><img src="images/header_bg.gif" alt="Maureen McCall" /></div>
<div id="bodyContainer">
<div id="navMenuTitle">Menu</div>
<div id="navMenu">
<div id="navMenuLinks">
<li><a href="">Home</a></li>
<li><a href="">About Maureen</a></li>
<li><a href="">Services</a></li>
<li><a href="">Listings</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">My Home!</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</div>
</div>
<div class="contentContainer">
<div class="contentBlock">
<div class="content"><h1 class="h1TitleContent">Welcome!</h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum nec diam consectetuer diam sagittis fringilla. In hac habitasse platea dictumst. Donec tortor turpis, rutrum eget, dapibus nec, rhoncus vel, nisi. Nullam sit amet nisl non diam egestas viverra. Integer euismod. Curabitur bibendum odio a pede. Praesent placerat adipiscing metus. In mi nulla, pulvinar eu, posuere nec, dictum sit amet, dolor. Sed pellentesque arcu at pede. Suspendisse congue ipsum et turpis. Vestibulum facilisis urna a elit. Maecenas elit sem, egestas a, venenatis vitae, iaculis in, lorem.
</div>
</div>
<div class="contentBlock" style="margin-top:15px;">
<div class="content"><h1 class="h1TitleContent">Links</h1>
Links like this: <a href="" style="color:#FF0000;">This is a red link!</a><br />Links like this: <a href="" style="color:#4674B8;">This is a light blue link</a>
<p>Which link color do you like better?</p>
</div>
</div>
<div class="contentBlock" style="margin-top:15px;">
<div class="content"><h1 class="h1TitleContent">Find Your Dream Home!</h1>Do you know what your dream home would be like? Tell me about your dream home using our
<a href="">My Home! system</a> and I'll
keep my eye out and notify you if any houses become available that match your description.
<p>-M.McCall</p>
</div>
</div>
</div>
<div id="bottomAd"><a href="http://www.ridemtl.com/auntymo/"><img src="images/buysellad.png" alt="Buying or Selling a House?" width="150" style="margin-top:15px;" /></a></div>
</div>
<div id="footer"><div id="footerContent">Copyright© 2007 Connor MC. All rights reserved.</div></div>
</div>
</body>
</html>
It could be that I'm missing some closing tags, but I validated the page and the errors returned weree just about the <li> in the menu, which I have yet to fix.
Any idea's?
I haven't much to say except that in Firefox, everything is lining up nice and tight, but in IE, it's all over the place! This is the first time where I've had a completely different result in different browsers and I couldn't find the problem. The problematic part is the image saying "BUYING OR SELLING A HOUSE". In FX, it shows up perfectly under the menu. In IE, there is a terribly long stretch. I read that sometimes IE has float issues, but on previous sites I have used float and everything turned out fine.
I'm stumped :(
I'm hoping perhaps someone here will be able to point me in the right direction as to what could be wrong.
Below are 2 screenshots, one taken from FX, the other IE.
Proper Alignment - FX
http://img441.imageshack.us/img441/216/screencapture1tq8.png
Problematic Alignment - IE
http://img86.imageshack.us/img86/5669/screencaptureev2.png
Here is the CSS/HTML (All in one file)
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Maureen McCall - REMAX Certified Montreal Real Estate Agent</title>
<style type="text/css">
body {
width:100%;
min-height:100%;
background:#4A567E;
}
img {
border:none;
}
.container {
width:800px;
min-height:500px;
margin:0 auto;
clear:both;
background:url('images/body_bg.gif');
background-repeat:repeat;
}
#header {
width:800px;
height:141px;
margin:0 auto;
font-size:20px;
}
/* titles in header */
.h1Title1 {
margin-left:20px;
display:inline;
color:red;
}
.h1Title2 {
margin-left:20px;
font-size:17px;
display:inline;
color:red;
}
/* body container for nav menu, content etc */
#bodyContainer {
width:100%;
min-height:500px;
background:url('images/body_bg.gif');
background-repeat:repeat;
margin:0 auto;
}
/* image title before nav menu */
#navMenuTitle {
width:150px;
height:20px;
background:url('images/navmenu_title.png');
text-align:center;
margin-left:5px;
margin-top:10px;
line-height:200%;
font-size:12px;
}
/* navigation menu control */
#navMenu {
width:138px;
height:auto;
border:1px solid #365B7E;
border-top:none;
margin-left:5px;
text-align:center;
padding:5px;
float:left;
}
#navMenuLinks {
width:138px;
height:auto;
margin:0 auto;
font-size:14px;
}
#navMenuLinks a:link {
color:#FF0000;
text-decoration:none;
}
#navMenuLinks a:visited {
color:#FF0000;
text-decoration:none;
}
#navMenuLinks a:hover {
padding:2px;
color:#4674B8;
font-weight:bold;
text-decoration:none;
}
#navMenuLinks ul, li {
list-style:none;
}
/* content division structure */
.contentContainer {
width:73%;
height:auto;
float:left;
margin:0 auto;
margin-left:20px;
}
.contentBlock {
width:100%;
height:auto;
background:white;
margin:0 auto;
}
.content {
padding:10px;
font-size:12px;
color:black;
}
.content a:link {
color:#4674B8;
}
.content a:visited {
color:#FF0000;
}
.h1TitleContent {
font-size:17px;
font-weight:bold;
text-decoration:underline;
}
/* division under nav menu for pictures/"ads" */
#bottomAd {
width:140px;
height:auto;
border:1px white;
margin-left:5px;
}
#footer {
width:800px;
height:30px;
background:url('images/footer_bg.png');
background-repeat:repeat;
margin:0 auto;
}
#footerContent {
padding-top:19px;
color:#FFFFFF;
font-size:11px;
text-align:center;
}
</style>
</head>
<body>
<div class="container">
<div id="header"><img src="images/header_bg.gif" alt="Maureen McCall" /></div>
<div id="bodyContainer">
<div id="navMenuTitle">Menu</div>
<div id="navMenu">
<div id="navMenuLinks">
<li><a href="">Home</a></li>
<li><a href="">About Maureen</a></li>
<li><a href="">Services</a></li>
<li><a href="">Listings</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">My Home!</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</div>
</div>
<div class="contentContainer">
<div class="contentBlock">
<div class="content"><h1 class="h1TitleContent">Welcome!</h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum nec diam consectetuer diam sagittis fringilla. In hac habitasse platea dictumst. Donec tortor turpis, rutrum eget, dapibus nec, rhoncus vel, nisi. Nullam sit amet nisl non diam egestas viverra. Integer euismod. Curabitur bibendum odio a pede. Praesent placerat adipiscing metus. In mi nulla, pulvinar eu, posuere nec, dictum sit amet, dolor. Sed pellentesque arcu at pede. Suspendisse congue ipsum et turpis. Vestibulum facilisis urna a elit. Maecenas elit sem, egestas a, venenatis vitae, iaculis in, lorem.
</div>
</div>
<div class="contentBlock" style="margin-top:15px;">
<div class="content"><h1 class="h1TitleContent">Links</h1>
Links like this: <a href="" style="color:#FF0000;">This is a red link!</a><br />Links like this: <a href="" style="color:#4674B8;">This is a light blue link</a>
<p>Which link color do you like better?</p>
</div>
</div>
<div class="contentBlock" style="margin-top:15px;">
<div class="content"><h1 class="h1TitleContent">Find Your Dream Home!</h1>Do you know what your dream home would be like? Tell me about your dream home using our
<a href="">My Home! system</a> and I'll
keep my eye out and notify you if any houses become available that match your description.
<p>-M.McCall</p>
</div>
</div>
</div>
<div id="bottomAd"><a href="http://www.ridemtl.com/auntymo/"><img src="images/buysellad.png" alt="Buying or Selling a House?" width="150" style="margin-top:15px;" /></a></div>
</div>
<div id="footer"><div id="footerContent">Copyright© 2007 Connor MC. All rights reserved.</div></div>
</div>
</body>
</html>
It could be that I'm missing some closing tags, but I validated the page and the errors returned weree just about the <li> in the menu, which I have yet to fix.
Any idea's?