Solved

Why doesn't this float work correctly?

Posted on 2013-06-30
8
249 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 82

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
 
LVL 82

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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

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 82

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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

758 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now