Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Why doesn't this float work correctly?

Posted on 2013-06-30
8
Medium Priority
?
266 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 54

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 84

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 1500 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 84

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 1500 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 84

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 1500 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 27

Accepted Solution

by:
skullnobrains earned 500 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Suggested Courses
Course of the Month21 days, 5 hours left to enroll

810 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