Box model/none absolute positioning with flash

In recent years none-absolute positioning (or box model positioning) has become the norm with HTML/CSS
this is uselfull for dynamic functions which appear on an event (such as an object which appears when a button is clicked on or a error message that appears when a form box is given invalid input because it automatically inserts itself it the right place.)
One very important example of this is when you have a form which automatically produces an error message and the error message appears bellow the input area which caused it and the rest of the page is pushed down.
With none absolute positioning the developer does not need to worry about this.
But if the objects are given absolute position then it becomes a massive problem, the developer has to go about giving the objects differetn positions dependant on if dynamic objects appear or not
potentially the developer has to consider all possible variables, and code if statements which determine the position of all static objects for all possible variables which dynamic objects could take.
so does flash have a "none absolute positioning" solution to this problem.

Before you get all happy and pleased with yourself, APDivs or Layers seldom work well as a primary layout method. Here are some reasons why:
http://apptools.com/examples/pagelayout101.php
You're much better off using default CSS positioning (which is no positioning at all) along with CSS margins, padding and floats. If you don't believe me, check your page in non-IE browsers with increased/decreased text-sizes (zoom, text only).
From Tables to CSS Web Design Part 1 -
http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt1.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Similar Messages

Using mouse to position iframes, flash components?

I am new to website designing and I used to use Frontpage...
In front page I used to be able to create a blank Iframe and drag a
flash component into that Iframe and then drag and drop it
(position it) wherever I'd like.
In dreamweaver I can't drag and drop. It seems as if it is
locked in position for some reason. Is there a way where I can just
absolutely position the flash component wherever I'd like by
dragging and dropping it with the mouse? Any help would be
appreciated it.

If you are coming into DW from FP you need to know this:
without learning
some HTML and CSS, DW will be a very tough experience for
you. And
definitely know that DW is not designed to be freindly to the
drag and drop
crowd. Are you sure it's the right application for you?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"alee12321" <[email protected]> wrote in
message
news:gddt0m$4fj$[email protected]..
>I am new to website designing and I used to use
Frontpage... In front page
>I
> used to be able to create a blank Iframe and drag a
flash component into
> that
> Iframe and then drag and drop it (position it) wherever
I'd like.
>
> In dreamweaver I can't drag and drop. It seems as if it
is locked in
> position
> for some reason. Is there a way where I can just
absolutely position the
> flash
> component wherever I'd like by dragging and dropping it
with the mouse?
> Any
> help would be appreciated it.
>

Why is a table td not suitable as a containing block for absolute positioning of an element when other browsers allow that CSS feature?

Absolute positioning requires a containing element. I'm taking a class on HTML5 and CSS3 from ed2go.com. A photo display using thumbnails in a table shows the full size picture with its corner in the center of the thumbnail when you hover over the thumbnail.
Snippet of code for one td
<pre><nowiki><td>
<img src="pix2/flower01.png" alt="" class="small">
<img src="pix2/flower01.png" alt="" class="left"></td></nowiki></pre>
The "small" class makes the picture a thumbnail. The "left" class positions the full size picture with its corner in the center of the thumbnail when the mouse hovers over the thumbnail. This works correctly in Internet Explorer but not Firefox. The reason is that Firefox does not consider a td to be a containing element by using position:relative so the large picture corner is in the center of the viewport. Although td is not a block element it would seem that allowing absolute positioning with respect to a td would be a good default implementation.
The "problem" can be "fixed" by simply placing the two <img> inside a <p></p>.<br />
You can see the two different implementations at http://s179350112.onlinehome.us/temp6.htm and http://s179350112.onlinehome.us/temp7.htm
Is Firefox implementing the Standard correctly? Would a default implementation as in Internet Explorer be allowed by the Standard?

Yes, I see the same on the temp7 page.
Maybe someone at the MozillaZine "Web Development/Standards Evangelism" forum knows more about this.
*http://forums.mozillazine.org/viewforum.php?f=25
The helpers at that forum are more knowledgeable about web development issues.<br>
You need to register at the MozillaZine forum site in order to post at that forum.

Differences between compiling a VC model with Flash or Web Dynpro

Hello forum,
Is there anyone capable of telling me what are the main differences between compiling a Visual Composer model with Flash compiler or Web Dynpro compiler.
I've noticed that some important features aren't available when I use the WD compiler, such as creating a popup directly from the output of a table and I can't install a scroll bar to navigate through the table records (it only allows me to place some navigation buttons in the bottom of the table, and this is not a very user-friendly solution).
If you were me, would you choose the Flash compiler?
By the way, do you know a way to increase the performance of a report created with VC? When I execute the iView on the Netweaver Portal, I see that a iview compiled with Webdynpro consumes less 15MB of memory when running the report than a similar iview compiled with Flash.
Thank you.
Regards,
Ricardo Inácio

I found this old post while searching for something else. The main difference between Flash and Web Dynpro modes is that Flash works and Web Dynpro most emphatically does not. Some of the (many) disadvantages of Web Dynpro mode.
1. It will not let you design your own screens. The designer will let you resize and position your fields thus giving you the illusion of being in control, but at runtime it will resize your fields and position them where it thinks fit. This greatly increases development time since you can never be sure what any changes you make to your screen will look like until you run it.
2. You cannot include horizontally and vertically aligned fields in the same form; depending on the option you choose it will align them all vertically or horizontally. Which means that if you do need eg a horizonal row of pushbuttons at the top of your screen followed by a set of vertical fields, you have to use a separate form for each.
3. You cannot use the Editing mode = Read-only mode to make all the input fields in a form non-entereable. You can select it in the designer,but at runtime it doesn't take a blind bit of notice. The only way to make a field non-enterable is to check the Disabled box which turns it a very pale and almost invisible grey which looks awful.
4. You can't change the font or colour of texts.
5. Lots of the controls are not available eg the clock.
6. You cannot create toolbars on forms, or rather you can but at runtime it just ignores them.
7. Adding a hyperlink to a pushbutton does not do anything (this is my latest discovery).
All of the above work in Flash mode. We have to use Web Dynpro because we need the screens to work with screen readers for visually impaired viewers, but anyone who does not have this constraint should avoid using it like the plague.

Captivate 4 AS2 Text Entry Box not working with Flash Player 11

I am having issues with text entry boxes not working at all in flash 11. I am using Captivate 4 and exporting an AS2 swf. When you get to the slide you can type but you cannot see anything nor does the button or keystroke to move on. Also there is no cursor. Any ideas?

You said it is not working with Flash 11, so does that mean you tested with previous version and that worked?
While publishing choose Flash player as 9 and publish that, verify if that plays in a compatible web browser.
AS 2 is a legacy scripting, it has been said not too be supported with even Flash Player 10 --
http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=Part2_AS2_LangRef_1.html
I believe if you switch back to version 9 while publish your project, it should work.
Thanks,
Anjaneai

In Adobe Flash CS6, I have a blue box appearing around lines drawn with the line tool (and other tools like brush etc). I can't figure out how to disable.

In Adobe Flash CS6, I have a blue box appearing around lines drawn with the line tool (and other tools like brush etc). Whenever I try to use a tool, a blue box appears around the line and I have to double click it to manipulate it, which opens just that line in a semi burred screen where all the other objects are semi-grey in the background. I can manipulate this line in this screen but nothing else at that time which I could do about 5 minutes ago. For exampe, I no longer can join up 2 lines drawn by the line tool together. For some reason this started randomly (probably due to a accidental shortcut combination) and I just can't put it back to what it used to be. I have inserted a video hopefully showing what I mean. Any help would be appreciated.

Thank you - Just what I needed

Unable to view flash content with Flash 10,0,22,87 as an Non Admin

We currently have an issue with in our Citrix farm with Windows 2003 Servers (x64, R2, SP1) Where Flash Flash 10,0,22,87 is installed and working fine when logged in as a Domain administrator but will not work as a normal (non administrative user) to confirm I've given a user who it did not work for Domain admin rights and it started working straight away. I'm using (and published within Citrix) the 32bit version on IE for compadibility reasons and have also tired this on a Window 2003 Server (x86 R2 SP1) and am getting the same results so I have to assume the issue is with Flash and not with my setup.
I've tried the following recommendations:
Remove with Adobe Flash removal tool and Reinstalling via website with an Domain admin login using the change user /install command
Remove with Adobe Flash removal tool and Reinstalling via install_flash_player_ax.exe installer with a domain admin account using the change user /install command
Allowing Domain users Modify Premissions (to both the Directories and Files) to the M:\WINDOWS\system32\Macromed\Flash\swflash.ocx & M:\WINDOWS\SysWOW64\Macromed\Flash\Flash10b.ocx
Following KB article http://kb2.adobe.com/cps/624/624850b5.html and applying the premission changes recommended
Following KB article http://kb2.adobe.com/cps/191/tn_19148.html and checking the registry premissions on these items
I've enabled all ActiveX and Java related IE options in Group Policy to allow the to run for the Internet Zone
When going to http://www.adobe.com/software/flash/about/ either as a Domain admin or a Regular user it confirms that "You have version 10,0,22,87 installed"
Still I cant seem to get flash components of websites to load when logged in as a non Administrative User.

this is what fixed the issuefor me:
Be sure to try this on a test machine and back it up if needed.
In the system registry
For each of the following registry keys:
HKEY_CLASSES_ROOT\CLSID\{D27CDB6E-AE6D-11cf-96B8-444553540000}
HKEY_CLASSES_ROOT\CLSID\{D27CDB70-AE6D-11cf-96B8-444553540000}
HKEY_CLASSES_ROOT\CLSID\{1171A62F-05D2-11D1-83FC-00A0C9089C5A}
HKEY_CLASSES_ROOT\TypeLib\{D27CDB6B-AE6D-11CF-96B8-444553540000}
Right-click the key, select "Permissions"
In the Permissions Dialog click the "Advanced" button Click "Add"
Enter "Everyone" and click "OK" to accept Select "Allow" for the "Query Value", "Enumerate Subkeys", "Notify" and "Read Control" permissions. Do not change any existing permissions.
Source - http://www.adobe.com/go/624850b5

Could anyone tell me whether the ios7 for ipad with retina display comes with flash,compass and calculator!? Because mine has none!

Could anyone tell me whether the ios7 for ipad with retina display comes with flash,compass and calculator!? Because mine has none!

ravelvanto wrote:
Could anyone tell me whether the ios7 for ipad with retina display comes with flash,compass and calculator!? Because mine has none!
Hi ravelvanto,
mine too (iPad 3/WiFi) hasn't this features.
Especially the flash can't be realized because there is a simple lack of a flash light.
Why there is no compass, calculator (I'm using the Wolfram App instead), or the weather app etc. I don't know...
Best regards, mackevin

Help! I deleted my System preferences by mistake! I'm absolutely positive they are gone. Unfortunately so are the disks that came with it. I'm using an Imac with os 10.4.11. Any help would be greatly appreciated!

Help! I deleted my System preferences by mistake! I'm absolutely positive they are gone. I checked spotlight, blue apple and the hard drive, applications. Gone. Unfortunately so are the disks that came with it. I'm using an Imac with os 10.4.11. Any help would be greatly appreciated!

Try cleaning the disc, and be sure you have the right one.
If that doesn't help, it sounds like it's time for a trip to the Apple Store.
Make an appointment here: http://www.apple.com/retail/geniusbar/

Firefox for windows won't display absolute positioned divs over flash video

I have a website that has a brightcove video player. About a month or so ago, I was able to float divs over the video player so that they would display on top of the video player, using absolute positioning.
You can see the player here:
lifeminute.tv/evv/8+9+10+11+12+34/widget300s
In Firefox (mac), Chrome (windows), Internet explorer (windows) and Safari (mac) it all still displays properly. In Firefox (windows) the video player ignores the Z-index I assign it, and always places the divs underneath it, UNLESS I give the floating div a solid background color.
When I assign the following styles to the div containing the overlay, I can see the text properly, but of course the video is obscured.
background-color: #FFFFFF;
height: 158px;
position: absolute;
top: 4px;
width: 275px;
If I remove the background-color element the whole overlay pops to the back of the stack behind the video again.
Is this a FF windows bug or am I just missing something obvious?

At times you have to add wmode="transparent" attribute to the flash video embed code.

Newbie- Help with Flash dynamic pop up box

Hi i'm new to flash and was just wondering if anyone had any
tutorials or anything on how to create a dynamic pop up box with
flash similar to this one
http://www.photo-flash-maker.com/flash-template-dynamic-box.html

Hi there,
You are talking about making a movieclip open on top of the
rest of your information in flash. This is not really called a
popup (popup is more often referred to a window that opens).
What you can do is making in the top layer a movieclip that
would become visible when you click on something (for example a
photo).
Greetings,
Guido
Creation site web |
Jeux
Concours |
Echantillon gratuit |
Radin

I recently purchased the 16GB 5s. I didn't notice this before, but when I attempt to take a photo with the flash in the "on" position, the flash only works sporadically when I take a picture with the phone vertical. Anyone else with this problem?

I recently purchased the 16GB 5s. I didn't notice this before, but when I attempt to take a photo with the flash in the "on" position, the flash only works sporadically when I take a picture with the phone vertical. Anyone else with this problem?

I recently purchased the 16GB 5s. I didn't notice this before, but when I attempt to take a photo with the flash in the "on" position, the flash only works sporadically when I take a picture with the phone vertical. Anyone else with this problem?

Rendering bug with absolutely positioned button tags

I'm using Firefox 10.0.1 and I've found a bug regarding button elements that are absolutely positioned. The problem is setting both the right and left CSS attributes does not affect the width of the button as it should.
Here is some example code to show what I mean (the forum is mangling the html, hopefully you can get the gist of it):<br />
<br />
<pre><nowiki><html>
<body>
<div style="width: 500px; position: relative;">
<button style="position: absolute; left: 0; right: 0;">Test</button>
</div>
</body>
</html></nowiki></pre>
In all other browsers the button will be 500px wide. In Firefox, it will fit to the text.

Why don't you give that button a width:100% if you want it to take the full width of that DIV container?

Problem with Absolute Positioning

     I have a LARGE number of web pages (>1500) that have fields that are absolutely positioned. I have to process these pages (JSPs) and create a temporary HTML file that will be edited in Dreamweaver. The editing will only modify the CSS file: the temporary HTML is throw-away.
The goal is to use Dreamweaver to organize fields on the screen and have it modify only the position in the CSS.
My problem is that when I create the temporary HTML, it looks fine in the browser, but Dreamweaver displays the elements using a normal flow, and not using the absolute position. I have checked the "AP Elements" tab in DW, and it shows all my fields and the "Prevent overlaps" checkbox is UNCHECKED.
Any guidance will be appreciated...
Here is a small HTML example (CSS below that):
<html>
     <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
          <title>CL0350</title>
          <link rel="stylesheet" href="example.css">
          <style type="text/css">
body {
     background-color: #efe;
#formContainer {
     width: 802px;
     height: 564px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 11px;
     font-weight: bold;
     border: 3px #444 solid;
     background-color: white;
     position: relative;
</style>
     </head>
     <body>
          <div id="formContainer">
               <div id="lblEPP_MEMBER_NBR">Member#</div>
               <div id="lblEPP_YMDRCVD">Recv Dt</div>
<input id="txtEPP_MEMBER_NBR"><input id="txtEPP_YMDRCVD"></div>
     </body>
</html>
And finally, the CSS:
#lblEPP_MEMBER_NBR
white-space:nowrap;
POSITION:absolute;
left:17px;
top:43px;
#txtEPP_MEMBER_NBR
POSITION:absolute;
LEFT:17px;
TOP:62px;
WIDTH:110px;
#lblEPP_YMDRCVD
white-space:nowrap;
POSITION:absolute;
LEFT:542px;
TOP:43px;
#txtEPP_YMDRCVD
POSITION:absolute;
LEFT:542px;
TOP:62px;
WIDTH:92px;

Ahh - nevermind. I see you fixed your code.... Now I'll take a look.
On this page in DW, the fields seem to be placed using the absolute positioning, not the normal flow. Is the additional CSS contained in the externally linked CSS file?
<html>
     <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
          <title>CL0350</title>
          <link rel="stylesheet" href="example.css">
          <style type="text/css">
body {
     background-color: #efe;
#formContainer {
     width: 802px;
     height: 564px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 11px;
     font-weight: bold;
     border: 3px #444 solid;
     background-color: white;
     position: relative;
#lblEPP_MEMBER_NBR
white-space:nowrap;
POSITION:absolute;
left:17px;
top:43px;
#txtEPP_MEMBER_NBR
POSITION:absolute;
LEFT:17px;
TOP:62px;
WIDTH:110px;
#lblEPP_YMDRCVD
white-space:nowrap;
POSITION:absolute;
LEFT:542px;
TOP:43px;
#txtEPP_YMDRCVD
POSITION:absolute;
LEFT:542px;
TOP:62px;
WIDTH:92px;
}</style>
     </head>
     <body>
          <div id="formContainer">
               <div id="lblEPP_MEMBER_NBR">Member#</div>
               <div id="lblEPP_YMDRCVD">Recv Dt</div>
<input id="txtEPP_MEMBER_NBR"><input id="txtEPP_YMDRCVD"></div>
     </body>
</html>

Spry Menu Bar disappears absolute position

Hello all this is my first time posting on this site so bear with me. I have a semi-transperant spry menu bar that i inserted into the header div, over an image. I moved the menu bar -38px, when the position is set to relative the menu bar is visible, however the old position of the menu bar has a blank white space there. I think this is due to the relative position property. When i change it to absolute the whole menu bar disappears? http://www.brightlikethesun.com/index2.html (the position is back to relative to show the menu bar and also background for header is blue to show the space)
CSS
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
width: 100%;
margin: auto;
position: relative;
top: -38px;
font-family: "Lucida Console", Monaco, monospace;
opacity: 0.7;
filter: alpha(opacity=60); /* For IE8 and earlier */
margin-right: auto;
margin-left: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 20%;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-family:Arial, Helvetica, sans-serif;
font-size: 70%;
z-index: 1020;
cursor: default;
width: 50em;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 50em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #C0C0C0;
text-decoration: none;
background: rgba(98, 135, 167, .4)
background: #45484d; /* Old browsers */
background: -moz-linear-gradient(top, #45484d 0%, #000000 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #45484d 0%,#000000 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #45484d 0%,#000000 50%); /* IE10+ */
background: linear-gradient(to bottom, #45484d 0%,#000000 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #33C;
color: #FFF;
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 50%); /* IE10+ */
background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bright Like The Sun -- San Antonio, TX</title>
<style type="text/css">

</style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="header"><a href="#"><img src="BLTS1.jpg" alt="BLTS" name="BLTS" width="100%" height="100%" id="BLTS" style="display: block;" /></a>
   <ul id="MenuBar1" class="MenuBarHorizontal">
     <li><a class="MenuBarItemSubmenu" href="#"><center>Home</center></a></li>
     <li><a href="#"><center>Shows</center></a>
<ul>
         <li><a href="#"><u>Upcoming shows</u><br />
<br />
May 4th 2013 @<img src="502.jpg" width="5%" height="5%"><br />
Bright Like The Sun along with Little Science<br />
8pm 21+
</a></li>
               </ul>
     </li>
     <li><a class="MenuBarItemSubmenu" href="#"><center>Merch</center></a>
       <ul>
         <li><a class="MenuBarItemSubmenu" href="#"><u>Album</u><br /><img src="coda fin cover.jpg" width="15%" height="15%"><font size="4">Coda Fin</font><br />
Purchase Here or Itunes</a>
                    </li>
         <li><a href="#">Shirts--Coming Soon!</a></li>
         <li><a href="#">Various--Coming Soon!</a></li>
       </ul>
     </li>
     <li><a href="#"><center>Bio</center></a></li>
<li><a href="#"><center>Contact</center></a></li>
</ul></div>
<div class="sidebar1">
<p></p>
    <br />
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
</div>
<div class="content"><p align="right"><a href="https://www.facebook.com/brightlikethesun"><img src="FB.jpg" width="30" height="31" alt="Facebook" /></a><img src="twitter-icon.png" width="30" height="31" /></p>
    <p align="left"><img src="weare.jpg" width="185" height="72" /></p><p align="right"><iframe style="border:none" src="http://files.podsnack.com/iframe/embed.html?hash=adznldvg&t=1366488970" width="340" height="54" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" ></iframe></p>
    <p><img src="BLTS2.jpg" alt="BLTS" width="411" height="297" align="left" /><img src="BLTS font.jpg" width="340" /> is a Post-Rock band from San Antonio. They were born in early 2012 from the collective desire to make beautiful, thought provoking, and at times, chaotic music. Much like fellow Texan bands like Explosions in the Sky and This Will Destroy You, they are entirely instrumental, and known for creating progressively intricate waves of ambiance that grow with intensity and an unabashed wash of emotion. Attuned to their affinity for dynamics, seeing them live takes the listener from deafening walls of orchestrated sound, to melodies so subtle that one finds themselves acutely aware of their own breathing. <br />
      Bright Like The Sun’s debut album, Coda Fin, was engineered/mixed by Alex Bhore (of This Will Destroy You), and mastered by TW Walsh (of Pedro The Lion). The record, which was self released, was made available on April 12, 2013.<br /><br /><img src="BLTS3.jpg" width="330" height="245" align="right" /></p>
<br />
<br />
    <h4>Bright Like The Sun Consists of:</h4>
    <p>Rob Mochen - Guitar <br />
    Chris Etheredge - Guitar/Keys <br />
    Christian Miranda - Bass <br />
    Steven Barrera - Drums    </p>
    <p><br />
    </p>
    <h4><u>Coda Fin</u> Release Date April 12th 2013    </h4>
    <h4><img src="coda fin cover.jpg" width="250" height="238" align="left" /><img src="venues.jpg" width="171" height="65" align="right" /><br />
    <br />
    <br />
    <br />
       <a href="http://502bar.com/"><img src="502.jpg" width="150" height="112" align="right" /></a><a href="http://www.gypsyloungeaustin.com"><img src="gypsylounge.jpg" / width="150" height="112" align="right"></a></h4>
    <p align="right"> </p>
</div>
<div class="footer">
    <p><font face="verdana" font size="2" font color="#FFFFFF">©2013 Bright Like The Sun All Rights Reserved</font></p>
    </div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

What I see:
You need a width on the ul.MenuBarVertical style. Make it the same width as the ul.MenuBarVertical li selector.
Remove the float: none; from this style:
ul.MenuBarVertical ul li
     width: 12em;
     float: none;
No such measurement as a half a pixel:
ul.MenuBarVertical ul
     border: .5px solid #CCC;
If you want a border, 1px is minimum...you repeat this incorrect half-pixel in several places.
Running your page through the W3C Validator returned this: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.healthydirections.ca%2F&charset=%28dete ct+automatically%29&doctype=Inline&group=0
Your initial errors are not declaring a DOCTYPE, which among other things, does not provide the browser with any information regarding how you want the code interpreted for your viewer. Some browsers guess well, some do not (IE).
This
     <html>
is insufficient.
Apply this in its place, and run through the validator again.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Beth

Box model/none absolute positioning with flash

Similar Messages

Maybe you are looking for