Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Why doesn't this float work correctly?

Posted on 2013-06-30
8
Medium Priority
?
264 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

636 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