Solved

Why doesn't this float work correctly?

Posted on 2013-06-30
8
252 Views
Last Modified: 2013-07-05
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?
0
Comment
Question by:brucegust
8 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39288929
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
 
LVL 83

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 375 total points
ID: 39288949
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
 

Author Comment

by:brucegust
ID: 39291872
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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 
LVL 83

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 375 total points
ID: 39291905
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
 

Author Comment

by:brucegust
ID: 39291944
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
 
LVL 83

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 375 total points
ID: 39292004
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
 
LVL 26

Accepted Solution

by:
skullnobrains earned 125 total points
ID: 39292337
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
 

Author Comment

by:brucegust
ID: 39302438
Thanks, guys!
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question