Why doesn't this float work correctly?

Head out to http://www.hihatwebdesign.com/Trinity/directions.php. I want my google map to float to the right, but instead it's gravitating towards the bottom.

I've got the map itself in a container called, "contact_map."

#contact_map {
position:relative;
width:204px;
height:200px;
margin-top:-75px;
float:right;
}

Here's my entire stylesheet:

body {
	font-family: Helvetica, Microsoft Sans Serif;
	font-size: 14px;
	color: #000000;
	vertical-align: top;
	padding: 0px;
	height: 100%;
	width: 100%;
	margin: 0;
	background-color:#202740;
}

body.staff_display {
	font-family: Helvetica, Microsoft Sans Serif;
	font-size: 14px;
	color: #000000;
	vertical-align: top;
	padding: 0px;
	height: 100%;
	width: 100%;
	margin: 0;
	background-color:#ffffff;
}

#body_tray {
position:relative;
width:997px;
height:815px;
margin:auto;
padding:25px;
}

#header {
position:relative;
margin:auto;
height:236px;
width:997px;
background-image:url(images/header.png);
background-repeat:none;
}

#header_link {
position:absolute;
margin-left:35px;
margin-top:30px;
width:600px;
height:173px;
}

#social_media {
position:absolute;
width:195px;
height:48px;
margin-top:35px;
margin-left:765px;
}

#search_box {
position:absolute;
z-index:2;
margin-left:820px;
margin-top:175px;
}

table.form {
border-spacing:0;
border-collapse:collapse;
background-color:#ffffff;
}

td.form {
vertical-align:bottom;
}

table.nav {
border-collapse:collapse;
border-spacing:0;
}

form.search {
display:inline;
}

#nav_bar {
float:left;
position:relative;
margin:auto;
width:997px;
height:38px;
background-image:url(images/nav_bar.png);
background-repeat:no-repeat;
}

#navcontainer {
width:997px;
height:38px;
margin:auto;
margin-top:-15px;
padding-left:25px;
}

#navcontainer ul {
padding: 0;
list-style-type: none;
line-height:38px;
}

#navcontainer ul ul {
display: none;
margin-top:-4px;
margin-left: 0;
padding: 0;
width: 250px;
position: absolute;
background: #ffffff;
border-style:solid;
border-width: thin;
border-color:#deeec3;
}

#navcontainer ul li:hover > ul 
{
display: block;
}

#navcontainer ul li { 
position:relative;
display: block;
float:left; 
margin-left:2px;
z-index:10;
}

#navcontainer ul li a
{
font-family: Arial Narrow, Microsoft Sans Serif, Helvetica;
font-size: 18px;
color:#493417;
font-weight:bold;
text-decoration: none;
padding-left:45px;
padding-right:40px;
display:block;
}

#navcontainer ul li a:hover
{
color: #4b7235;
}

#navcontainer ul ul li a {
font-family: Arial Narrow, Microsoft Sans Serif, Helvetica;
font-size: 16px;
color:#493417;
padding-left:5px;
}

#navcontainer:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}



#body_block {
position:relative;
float:left;
width:997px;
height:518px;
background-image:url(images/body_block.png);
background-repeat:none;
z-index:1;
}

#satellite_body_block {
position:relative;
float:left;
width:997px;
height:520px;
background-image:url(images/body_block.png);
background-repeat:none;
z-index:1;
}

#body_text {
position:absolute;
width:704px;
height:512px;
margin-left:267px;
margin-top:5px;
}

#satellite_body_text {
position:absolute;
width:704px;
height:520px;
margin-left:267px;
margin-top:5px;
overflow:auto;
}

#satellite_title {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 18px;
color:#493417;
}

#contact_map {
position:relative;
width:204px;
height:200px;
margin-top:-75px;
float:right;
}

#carousel {
position:relative;
width:701px;
height:312px;
margin-left:-38px;
}

#title_news_calendar {
position:relative;
width:691px;
height:32px;
padding-bottom:8px;
}

#news_calendar_container {
position:relative;
width:701px;
height:146px;
}

#calendar_container {
position:relative;
margin-left:5px;
width:337px;
height:161px;
background-image:url(images/calendar_background.png);
background-repeat:no-repeat;
}

#news_container {
position:relative;
margin-top:-161px;
margin-left:355px;
width:337px;
height:161px;
background-image:url(images/news_background.png);
background-repeat:no-repeat;
}

td.headline {
font-family: Arial, Microsoft Sans Serif, Helvetica;
font-size: 12px;
color:#585656;
}

td.staff_photo {
width:100px;
}

td.staff_category {
background-color: #718959;
color:#ffffff;
}


#left_column {
position:absolute;
width:230px;
height:503px;
margin-left:25px;
margin-top:5px;
}

#cursor {
position:absolute;
float:left;
width:13px;
height:25px;
background-image:url(images/cursor.png);
background-repeat:none;
margin-top:150px;
margin-left:125px;
z-index:2;
}

#left_nav {
display:inline-block;
position:absolute;
width:230px;
height:329px;
margin-left:25px;
margin-top:180px;
background-image:url(images/left_column_background.png);
background-repeat:none;
}


#footer {
position:relative;
height:26px;
width:997px;
margin:auto;
}

input.login_box{
   border:0px;
  width:109px;
  height:21px;
  font-size: 10px;
  color: #cccccc;
  display: inline;
}

#footer_text {
position:relative;
margin:auto;
color:#ffffff;
font-family: Arial Narrow, Microsoft Sans Serif, Helvetica;
font-size: 14px;
text-align:center;
padding-bottom:25px;
}

A {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 14px;
color: #000000;
text-decoration:none;
}

A:Hover {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 14px;
color: #000000;
text-decoration:underline;
}

A:Visited {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 14px;
color: #000000;
}

A.news_display {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 14px;
color: #000000;
text-decoration:none;
font-weight:bold;
}

A.news_display:Hover {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 14px;
color: #000000;
font-weight:bold;
text-decoration:underline;
}

A.news_display:Visited {
font-family: Helvetica, Microsoft Sans Serif;
font-size: 14px;
color: #000000;
font-weight:bold;
}

a.staff {
margin-top:0px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_church_light.png);
background-repeat:no-repeat;
}

a.staff:hover {
margin-top:0px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_church_dark.png);
background-repeat:no-repeat;
}

a.directions {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_directions_light.png);
background-repeat:no-repeat;
}

a.directions:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_directions_dark.png);
background-repeat:no-repeat;
}

a.times {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_times_light.png);
background-repeat:no-repeat;
}

a.times:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_times_dark.png);
background-repeat:no-repeat;
}

a.directory {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_directory_light.png);
background-repeat:no-repeat;
}

a.directory:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_directory_dark.png);
background-repeat:no-repeat;
}

a.gallery {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_gallery_light.png);
background-repeat:no-repeat;
}

a.gallery:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_gallery_dark.png);
background-repeat:no-repeat;
}

a.pastor {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_pastor_light.png);
background-repeat:no-repeat;
}

a.pastor:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_pastor_dark.png);
background-repeat:no-repeat;
}

a.gallery {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_gallery_light.png);
background-repeat:no-repeat;
}

a.gallery:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_gallery_dark.png);
background-repeat:no-repeat;
}


a.campus {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_campus_light.png);
background-repeat:no-repeat;
}

a.campus:hover {
margin-top:1px;
display:inline-block; /**** important ****/
width:230px;
height:43px;
background-image:url(images/link_campus_dark.png);
background-repeat:no-repeat;
}

a.news {
font-family: Arial, Microsoft Sans Serif, Helvetica;
font-size: 12px;
color:#585656;
text-decoration:none;
}

a.news:hover {
font-family: Arial, Microsoft Sans Serif, Helvetica;
font-size: 12px;
color:#585656;
text-decoration:underline;
}

a.news:visited {
font-family: Arial, Microsoft Sans Serif, Helvetica;
font-size: 12px;
color:#ffffff;
text-decoration:none;
}

#portfolio { margin: 0px; }

#imagefadebox {
  display: inline; 
  position: absolute;  
  list-style-type: none; 
  list-style-position: inside; 
  list-style-image: none; 
  margin-top: 0px; 
  margin-right: 0px; 
  margin-bottom: 0px; 
   margin-left: 0px;
}

#imagefadebox_sidebar {
  display: inline; 
  position: absolute;  
  list-style-type: none; 
  list-style-position: inside; 
  list-style-image: none; 
  margin-top: 5px; 
  margin-right: 0px; 
  margin-bottom: 0px; 
  margin-left: 3px;
}

#portfolio_sidebar { 
margin:0px; 
}

Open in new window


What am I doing wrong? How can I get my map up towards the top of the page?
brucegustPHP DeveloperAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
skullnobrainsConnect With a Mentor Commented:
some errors are really much worse than others

for example a missing alt tag will only impact text-based browsers and other ones when the image is not available. most of the time you do not want an alt anyway : if the small one px image you use as a placeholder above your tables for whatever esthetic reason fails to load, you'd rather not see an ugly text

but opening a form in a td and closing it in another is a different story. browsers do they best to display wrong pages but they sometimes cannot. in this case one browser might legitimately close the form when it sees the next </td> assuming you forgot to close the form (early FF series), while another might ignore all tr and td tags inside the form as not being part of a table (IE5.5), and a third might try and display the table properly and ignore the form tags as far as display is concerned. all those choices would be legitimate and none of these browsers would be wrong by doing so.

experience prooves repetitively that most of the worst headaches you may get come from dumb things such as <div>...</dlv> that you probably can read over a hundred times without ever seing there is a mistake. if there are many nested divs you are very likely to get things working perfectly in one browser and the whole layout to be messed up in another.
0
 
Scott Fell, EE MVEDeveloperCommented:
chrome and firefox looks fine
chuch
If it looks different in IE, part of the issue is your page is still not validating. You really should clean up the code and many of your troubles will go away or be easier to fix.

One example is you have an  open tag here.
<li><A HREF="times.php">Service Times</li>
0
 
Dave BaldwinConnect With a Mentor Fixer of ProblemsCommented:
Yes, you have way too many errors for the display to really be predictable.  The validator can't get thru your whole, it quits part way thru.  It starts at the top where the <meta.. tag should be after the <head> tag and the <map..> should be after the body tag.

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.hihatwebdesign.com%2FTrinity%2Fdirections.php
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
brucegustPHP DeveloperAuthor Commented:
Alright, guys!

I'm trying to clean this up, but some of it doesn't make any sense. I've made some progress, but I was hoping you could tell me a little something about these errors.

line 4 An head start tag seen but an element of the same type was already open.
<head>

I don't have another <head> in my script anywhere. What are they talking about?

I've got several errors like that and it makes no sense.

Thoughts?
0
 
Dave BaldwinConnect With a Mentor Fixer of ProblemsCommented:
The first part is out of order.  Should be...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Trinity Church | A Campus of Brentwood United Methodist Church | 3011 Longford Drive, Spring Hill, TN 37174 </title>

Open in new window


And this part is too. Should be like this.
</head>
<body>
<map name="social_media">
<area shape="rect" coords="3,5,39,36" href="http://www.facebook.com" target="_blank" alt="facebook">
<area shape="rect" coords="52,3,89,38" href="http://www.twitter.com" target="_blank" alt="twitter">
<area shape="rect" coords="102,3,135,38" href="http://www.itunes.com" alt="podcast">
<area shape="rect" coords="157,7,186,38" href="mailto:info@trinitychurch.com" alt="email">
</map>

Open in new window


And <form>s should not cross boundaries like that.  In this case, it should include the entire table, not start in one <td> and end in another.
<form action="search.php" method="Post" class="search">
<table class="form">
<tr>
<td>
<input type="text" name="search" class="login_box">
</td>
<td class="form">
<input type="image" src="images/search_icon.jpg" name="submit" alt="submit">
</td>
</tr>
</table>
</form>

Open in new window

0
 
brucegustPHP DeveloperAuthor Commented:
Dave, you rock and it's just that simple!

Question: In the past, I've been perhaps a little too casual in my regard for the validator only because the majority of the mistakes I've made were not impacted by the lack of an "alt" identifier in my image tag.

I'm not being facetious, here, but do these seemingly incremental elements make that much of a difference, or is it just "best practice?"
0
 
Dave BaldwinConnect With a Mentor Fixer of ProblemsCommented:
I make a habit of including even the 'alt' attributes.  The only one that I can't really fix is the occasional Flash elements.

The first thing is that IE pays attention to DOCTYPEs and it must be the very first thing on the page.  That can make a Big difference to IE.  

Second thing is that the blocks of a web page should be followed or you may find the browser ignoring something you put in the wrong place.  A web page is set up this way:
DOCTYPE
<html>
<head>
head stuff... 'meta', CSS, javascript
</head>
<body>
body stuff...  content elements, text, and images.
</body>
</html>

Open in new window


Third is that browsers do try to follow the rules and sometimes your page won't display right until you do too.  Although browsers try to make the page work, if you make it too hard for them they won't succeed.
0
 
brucegustPHP DeveloperAuthor Commented:
Thanks, guys!
0
All Courses

From novice to tech pro — start learning today.