Mirror my I-pad ?

Just hooked up Apple tv, I was under the understanding I could mirror my I - pad. I am trying to view my many photos on my television , stored on photo stream. It shows about 69 photos, I have almost 2000. Are they supposed to be controlled from my I- pad, or the apple tv remote ?

Welcome to the Apple Community.
Assuming both devices are on the same network and that AirPlay is not turned off on the Apple TV, then simply tap on the screen when you are watching content you wish to stream to your Apple TV, then tap the airplay icon that appears in the control bar, choose the Apple TV from the menu that appears.
When displaying the content you wish to mirror on the iPad 2 (or better), iPad Mini, iPhone 4S (or better), double tap the home button (quickly) and swipe the bottom row of apps to the right to reveal the playback controls, tap the AirPlay icon and select your Apple TV from the list of available devices.

Similar Messages

HT204291 i cant mirror my i pad 1 to apple tv, works for air playing music though

i cant mirror my i pad 1 to apple tv, works for air playing music though, i can play videos, and mirror from i phone 4 s

Welcome to the Apple community.
Unfortunately the iPad 1 does not support mirroring. Mirroring is only supported on the iPad 2 or better or on the iPhone 4S.

Mirroring my I Pad screen

I have the first generation I Pad and I need to mirror my ipad screen onto a power point projector/screen. I purchased the VGA Connector but it doesn't seem to work. Is there an app to get this to work?

Mirroring is not supported on the iPad, only the iPad 2.

Hi I can mirror my i pad to the tv via the hdmi cable in my hotel but when I go to play a video there is no output any help would be great

Hi I am traveling and have hooked up my ipad 2 via hdmi connector to the tv. It is mirroring the screen but when I go to play a purchased tv show it does not play. Any advice would be appreciated.

In My iTunes I do
• Select the needed PlayLis to the left.
• File and Down to Burn to Disk
• Now I select Audio.CD - Not MP-3 or Data-DVD
In iMovie I shrink the window so that I can see the insetred Audio-CD. Double click on this CD to open it.
• Drag audio file into iMovie project and to where You want it.
Yours Bengt W

Any option of using mirror play in my i-pad1

can i use mirroring in i-pad !!!!
or
any option of app!!!!

No, mirroring is not available on the iPad 1. See http://support.apple.com/kb/HT4559
Video output is possible in certain Apps, e.g., Keynote, Photos, Video, youTube, etc.

How do I fix my unbalanced body error?

Hi, I am new to dreamweaver cs6 and I DESPERATELY need help! Every I go to save a template or create a new page from the template, I get an error message saying.... There is an error at line 149 "***": unbalanced body tag.
I've been through several forum posts and have reviewed my code multiple times but I cant seem to make it work. HELP!
<!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>Untitled Document</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"><img src="WebsiteHeader.jpg" width="1000" height="250" alt="a'Tavola market and cafe" /></div>
<div class="sidebar1">
    <h1> </h1>
    <h1> </h1>
    <h1>Hours</h1>
    <p>Mon-Thu<br />
      11 am - 10 pm</p>
    <p>Fri-Sat<br />
      11 am - 11 pm</p>
    <p>Sun<br />
      11:30 am - 9 pm</p>
    <p> </p>
    <p> </p>
    <h1>Connect With Us!</h1>
    <h1><a href="http://www.facebook.com/pages/aTavola-Market-Cafe/142683937624?fref=ts"><img src="images/facebook-icon.png" alt="facebook" width="100" height="100" /></a></h1>
    <p class="sidebar1"> </p>
</div>
<div class="content">
<ul id="Nav" class="MenuBarHorizontal">
    <li><a href="Home.html">Home</a></li>
    <li><a href="LunchMenu.html">Lunch Menu</a></li>
    <li><a href="MainMenu.html">Main Menu</a></li>
    <li><a href="Beverages.html">Beverages</a></li>
</ul>

<h1> </h1>
<div align="center"></div>
<h1> </h1>
<h1>Welcome</h1>
<p>Welcome to Greenville’s Marketplace of diverse menu selections, casual lunches, and family meals ready to go. We specialize in the creative use of fresh ingredients, seasonal menu selections, and fun culinary creations from the kitchen!</p>
<p>Please explore this site and we hope you will discover our fusion of casual dining and the freshness and variety of your neighborhood market.</p>
<p> </p>
<h1>Weekly Specials</h1>
<h2>Crispy Asian Duck Wings</h2>
<p>Tender tasty duck wing drummettes fried till crispy and tossed with an Asian sesame sauce. $8.95</p>
<h2>Smoked Gouda Chicken Quesadilla</h2>
<p>Roasted chicken, sweet caramelized onions and smoked Gouda cheese baked in a flour tortilla. Served with a side of warm marinara for dipping. $7.95</p>
<h2>Tuscan Chicken Sandwich</h2>
<p>Sliced chicken breast, fresh mozzarella, roasted red peppers, spinach, and sun dried tomato-artichoke aioli. Served on grilled ciabatta bread with two sides. $8.50</p>
<h2>Blackened Shrimp Salad</h2>
<p>Two skewers of blackened shrimp atop our fresh garden salad with mixed greens, roma tomatoes, cucumbers, red onions and mozzarella cheese. Served with your choice of dressing $8.95</p>
</div>
<div class="footer">
<p>a'Tavola! Market and Cafe. 620 Red Banks Rd Greenville, NC 27858. (252) 321-5533</p>
</div>
</div>

Is that all your HTML code contains?
Where are the closing </body> and </html> tags in the end?
Try adding this to the last lines of the file:
</body>
</html>
-ST

WEBSITE PAGE NOT SHOWING UP IN IE9..ONLY THE BACKGROUND SHOWS UP..

IN FIREFOX AND IE9, I'VE BEEN CREATING THIS SITE. HTML5. NOW, HERE I AM ALMOST DONE WITH THE SITE AND WHEN I DO THE MEDIA PAGE..... IT SEEMS TO ONLY SHOW THE BACKGROUND IN IE9..EVEN AFTER I DELETED IT.. THAT SPECIFIC PAGE (videos.html) IS ONLY DISPLAYING THE BACKGROUND. EACH PAGE I DO, I'VE TESTED THEM IN BOTH BROWSWERS..... KEEPING EVERYTHING THE SAME EXCEPT FOR THE CONTENT WITHIN THE ARTICLE....
Here's the Code initially, I'm sure there are erros obviously so guys just help me and don't be rude, if you will. I appreciate it greatly.
HERE'S WHAT IT LOOKS LIKE IN FIREFOX:
HERE'S WHAT IT LOOKS LIKE IN IE9:
HERE'S THE CODE:
(IT'S NEAT IN DREAMWEAVER) BUT... I JUST COPIED AND PASTED IT ONTO HERE.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta content="DahJ" name="author">
<meta content="DahJ, Derek, Alton Hill, Dahari, financial freedom, Designer DahJ, Mogul DahJ, Dahari Fashions, university, ministries, Salem, Dahj University, chancellor, business, success, successful, North Las Vegas, Derek, , Coach, mentor, Philanthropist, Best-Selling Author, Author, life-coach, life, " name="keywords">
<meta content="DAHJ videos, photos, and blog: Official Website" name="description">
<title>Media - DAHJ videos, photos, and blog: Official Website</title>
<style type="text/css">

<link href="CSS/dropDown3.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="CSS/videolightbox.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="media_videolb/overlay-minimal.css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/swfobject.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<header></header>

<div id="navMenu">
                    <ul>
                      <li></li>
                    </ul> 
                    <ul>
                      <li><a href="http://www.dahj.com/recent-activity">ACTIVITY</a></li>
                    </ul> 
                    <ul>
                      <li><a href="http://www.dahj.com/latest-news">NEWS</a></li>
                    </ul> 
                    <ul>
                      <li><a href="http://www.dahj.com/photogallery">MEDIA</a>
    </ul> 
                    <ul>
                      <li><a href="http://www.dahj.com/coaching">COACHING</a></li>
                    </ul> 
                    <ul>
                      <li><a href="http://www.dahj.com/shop">SHOP</a></li>
                    </ul> 
                    <ul>
                      <li><a href="http://www.dahj.com/about">ABOUT</a></li>
                    </ul> 
                    <p><br class="ClearFloat" />
                    </p>
</div>


          <div class="homebutton">
            <a href="http://www.dahj.com"><img src="Images/websiteicons/bg_logo_new_0.png" width="172" height="61"></a>
        </div>

<article class="content">
<br>

<div id="voverlay">
    <a class="close"></a>
        <div id="vcontainer"></div>
</div>
<center>

    <div class="videogallery">
        <a class="voverlay" href="http://vimeo.com/moogaloop.swf?clip_id=39862994&server=vimeo.com&show_title=1&show_byline= 1&autoplay=1" title="Hearing His Voice"><img src="Images/video thumbs/0.png" alt="Hearing His Voice" /><span></span></a>
        <a class="voverlay" href="http://vimeo.com/moogaloop.swf?clip_id=39862218&server=vimeo.com&show_title=1&show_byline= 1&autoplay=1" title="The Trust Fund from ManPower 2010"><img src="Images/video thumbs/1.png" alt="The Trust Fund from ManPower 2010" /><span></span></a>
        <a class="voverlay" href="http://vimeo.com/moogaloop.swf?clip_id=39861243&server=vimeo.com&show_title=1&show_byline= 1&autoplay=1" title="What He Put In You Then Will Work For You Now"><img src="Images/video thumbs/2.png" alt="What He Put In You Then Will Work For You Now" /><span></span></a>
        <a class="voverlay" href="http://vimeo.com/moogaloop.swf?clip_id=39031081&server=vimeo.com&show_title=1&show_byline= 1&autoplay=1" title="The Word 101 - Back to the Basics"><img src="Images/video thumbs/3.png" alt="The Word 101 - Back to the Basics" /><span></span></a>
        <a class="voverlay" href="http://vimeo.com/moogaloop.swf?clip_id=36932142&server=vimeo.com&show_title=1&show_byline= 1&autoplay=1" title="Tough Love - Pastor Sheryl Brady"><img src="Images/video thumbs/4.png" alt="Tough Love - Pastor Sheryl Brady" /><span></span></a>
        <a class="voverlay" href="http://vimeo.com/moogaloop.swf?clip_id=35261687&server=vimeo.com&show_title=1&show_byline= 1&autoplay=1" title="Just Calm Down - Pastor Sheryl Brady"><img src="Images/video thumbs/5.png" alt="Just Calm Down - Pastor Sheryl Brady" /><span></span></a>
        <a class="voverlay" href="http://vimeo.com/moogaloop.swf?clip_id=28674599&server=vimeo.com&show_title=1&show_byline= 1&autoplay=1" title="How to Seduce Proof Your Life"><img src="Images/video thumbs/6.png" alt="How to Seduce Proof Your Life" /><span></span></a>
        <a class="voverlay" href="http://vimeo.com/moogaloop.swf?clip_id=36249630&server=vimeo.com&show_title=1&show_byline= 1&autoplay=1" title="iHeart TPHND - Part 1"><img src="Images/video thumbs/7.png" alt="iHeart TPHND - Part 1" /><span></span></a>
        <a class="voverlay" href="http://vimeo.com/moogaloop.swf?clip_id=36666455&server=vimeo.com&show_title=1&show_byline= 1&autoplay=1" title="iHeart The Potter's House North Dallas - Part 2"><img src="Images/video thumbs/8.png" alt="iHeart The Potter's House North Dallas - Part 2" /><span></span></a>
        <a class="voverlay" href="http://vimeo.com/moogaloop.swf?clip_id=37080493&server=vimeo.com&show_title=1&show_byline= 1&autoplay=1" title="iHeart The Potter's House North Dallas - Part 3"><img src="Images/video thumbs/9.png" alt="iHeart The Potter's House North Dallas - Part 3" /><span></span></a>
        <a class="voverlay" href="http://vimeo.com/moogaloop.swf?clip_id=37535503&server=vimeo.com&show_title=1&show_byline= 1&autoplay=1" title="iHeart TPHND - Part 4"><img src="Images/video thumbs/10.png" alt="iHeart TPHND - Part 4" /><span></span></a>
        <a class="voverlay" href="http://vimeo.com/moogaloop.swf?clip_id=22007961&server=vimeo.com&show_title=1&show_byline= 1&autoplay=1" title="My grandson Jaden playing the drums"><img src="Images/video thumbs/11.png" alt="My grandson Jaden playing the drums" /><span></span></a>
</div>
<script src="js/jquery.tools.min.js" type="text/javascript"></script>
<script src="js/videolightbox.js" type="text/javascript"></script>

</center>
<br>
</article>

    
   

<footer>
<br>
<br>

<div id="socialmedia">
    <div class="facebook">
        <a href="http://facebook.com/dahj"><img src="Images/websiteicons/icontexto-inside-facebook.png"></a>
    </div>
    <div class="twitter">
        <a href="http://twitter.com/officialdahj"><img src="Images/websiteicons/icontexto-inside-twitter.png"></a>
    </div>
    <div class="youtube">
        <a href="http://youtube.com/dahj"><img src="Images/websiteicons/icontexto-inside-youtube.png"></a>
    </div>
</div>


<div id="socialmediatitles">
    <div class="facebookfans">
        <a href="http://facebook.com/dahj">FANS</a>
    </div>
    <div class="twitterfollowers">
        <a href="http://twitter.com/officialdahj">FOLLOWERS</a>
    </div>
    <div class="youtubesubs">
        <a href="http://youtube.com/dahj">SUBSCRIBERS</a>
    </div>
</div>

    <address>
    <br>
    <br>
    ©2012 Copyright | <a href="http://dahj.com/privacy-policy">Privacy Policy/Your Privacy Rights</a> | <a href="http://dahj.com/terms-of-use">Terms of Use</a> | <a href="http://dahj.com/contact-information">Contact US</a> | <a href="http://dahj.com/feedback">Feedback</a>
    </address>
</footer>

</div>
</body>
</html>

I am not sure what's happening with IE9 (no live site) but I had real problems viewing your code in Live View - until I removed the HTML comment marked below. Basically your site was viewable in Design View but as soon a I hit Live view, it disappeared - much like IE9. See if removing the comment solves your issue.
<style type="text/css">
<!-- /*Remove this */
body {
    margin: 0;
    padding: 0;
    color: #000;
    background:url(Images/websitebackgroundhomee.jpg) repeat scroll 0 0;
    font-family: David;
    font-size: 15px;
    height:100%;

Layout changed when I added spacing around images.

@charset "utf-8";
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #363;
margin: 0;
padding: 0;
color: #000;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color:#414958;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
color: #F00;
text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
width: 80%;
max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
background: #FFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
background: #363;
/* ~~ These are the columns for the layout. ~~
1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
.sidebar1 {
float: left;
width: 20%;
background: #CF0;
padding-bottom: 10px;
.content {
padding: 15px 15px 15px 15px;
width: 80%;
float: left;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
list-style: none; /* this removes the list marker */
border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
margin-bottom: 15px; /* this creates the space between the navigation on the content below */
ul.nav li {
border-bottom: 1px solid #666; /* this creates the button separation */
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 5px 5px 5px 15px;
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
text-decoration: none;
background: #390;
color: #000;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
background: #6F7D94;
color: #FFF;
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background: #CF6;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
<!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>Yellowstone Biologist</title>
<link href="NationalParks.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
</script>
</head>
<body onload="MM_preloadImages('habitat def.PNG')">
<div class="container">
<div class="header"><a href= /><img src="animals.gif" width="878" height="193" alt="bison" /></a>
    </div>
<div class="sidebar1">
    <ul class="nav">
      <li><a href="NationalParks.html"><strong>Home</strong></a></li>
      <li><a href="Park Ranger.html"><strong>Park Ranger</strong></a></li>
      <li><a href="Biologist.html"><strong>Biologist</strong></a></li>
      <li><a href="Geologist.html"><strong>Geologist</strong></a></li>
      <li><a href="Historian.html"><strong>Historian</strong></a></li>
      <li><a href="Games.html"><strong>Games</strong></a></li>
    </ul>
    <p><strong>Definitions (italicized words):</strong> </p>
    <p><em>Habitat</em>:   the natural conditions and environment in which a plant or animal lives</p>
    <p><br />
      <em>Extermination</em>: completely destroy or kill</p>
    <p><em>USFWS</em>: United States Fish and Wildlife Service</p>
</div>
<div class="content">
    <h1>Yellowstone Biologist    </h1>
    <h2>Mammals</h2>
   <p> Yellowstone is home to the largest concentration of mammals in the lower 48 states. Sixty-seven different mammals live here, including grizzly bears, black bears, gray wolves, wolverine, lynx, elk, bison, moose, and numerous small mammals.</p>
    <p>Visitors must view all wildlife safely. You must stay at least 100 yards away from bears and wolves and at least 25 yards away from all other animals—including bison, elk, bighorn sheep, deer, moose, and coyotes.</p>
    <h4>Bears</h4><img src="grizzly.gif" alt="grizzly bear family" width="150" height="115" hspace="15" vspace="15" align="left" />
    <p>Bears may be seen in Yellowstone March through November of each year. Yellowstone is one of the only areas south of Canada that still has large grizzly bears. Grizzly bears are usually seen in the open areas. </p>
    <p> </p>
    <h4>Wolves</h4><img src="wolves.gif" alt="wolves" width="150" height="115" hspace="15" vspace="15" align="left" />
    <p>
Loss of <em>habitat</em> and <em>extermination</em> programs led to the elimination of wolves throughout most of the United States by early in the 20th century. In 1973, the U.S. Fish and Wildlife Service listed the northern Rocky Mountain wolf as an endangered species and designated Greater Yellowstone as one of three recovery areas. From 1995 to 1997, 41 wild wolves from Canada and northwest Montana were released in Yellowstone National Park. As expected, wolves from the growing population dispersed to establish territories outside the park. More than 1,600 wolves now reside in Idaho, Montana, and Wyoming. In August 2010, a U.S. district judge ruled against a <em>USFWS</em> 2009 decision to remove the wolf from the endangered species list, so wolves are protected as an endangered species in all three states again.<br />
    </p>
<h4>Bighorn Sheep<img src="BigHornSheep.gif" alt="bighorn sheep" width="150" height="115" hspace="15" vspace="15" align="left" /></h4>
    <p> Bighorn sheep once numbered in the millions in western United States and were an important food source for humans. They are named for the large, curved horns on the males, or rams. Females, or ewes, also have horns, but they are short with only a slight curve. In the winter of 1981-82, an outbreak of pinkeye occurred among bighorns in the Mt. Everts area. Many sheep were blinded and/or killed on the adjacent park road or by falling from cliffs. Some are now found comfortable around summer road traffic.</p>
    <h4>Bison<img src="bison.gif" alt="bison" width="150" height="115" hspace="15" vspace="15" align="left" /></h4><p>
    Bison are the largest mammals in Yellowstone National Park. They are strictly vegetarian, and they graze on grasslands in the meadows, the foothills, and even the high-elevation areas of Yellowstone. Despite their slow walk, bison are surprisingly fast for animals that weigh more than half a ton.</p>
<p>Yellowstone is the only place in the lower 48 states where a population of wild bison has survived since prehistoric times, although fewer than 50 native bison remained here in 1902. Fearing extinction, the park imported 21 bison from two privately-owned herds.</p>
    <h4>Bobcats<img src="yellowstone-bobcat.gif" alt="bobcat" width="150" height="115" hspace="15" vspace="15" align="left" /></h4><p>
    Bobcats are small wild cats with reddish-brown or yellowish-brown coats, streaked with black or dark brown. They have prominent, pointed ears with a tuft of black hair at the tip. </p>
<p>Unlike lynx, which they resemble, bobcats elsewhere have been highly adaptable to human-caused changes in environmental conditions; some biologists believe that there are more bobcats in the United States today than in colonial times. Yellowstone has many rock outcrops, canyons bordered by rock ledges, conifer forests, and semi-open areas that seem to offer conditions favorable for bobcats--adequate shelter, a variety of rodents, rabbits, hares, birds, and other small animals as well as seasonal carrion, for food.</p>
<p>Bobcats are known to hole-up and wait out severe winter storms elsewhere. These elusive cats are most active at night, so even those who study them seldom have an opportunity to see one.</p>
    <h4>Coyotes</h4>
    <p>
      Yellowstone's coyotes are among the largest coyotes in the United States. Adults are about 30 pounds, are less than two feet tall and vary in color from gray to tan with sometimes a reddish tint to its coat.</p>
    <p>Small mammals are an important component of coyotes' diets. In Yellowstone, such prey include microtines or voles, mice , pocket gophers, small birds, and in spring and summer, ground squirrels. They also feed on larger mammal's (elk, deer, bison, moose, pronghorn, and bighorn sheep) calves and fawns shortly after birth and young animals.</p>
    <h4>Elk<img src="elk.gif" alt="elk" width="150" height="115" hspace="15" vspace="15" align="left" /></h4><p>
      Elk are the most abundant large mammal found in Yellowstone and historical evidence confirms their continuous presence for at least 1,000 years. More than 30,000 elk from 7-8 different herds summer in Yellowstone and approximately 15,000 to 22,000 winter in the park. </p>
<p>Bulls grow antlers annually from the time they are nearly one year old. When mature, a bull's "rack" may have 6 to 8 points, or tines, on each side and weigh more than 30 pounds.</p>
    <h4>Lynx</h4>
<p>Adult lynx are about the size of a large domestic cat. Males can weigh up to 30 pounds, while females are smaller. The similarity between lynx and bobcats makes it difficult to determine their status in Yellowstone. A large adult bobcat may be larger than a small adult lynx, so size is not a good characteristic for positive identification.</p>
    <h4>Moose<img src="moose.gif" alt="moose" width="150" height="115" hspace="15" vspace="15" align="left" /></h4><p>
    Moose, the largest member of the deer family, were reportedly very rare in northwest Wyoming when Yellowstone National Park was established in 1872. Moose breed from early September to November and one to three calves are born in May or June. Calves weigh 25 to 35 pounds at birth but grow rapidly; adult females (cows) weigh up to 800 pounds and males (bulls) up to 1300 pounds. </p>
<h4>Mountain Lion</h4><p>
    The mountain lion, also called the cougar, is the largest member of the cat family living in Yellowstone. Mountain lions can weigh up to 200 pounds, although lions in Yellowstone are thought to range between 140 and 160 pounds for males and around 100 pounds for females.</p>
<p>Mountain lions are rather secretive, so most visitors are unaware of their existence in Yellowstone. Lions probably live throughout the park in summer. </p>
    <h4>      Amphibians</h4>
    <p>
    Cool, dry conditions limit Yellowstone's amphibians to four species: boreal toad; chorus frog; spotted frog; and the tiger salamander. Population numbers for these are not known.</p>
    </div>
<div class="footer">
    <p>Sources: <a href="http://www.nps.gov/yell/naturescience/mammals.htm">http://www.nps.gov/yell/naturescience/m ammals.htm</a></p>
    <p><a href="http://www.nps.gov/yell/naturescience/amphibians.htm">http://www.nps.gov/yell/naturescienc e/amphibians.htm</a></p>
    </div>
</div>
</body>
</html>
This has happened before, where everything in my content area has dropped down below the sidebar.It's happended on several pages. I don't know why or how to fix it. It's for a class, so where I've posted it is private, but here's the page and css code.
HTML

Murray is right. Padding (and margins) is added to the width. However, when using percentages, you should never use figures that add up to exactly 100%.
Browsers need to convert the percentages to pixels. Because pixels must be whole numbers, some percentages are rounded up, which results in the final element dropping down below its neighbours. With percentages, it's much safer to use values that add up to 98% (99% often works, but 98% is safer).

Page gap in DW CS6 tutorial. Please help!

I am getting this gap in my page and it started just after I added this <nav> bar. I have done this lesson several times starting from scratch and it still gives me this gap. I am not sure if the book is missing something or it's me. The book shows no gap in the examples. I would greatly appreciate any help. I am a little new to DW. I took HTML in high school about 16 years ago so I understand some code by hand. Thanks for your time.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">

</style></head>
<body>
<div class="container">
<div id="apDiv1"><img src="Lessons/images/butterfly-ovr.png" width="170" height="158" alt="GreenStart Logo"></div>
<header></header>
    <div class="sidebar1">
    <ul class="nav">
      <li><a href="#">Green News</a></li>
      <li><a href="#">Green Products</a></li>
      <li><a href="#">Green Events</a></li>
      <li><a href="#">Green Travel</a></li>
      <li><a href="#">Green Tips</a></li>
    </ul>
    <aside>
      <p> The above links demonstrate a basic navigational structure using an unordered list styled with CSS. Use this as a starting point and modify the properties to produce your own unique look. If you require flyout menus, create your own using a Spry menu, a menu widget from Adobe's Exchange or a variety of other javascript or CSS solutions.</p>
      <p>If you would like the navigation along the top, simply move the ul to the top of the page and recreate the styling.</p>
    </aside>
</div>
<article class="content">
    <h1>Instructions</h1>
    <section>
     <h2>How to use this document</h2>
      <p>Be aware that the CSS for these layouts is heavily commented. If you do most of your work in Design view, have a peek at the code to get tips on working with the CSS for the fixed layouts. You can remove these comments before you launch your site. To learn more about the techniques used in these CSS Layouts, read this article at Adobe's Developer Center - <a href="http://www.adobe.com/go/adc_css_layouts.http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.</p>
    </section>
    <section>
      <h2>Clearing Method</h2>
      <p>Because all the columns are floated, this layout uses a clear:both declaration in the footer rule. This clearing technique forces the .container to understand where the columns end in order to show any borders or background colors you place on the .container. If your design requires you to remove the footer from the .container, you'll need to use a different clearing method. The most reliable will be to add a <br class="clearfloat" /> or <div class="clearfloat"></div> after your final floated column (but before the .container closes). This will have the same clearing effect. </p>
    </section>
    <section>
      <h2>Logo Replacement</h2>
      <p>An image placeholder was used in this layout in the header where you'll likely want to place a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>
      <p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>
      <p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
    </section>
    <section>
      <h2>Backgrounds</h2>
      <p>By nature, the background color on any block element will only show for the length of the content. This means if you're using a background color or border to create the look of a side column, it won't extend all the way to the footer but will stop when the content ends. If the .content block will always contain more content, you can place a border on the .content block to divide it from the column.</p>
    </section>
    </article>
<footer>
    <p>This footer contains the declaration position:relative; to give Internet Explorer 6 hasLayout for the footer and cause it to clear correctly. If you're not required to support IE6, you may remove it.</p>
    <address>
      Address Content
    </address>
</footer>
</div>
</body>
</html>

Sorry about that. I am not exactly sure where the problem is, but I know it takes place after I put the <nav> in (in the html portion). If I understand what I am learning, the CSS at the top will structure my html code so I would have thought the CSS tageting my nav would be the focus. Maybe it is a different section though.
CSS part:
nav p {
font-size: 90%;
color: #FFC;
text-align: right;
font-weight: bold;
background-color: #090;
padding-top: 5px;
padding-right: 20px;
padding-bottom: 5px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #060;
HTML part: (bold italic is the part I added)
<body>
<div class="container">
<div id="apDiv1"><img src="Lessons/images/butterfly-ovr.png" width="170" height="158" alt="GreenStart Logo"></div>
<header></header>
<nav>
    <p>Home | About Us | Contact Us</p>
</nav>
<div class="sidebar1">
    <ul class="nav">
      <li><a href="#">Green News</a></li>
      <li><a href="#">Green Products</a></li>
      <li><a href="#">Green Events</a></li>
      <li><a href="#">Green Travel</a></li>
      <li><a href="#">Green Tips</a></li>
    </ul>

How do I remove whitespace from a template header

I am trying to work myself thru understanding html coding by using a dreamweaver template and creating a page for my company. I have used dreamweaver before CC, however I am trying to understand the new changes.
I ran into a problem I am hoping to get help with.
I tried swapping out a placeholder logo on the template with my own logo. I seem to have a bit of white space at the bottom of the logo when I see it in live view or a browser. How can I get rid of it. I tried combinations of 0 margins and changing padding, but it seems I'm just whistling in the dark. Here is the code:
The CSS associated with this page is here:
@charset "UTF-8"; body { font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; background-color: #42413C; margin: 0; padding: 0; color: #000; } /* ~~ Element/tag selectors ~~ */ ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */ padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, p { margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing block. The remaining bottom margin will hold it away from any elements that follow. */ padding-right: 15px; padding-left: 15px; /* adding the padding to the sides of the elements within the blocks, instead of the block elements themselves, gets rid of any box model math. A nested block with side padding can also be used as an alternate method. */ } a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */ border: none; } /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */ a:link { color: #42413C; text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */ } a:visited { color: #6E6C64; text-decoration: underline; } a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */ text-decoration: none; } /* ~~ This fixed width container surrounds all other blocks ~~ */ .container { width: 960px; background-color: #FFFFFF; margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */ } /* ~~ The header is not given a width. It will extend the full width of your layout. ~~ */ header { background-color: #A36BE8; } /* ~~ These are the columns for the layout. ~~ 1) Padding is only placed on the top and/or bottom of the block elements. The elements within these blocks have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the block itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the block element and place a second block element within it with no width and the padding necessary for your design. 2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a block set to float right). Many times, padding can be used instead. For blocks where this rule must be broken, you should add a "display:inline" declaration to the block element's rule to tame a bug where some versions of Internet Explorer double the margin. 3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar blocks could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document. 4) If you prefer your nav on the left instead of the right, simply float these columns the opposite direction (all left instead of all right) and they'll render in reverse order. There's no need to move the blocks around in the HTML source. */ .sidebar1 { float: right; width: 180px; background-color: #C5C2B8; padding-bottom: 10px; } .content { padding: 10px 0; width: 780px; float: right; } /* ~~ This grouped selector gives the lists in the .content area space ~~ */ .content ul, .content ol { padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */ } /* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */ nav ul{ list-style: none; /* this removes the list marker */ border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */ margin-bottom: 15px; /* this creates the space between the navigation on the content below */ } nav li { border-bottom: 1px solid #666; /* this creates the button separation */ } nav a, nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */ padding: 5px 5px 5px 15px; display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */ width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */ text-decoration: none; background-color: #15EE00; } nav a:hover, nav a:active, nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */ background-color: #ADB96E; color: #FFF; } /* ~~ The footer ~~ */ footer { padding: 10px 0; background-color: #CCC49F; position: relative;/* this gives IE6 hasLayout to properly clear */ clear: both; /* this clear property forces the .container to understand where the columns end and contain them */ } /*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */ header, section, footer, aside, article, figure { display: block; }
Thank you for your help!

Try this -
<img src="assets/jpgs/Prodigy Logo Large 2014.jpg" width="180" height="180" alt="" style="display:block;">
What you are seeing as whitespace is the space reserved for glyph descenders on any element that is rendered within a text box (i.e., an inline element). By making the image "display:block" you eliminate that space because a block element doesn't have descenders. If that works to your satisfaction then you can give the logo an id, and create a CSS selector containing that block style.

Issue with container divs, and absolute/fixed positioning

Hello everyone, I have an issue getting my divs to function properly. I have a container div and I want the table div to float inside (and move with page resize). Right now it doesnt move with the page (see photo).
However, when I change the position to relative of that div, it moves under the container div and locks itself there.(Second photo)
Any help would be great! Thanks!
Picture one:
Picture two
<!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>davide marchetti architetto</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<link href="ttp://mottie.github.com/tablesorter/css/theme.blue.css" rel="stylesheet">
<script type="text/javascript" src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script type="text/javascript">
$(document).ready(function()
        $("#myTable").tablesorter();
</script>
<style type="text/css">
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
margin: 0;
padding: 0;
color: #000;
background-image: url();
background-repeat: no-repeat;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color:#414958;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
color: #4E5869;
text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
width: 80%;
max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
min-width: 780px;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
.content {
padding: 10px 0;
font-size: x-small;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
body,td,th {
          font-family: "Courier New", Courier, monospace;
          font-size: 12px;
#apDiv1 {
position: relative;
width: 618px;
height: 268px;
z-index: 1;
left: 186px;
top: 147px;
overflow: hidden;
#apDiv2 {
          position: relative;
          width: 698px;
          height: 299px;
          z-index: 1;
          left: 266px;
          top: 117px;
          overflow: scroll;
table.tableizer-table {
border: 1px solid #CCC; font-family: Courier New, Courier, monospace;
font-size: 12px;
.tableizer-table td {
padding: 4px;
margin: 3px;
border: 1px solid #ccc;
.tableizer-table th {
background-color: #000000;
color: #FFF;
font-weight: bold;
#apDiv4 {
position: relative;
width: 697px;
height: 299px;
z-index: 1;
left: -141px;
top: -636px;
overflow: scroll;
#apDiv3 {
position: relative;
width: 700px;
height: 300px;
z-index: 2;
h1,h2,h3,h4,h5,h6 {
font-family: "Courier New", Courier, monospace;
</style>


</head>
<div class="container">
<div class="container"><img src="../images/Davide.png" width="800" height="600" usemap="#Map" border="0" />
    <div id="apDiv2">
      <map name="Map" id="Map">
        <area shape="rect" coords="48,416,125,435" href="../news.html" />
        <area shape="rect" coords="262,416,304,436" href="../studio.html" />
        <area shape="rect" coords="490,416,545,435" href="../projects.html" />
        <area shape="rect" coords="702,415,751,436" href="../contact.html" />
      </map>
      <table id="myTable" class="tableizer-table">
        <thead>
          <tr class="tableizer-firstrow">
            <th>YEAR </th>
            <th>PROJECT</th>
            <th>LOCATION</th>
            <th>CATEGORY</th>
            <th>STATUS</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>2013</td>
            <td>EXPO 2015 - Italian Pavilion</td>
            <td>Milan - Italy</td>
            <td>Culture</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td>2012</td>
            <td>Requalification of "Almerici", "Bufalini" and "Fabbri" Squares</td>
            <td>Cesena - Italy</td>
            <td>Urban planning</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Re-thinking Shanghai: sustainable intervention along the Suzhou Creek</td>
            <td>Shanghai - China</td>
            <td>Mixed use</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>VCC Flat</td>
            <td>Rome - Italy</td>
            <td>Interior design</td>
            <td>Commission / Built</td>
          </tr>
          <tr>
            <td>2011</td>
            <td>London 2012 Olympic Games Information Pavilion</td>
            <td>London - UK</td>
            <td>Culture</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Enhancement project for the sacred area of the sanctuary of Hercules Victor</td>
            <td>Tivoli - Italy</td>
            <td>Culture</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td>2010</td>
            <td>VTL Flat </td>
            <td>Rome - Italy</td>
            <td>Interior design</td>
            <td>Commission / Built</td>
          </tr>
          <tr>
            <td> </td>
            <td>BNC Flat</td>
            <td>Rome - Italy</td>
            <td>Interior design</td>
            <td>Commission / Built</td>
          </tr>
          <tr>
            <td> </td>
            <td>Expansion of the "Farnesina" High School</td>
            <td>Rome - Italy</td>
            <td>Education</td>
            <td>Competition / Selected Project</td>
          </tr>
          <tr>
            <td> </td>
            <td>Neanderthal Art Center</td>
            <td>Pilo�a - Spain</td>
            <td>Culture</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>New pedestrian & cycling footpath in the site of the "San Leopoldo II" old bridge</td>
            <td>Poggio a Caiano - Italy</td>
            <td>Infrastructure</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Proposition 2065 - St. Leonards site</td>
            <td>Sidney - Australia</td>
            <td>Mixed use</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>MEIS - National Museum of Italian Judaism and Shoah </td>
            <td>Ferrara - Italy</td>
            <td>Culture</td>
            <td>Competition / 3rd Prize</td>
          </tr>
          <tr>
            <td> </td>
            <td>36 The Calls Design Competition</td>
            <td>Leeds - UK</td>
            <td>Offices</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Europan 10: masterplan for an harbour area</td>
            <td>Rudk�bing - Denmark</td>
            <td>Urban planning</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td>2009</td>
            <td>"Scuola in Piazza a Levante" - Kindergarten and public areas</td>
            <td>Bisceglie - Italy</td>
            <td>Education</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>CIBAF - City of Kids </td>
            <td>Frattamaggiore - Italy</td>
            <td>Education</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Designing in Teheran</td>
            <td>Teheran - Iran</td>
            <td>Mixed use</td>
            <td>Competition / Selected Project</td>
          </tr>
          <tr>
            <td>2008</td>
            <td>DawnTown 2008: Waterworks</td>
            <td>Miami - USA</td>
            <td>Mixed use</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Venice Biennale New Australian Pavillion</td>
            <td>Venice - Italy</td>
            <td>Culture</td>
            <td>Competition / 1st Prize</td>
          </tr>
          <tr>
            <td> </td>
            <td>New pedestrian and cycling bridge</td>
            <td>Civita di Bagnoregio - Italy</td>
            <td>Infrastructure</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Renovation of "San Ciro" Square</td>
            <td>Portici - Italy</td>
            <td>Urban planning</td>
            <td>Competition / 2nd phase selected / 3rd Prize</td>
          </tr>
          <tr>
            <td> </td>
            <td>Renovation of "Umberto I�" Square</td>
            <td>San Ferdinando di Puglia - Italy</td>
            <td>Urban planning</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Historic Renovation of the "Corsie Sistine" Hospital Wards </td>
            <td>Rome - Italy</td>
            <td>Culture</td>
            <td>Tender Competition (design/bid/build)</td>
          </tr>
          <tr>
            <td> </td>
            <td>Cupboard</td>
            <td>Rome - Italy</td>
            <td>Furniture design</td>
            <td>Commission / Built</td>
          </tr>
          <tr>
            <td> </td>
            <td>Office table and lighting system</td>
            <td>Rome - Italy</td>
            <td>Furniture design</td>
            <td>Commission / Built</td>
          </tr>
          <tr>
            <td> </td>
            <td>New City Library</td>
            <td>Legnano - Italy</td>
            <td>Library</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Office table</td>
            <td>Rome - Italy</td>
            <td>Furniture design</td>
            <td>Concept Design</td>
          </tr>
          <tr>
            <td> </td>
            <td>Volleyball Arena, Hotel and Commercial Spaces</td>
            <td>Rome - Italy</td>
            <td>Mixed use</td>
            <td>Concept Design</td>
          </tr>
          <tr>
            <td>2007</td>
            <td>New Provincial Archaeological Museum in the Santa Scolastica Monastery</td>
            <td>Bari - Italy</td>
            <td>Culture</td>
            <td>Competition / 5th Prize</td>
          </tr>
          <tr>
            <td> </td>
            <td>The City of Water and Health</td>
            <td>Rome - Italy</td>
            <td>Mixed use</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Parkway Iconic Bridge</td>
            <td>Sheffield - UK</td>
            <td>Infrastructure</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Renovation of "Loveno 84" Sport Center</td>
            <td>Menaggio - Italy</td>
            <td>Sport</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>"Guardia di Finanza" Corp Main Headquarters</td>
            <td>Catanzaro - Italy</td>
            <td>Mixed use</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>"Lega Lombarda" Real Estate Complex Urban Development</td>
            <td>Rome - Italy</td>
            <td>Mixed use</td>
            <td>Tender Competition (design/bid/build) </td>
          </tr>
          <tr>
            <td> </td>
            <td>Necklace</td>
            <td>Rome - Italy</td>
            <td>Jewellery design</td>
            <td>Prototype </td>
          </tr>
          <tr>
            <td> </td>
            <td>Moon putter</td>
            <td>Rome - Italy</td>
            <td>Product design</td>
            <td>Prototype</td>
          </tr>
          <tr>
            <td> </td>
            <td>Aleale Coffee Table</td>
            <td>Rome - Italy</td>
            <td>Furniture design</td>
            <td>Concept Design</td>
          </tr>
          <tr>
            <td>2006</td>
            <td>"1st October" Public Square</td>
            <td>Santa Maria Capua Vetere - Italy</td>
            <td>Urban planning</td>
            <td>Competition / 1st Prize / Built</td>
          </tr>
          <tr>
            <td> </td>
            <td>"Attilio Pecile" New Square and Sustainable Mixed Use Building</td>
            <td>Rome - Italy</td>
            <td>Mixed use</td>
            <td>Competition / 1st Prize</td>
          </tr>
          <tr>
            <td> </td>
            <td>Renewal of the "Porta Nuova" Old Tower</td>
            <td>Venice - Italy</td>
            <td>Culture</td>
            <td>Competition / 2nd Prize</td>
          </tr>
          <tr>
            <td> </td>
            <td>"Meno e pi� 4": Civic Center and Pre-school Building</td>
            <td>Rome - Italy</td>
            <td>Mixed use</td>
            <td>Competition / Mention</td>
          </tr>
          <tr>
            <td> </td>
            <td>Urban Renewal of Historic Building and Public Squares</td>
            <td>Conversano - Italy</td>
            <td>Urban planning</td>
            <td>Competition / 2nd Prize</td>
          </tr>
          <tr>
            <td> </td>
            <td>New Seafront and Beach Accesses</td>
            <td>Fregene - Italy</td>
            <td>Urban planning</td>
            <td>Competition / Mention</td>
          </tr>
          <tr>
            <td> </td>
            <td>Requalification of Main Streets and Squares of the Old City Centre</td>
            <td>Bari - Italy</td>
            <td>Urban planning</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Gyeonggi-do Jeongok Prehistory Museum</td>
            <td>Jeongok-ri - South Korea</td>
            <td>Culture</td>
            <td>Competition / Honourable Mention</td>
          </tr>
          <tr>
            <td> </td>
            <td>Low-income housing development</td>
            <td>Guadalajara/Ceuta - Spain</td>
            <td>Residential</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Shop extension</td>
            <td>Rome - Italy</td>
            <td>Retail</td>
            <td>Commission / Concept Design</td>
          </tr>
          <tr>
            <td> </td>
            <td>Temporary Concert Hall</td>
            <td>Rome - Italy</td>
            <td>Culture</td>
            <td>Concept Design</td>
          </tr>
          <tr>
            <td> </td>
            <td>Office Space Interior Design - New Seat of the Lombardy Regional Government </td>
            <td>Milan - Italy</td>
            <td>Office</td>
            <td>Tender Competition (design/bid/build)</td>
          </tr>
          <tr>
            <td>2005</td>
            <td>Europan 8 - Urban Requalification</td>
            <td>Istanbul - Turkey</td>
            <td>Urban planning</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Natural Park Visitor Center, Kindergarten and Primary School</td>
            <td>Funes - Italy</td>
            <td>Education</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Coastal Area Development</td>
            <td>Latina - Italy</td>
            <td>Urban planning</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Requalification of Three Squares</td>
            <td>Benevento - Italy</td>
            <td>Urban planning</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Office and Data Center New Building in the Ministry of Defense headquarters</td>
            <td>Rome - Italy</td>
            <td>Office</td>
            <td>Concept Design</td>
          </tr>
          <tr>
            <td>2004</td>
            <td>JCD Floating Pearl Store</td>
            <td>Tokio - Japan</td>
            <td>Retail</td>
            <td>Competition / 2nd phase selected </td>
          </tr>
          <tr>
            <td> </td>
            <td>Requalifications of Rome�s Beachfront and Coastal Areas</td>
            <td>Ostia - Italy</td>
            <td>Urban planning</td>
            <td>Competition / 1st Prize</td>
          </tr>
          <tr>
            <td> </td>
            <td>40 Apartments Building and Sport Center</td>
            <td>Rome - Italy</td>
            <td>Mixed use</td>
            <td>Competition / 2nd Prize</td>
          </tr>
          <tr>
            <td> </td>
            <td>nMBA New Beaux-Art Museum</td>
            <td>Lausanne - Switzerland</td>
            <td>Culture</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>The Dubai Residence and Hotel Towers</td>
            <td>Dubai - UAE</td>
            <td>Mixed use</td>
            <td>Concept Design</td>
          </tr>
          <tr>
            <td> </td>
            <td>Shoes and Accessories Shop</td>
            <td>Rome - Italy</td>
            <td>Retail</td>
            <td>Commission / Concept Design</td>
          </tr>
          <tr>
            <td>2003</td>
            <td>Pedestrian and cycling Bridge </td>
            <td>Rome - Italy</td>
            <td>Infrastructure</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Temporary Pavillion for a Car Show</td>
            <td>Rome - Italy</td>
            <td>Retail</td>
            <td>Commission / Concept Design</td>
          </tr>
          <tr>
            <td> </td>
            <td>Belvedere Tower</td>
            <td>Castellammare di Stabia - Italy</td>
            <td>Infrastructure</td>
            <td>Concept Design</td>
          </tr>
        </tbody>
      </table>
    </div>
</div>
</div>
</body>
</html>

#apDiv2 {
    position: absolute;
    width: 698px;
    height: 299px;
    z-index: 1;
    left:50px;
    top: 117px;
    overflow: scroll;
Don't forget to fix your code errors. You're still missing a <body> tag in your markup.
Nancy O.

Why am i getting this page when i type in my wesite in the url when i used DW

@charset "utf-8"; body { font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; background: #4E5869; margin: 0; padding: 0; color: #000; } /* ~~ Element/tag selectors ~~ */ ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */ padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, p { margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */ padding-right: 15px; padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */ } a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */ border: none; } /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */ a:link { color:#414958; text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */ } a:visited { color: #4E5869; text-decoration: underline; } a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */ text-decoration: none; } /* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */ .container { width: 80%; max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */ min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */ background: #FFF; margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */ } /* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */ .header { background: #6F7D94; } /* ~~ These are the columns for the layout. ~~ 1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design. 2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin. 3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document. 4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source. */ .sidebar1 { float: left; width: 20%; background: #93A5C4; padding-bottom: 10px; } .content { padding: 10px 0; width: 80%; float: left; } /* ~~ This grouped selector gives the lists in the .content area space ~~ */ .content ul, .content ol { padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */ } /* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */ ul.nav { list-style: none; /* this removes the list marker */ border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */ margin-bottom: 15px; /* this creates the space between the navigation on the content below */ } ul.nav li { border-bottom: 1px solid #666; /* this creates the button separation */ } ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */ padding: 5px 5px 5px 15px; display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */ text-decoration: none; background: #8090AB; color: #000; } ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */ background: #6F7D94; color: #FFF; } /* ~~ The footer ~~ */ .footer { padding: 10px 0; background: #6F7D94; position: relative;/* this gives IE6 hasLayout to properly clear */ clear: both; /* this clear property forces the .container to understand where the columns end and contain them */ } /* ~~ miscellaneous float/clear classes ~~ */ .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */ float: right; margin-left: 8px; } .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */ float: left; margin-right: 8px; } .clearfloat { /* this class can be placed on a
or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */ clear:both; height:0; font-size: 1px; line-height: 0px; }

your home page to get into your Web site should be index.html (for Mac) or index.htm (on PC)
You can name it something other than index, but will be harder to find. when you create the subjects and link to them, they can can be named anything with the html extension Or if your using PHP end in .php. There is a Microsoft type asp or aspx but your hosting service has to set up using windows server system.
My hosting service use a Linux server normally but can convert Windows for a Fee. UNIX Linux has no concept of asp or aspx.
See this : https://skitch.com/pjonescet/8mnnx/dreamweaver

Problem with jquery slide show conflict with vertical navigation menu in Firefox & Chrome

Problem with jquery slide show conflict with vertical navigation menu in Firefox & Chrome. Works in IE. This is my first time trying to post a question - so please be kind. I am also not good with code and am finding css a real challenge after learning to design based on tables. I'm using CS5.
The "test" page with the slide show is: http://www.reardanwa.com/index-slides.html   The same page without the slide show is http://www.reardanwa.com/
I realize the images are not ideally sized - I'll fix those once I get the pages to function. Maybe I need a different slide show? I would prefer a widget that I can modify to required size & postition. Again - I'm not good at building with code from scratch.
The problem is the naviagation links that are directly next to the slide show do not work in Firefox of Chrome. They do work in IE.
I've read about using jQuery.noConflict(); code but can't figure out the correct way to use it in my case or whether that's even part of the solution. I know my code is not well organized as I have cobbled together from various sources in an attempt to format the page the way the client wants it. Also, FYI, I will eventually try to make the page work in Surreal CMS.
I've spent sevaral days over the last several weeks trying to solve sth slide show/navigation conflict - so any specific light you can shed will be much appreciated.
Thanks in advance.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reardan Area Chamber of Commerce</title>
<meta name="description" content="home page for Reardan Area Chamber of Commerce" />
<meta name="keywords" content="Reardan WA, chamber of commerce" </>
<script src="scripts/jquery-1.6.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.all.js" type="text/javascript"> </script>
<script type="text/xml">
</script>
<style type="text/css">
                              #slideshow {
                                  padding: 10px;
                                        margin:0;
                              #slideshow-caption{
                                        padding:0;
                                        margin:0;
                              #slideshow img, #slideshow div {
                                  padding: 10px;
                                  background-color: #EEE;
                                  margin: 0;
body {
          font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
          background: #004B8D;
          margin: 0;
          padding: 0;
          color: #000;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
          padding: 0;
          margin: 0;
h1, h2, h3, h4, h5, h6, p {
          margin-top: 0;           /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
           /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
.left
position:absolute;
left:0px;
.center
margin:auto;
width:95%;
.box
          position:relative;
          left:-90px;
          width:950px;
          height:350px;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
          z-index:1000;
.slide{
    position:absolute;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
          border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
          color: #42413C;
          text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
          color: #6E6C64;
          text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
          text-decoration: none;
/* ~~this fixed width container surrounds the other divs~~ */
.container {
          width: 960px;
          min-height:900px;
          padding:5px 0px 0px 0px;
          background: #E8F8FF;
          margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
          background: #E8F8FF;
          padding:10px 5px 0px 5px;
.sidebar1 {
          float: left;
          width: 225px;
          margin: 60px;
          color: #FFFF0D;
          background: #595FFF;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
          padding: 5px 5px 0px 5px;
    border: 3px solid #F7F723;
    z-index:-1;
.sidebar2 {
          float: left;
          width: 275px;
          color: #FFFF0D;
          text-align: left;
          background: #595FFF;
          padding-bottom: 10px;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    border: 3px solid #F7F723;
    z-index:2;
.sidebar3 {
          float: left;
          width: 275px;
          color: #FFFF0D;
          text-align: left;
          background: #595FFF;
          padding-bottom: 10px;
          border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    border: 3px solid #F7F723;
    z-index:3;
.content {
          padding: 0px 0px 0px 0px;
          width: 780px;
          float: left;
          background: #E8F8FF;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
          padding: 0px 15px 5px 10px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
          list-style: none; /* this removes the list marker */
          border-top: 0px solid #FFFF66; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
          margin-bottom: 50px; /* this creates the space between the navigation on the content below */
          font: Arial Black, Verdana, , Helvetica, sans-serif;
          font-size:1.3em;
          font-weight:bold;
          z-index:2;
ul.nav li {
          border-bottom: 0px solid #FFFF66; /* this creates the button separation */
          font: 120%/1.4 Arial Black, Verdana, , Helvetica, sans-serif;
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
          padding: 3px 0px 5px 0px;
          display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
          width: 185px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
          text-decoration: none;
          color: #FFFF0D;
          background: #595FFF;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
          background: #595FFF;
          font: 120%/1.4 Arial Black, Verdana, , Helvetica, sans-serif;
          color: #FFFFFF;
/* ~~ The footer ~~ */
.footer {
          padding: 10px 0;
          background: #595FFF;
          color: #FFFF0D;
          position: relative;/* this gives IE6 hasLayout to properly clear */
          clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
          float: right;
          margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
          float: left;
          margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
          clear:both;
          height:0;
          font-size: 1px;
          line-height: 0px;
-->
</style>
</head>
<body>
<div class="container">
<div class="header">
<a href="#"><img src="images/Chamber-Logo-2.gif" alt="Reardan Chamber Logo" width="187" height="163" hspace="10" vspace="5" align="top" /></a><img src="images/Reardan-Chamber-Title.gif" width="476" height="204" alt="Reardan Area Chamber of Commerce, Dedicated to Preserving and Enhancing Area Businesses" /><p></p>
<p style="color: #F00">This Site is under construction! Please pardon our dust as we create!</p>
</div>
<div class="sidebar1">
    <ul class="nav">
      <li><a href="about.html">About Us</a></li>
      <li><a href="history.html">Reardan History</a></li>
      <li><a href="activities.html">Activities</a></li>
      <li><a href="business.html">Business<br />
        Directory</a></li>
      <li><a href="about.html">Join the<br />
        Chamber</a></li>
       <li><a href="links.html">Links<br />
  <span style="font-size: 85%">Tourism</span><br />
      </a></li>
    </ul>
     </div>
<br />
<br />
<br />
<br />
<div class="box" +"slide">
<script type="text/javascript">
// BeginOAWidget_Instance_2559022: #slideshow
                           slideshowAddCaption=true;
$(window).load(function() {
$('#slideshow').cycle({
                    after:                              slideshowOnCycleAfter, //the function that is triggered after each transition
                    autostop:                              false,     // true to end slideshow after X transitions (where X == slide count)
                    fx:                                        'blindX',// name of transition effect
                    pause:                              false,     // true to enable pause on hover
                    randomizeEffects:          true, // valid when multiple effects are used; true to make the effect sequence random
                    speed:                              100, // speed of the transition (any valid fx speed value)
                    sync:                              true,     // true if in/out transitions should occur simultaneously
                    timeout:                    5000, // milliseconds between slide transitions (0 to disable auto advance)
                    fit:                              true,
                    height:                       '300px',
                    width:         '525px'   // container width (if the 'fit' option is true, the slides will be set to this width as well)
function slideshowOnCycleAfter() {
          if (slideshowAddCaption==true){
                              $('#slideshow-caption').html(this.title);
// EndOAWidget_Instance_2559022
</script>
<div id="slideshow">
    
    <img src="images/100_1537.jpeg" width="600" height="450" title="caption for image1" /> <img src="images/Parade-2011-2.jpg" width="300" height="225" title="caption for image2" /> <img src="images/100_1495.jpeg" width="600" height="450" title="caption for image3" />
    <div title="sample title"> Images for slide show will need to be re-sized to fit box to avoid distortion</div>
    <img src="images/beach4.jpg" width="200" height="200" title="caption for image4" /> <img src="images/beach5.jpg" width="200" height="200" title="caption for image5" /> </div>

<div id="slideshow-caption"></div></div>
<div class="sidebar2" "anotherClass editable"><p align="center"><strong>Chamber News</strong><br />
Local News item
<br />
Another New item</p>
<p align="center">lots of news this week<br />
    <br />
    <br />
    <br />
</p>
</div>
<div class="sidebar3" "anotherClass editable"><p align="center"><strong>Upcoming Events</strong></p>
<div align="center">    <a href="activities.html" style="color: #FFFF0D">Community wide yard sales</a><br />
    <br />
    <br />
    <br />
    <br />
</div>
</div>
<div class="content"><br />
<br />
</div>
<div class="footer">
        <p align="center"><span style="font-size: small">Reardan Area Chamber of Commerce</span><br />
          <span style="font-size: x-small">[email protected] - 509.796.2102</span><br />
        </p>
        
</div></body>
</html>

If you DO want the slideshow overlaping the navigation try the below css:
.sidebar1 {
    float: left;
    width: 225px;
    margin: 60px 0px 60px 60px;
    color: #FFFF0D;
    background: #595FFF;
    border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    padding: 5px 5px 0px 5px;
    border: 3px solid #F7F723;
.box {
float: left;
margin-left:-60px;
width:700px;
height:350px;
border-radius: 13px;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;

I was working on my spry menu bar and now my sidebar1 photo moves with the menu bar?

I was working on my spry menu bar, and getting really far with it thanks to GRAMPS, and all of a sudden I wanted to put padding of 30px top and 30 px bottom on the sidebar1 photo in the container and now all of a sudden the home.jpg photo in the sidebar moves when you hover over the menu bar.
I can noit for the life of me figure out what changed and somehow was so excited about my spry menu bar working that I did not save the most recent working page. Can anybody look at this with me and let me know what changed to mess the page up on me.
Thanks a million.
Ted
site is located here http://www.subzerorefrigeration.com
None of the links are working I have just been playing with the spy menu for weeks. I finally figured it out and do not belive the error is in the spry style sheets.
Here is the code for my page. I know I am working with a template. I really do not want to start over if a <div> tag is missing.
Any other suggestions would be appreciated.
<!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>Sub Zero Refrigeration Heating and Air Conditioning in Midlothian Illinois</title>
<style type="text/css">

</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="header">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="125" height="190" align="left" id="FlashID" title="Sub Zero Refrigeration "Subby" Logo">
      <param name="movie" value="Images/SubbyMovie.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="7.0.70.0" />
      
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      
      
      <object data="Images/SubbyMovie.swf" type="application/x-shockwave-flash" width="125" height="190" align="left">
        
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="7.0.70.0" />
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        
        <div>
          <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
        </div>
        
      </object>
      
    </object>
    <img src="Images/HeaderOriginal.jpg" alt="Sub Zero Refrigeration Heating and Air Condtioning Header Photo" width="834" height="190" align="left" /><br />
</div>
<div class="container" id="navbar"> </div>
<div class="namephoto">
<ul id="MenuBar" class="MenuBarHorizontal">
   <li><a class="MenuBarItem" href="#">Home</a></li>
   <li><a class="MenuBarItemSubmenu" href="#">About Us</a>
     <ul>
       <li><a href="#" class="MenuBarItemSubmenu">Our Staff</a>
         <ul>
           <li><a href="#">Bud Wagner</a></li>
           <li><a href="#">Tim Wagner</a></li>
           <li><a href="#">Dave Allen</a></li>
           <li><a href="#">Terry Burke</a></li>
           <li><a href="#">Larry Skarr</a></li>
           <li><a href="#">Niko Opla</a></li>
           <li><a href="#">Gina Ames</a></li>
           <li><a href="#">Laura Kane</a></li>
         </ul>
       </li>
       <li><a href="#">Our Service Area</a></li>
       <li><a href="#">Our Mission Statement</a></li>
       <li><a href="#" class="MenuBarItemSubmenu">Why Choose Sub Zero Refrigeration?</a>
         <ul>
           <li><a href="#">Our Review's</a></li>
           <li><a href="#">Our Competition's Reviews</a></li>
         </ul>
       </li>
       <li><a href="#" class="MenuBarItemSubmenu">Careers</a>
         <ul>
<li><a href="#">HVAC Technician</a></li>
<li><a href="#">HVAC/R Installer</a></li>
<li><a href="#">Commercial Refrigeration Technician</a></li>
         </ul>
       </li>
       <li><a href="#">Testimonials</a></li>
       <li><a href="#" class="MenuBarItemSubmenu">Easily Leave Us a Review</a>
         <ul>
           <li><a href="#">On "YAHOO"</a></li>
           <li><a href="#">On "YELP"</a></li>
           <li><a href="#">On "MERCHANT CIRCLE"</a></li>
           <li><a href="#">On "GOOGLE PLACES"</a></li>
         </ul>
       </li>
</ul>
   </li>
   <li><a class="MenuBarItemSubmenu" href="#">Repair</a>
     <ul>
<li><a href="#">Commercial Refrigeration</a></li>
<li><a href="#">Commercial Rooftop</a></li>
<li><a href="#">Commercial Ice Machine</a></li>
<li><a href="#">Air Conditioning </a></li>
<li><a href="#">Boiler</a></li>
<li><a href="#">Furnace</a></li>
<li><a href="#">Heat Pump</a></li>
<li><a href="#">Indoor Air Quality</a></li>
<li><a href="#">Schedule A Service Call</a></li>
     </ul>
</li>
   <li><a class="MenuBarItemSubmenu" href="#">Sales</a>
     <ul>
<li><a href="#">Commercial Refrigeration</a></li>
<li><a href="#">Commercial Rooftop</a></li>
<li><a href="#">Commercial Ice Machine</a></li>
<li><a href="#">Air Conditioning</a></li>
<li><a href="#">Boiler</a></li>
<li><a href="#">Furnace </a></li>
<li><a href="#">Heat Pump</a></li>
<li><a href="#">Indoor Air Quality</a></li>
<li><a href="#">Financing</a></li>
       <li><a href="#">Schedule a "FREE" Computerized ACCA MJ8 Equipment Replacement Estimate </a></li>
     </ul>
</li>
   <li><a class="MenuBarItemSubmenu" href="#">Maintenance</a>
     <ul>
<li><a href="#">Commercial Refrigeration Service Agreements</a></li>
<li><a href="#">Commercial Rooftop Service Agreements</a></li>
<li><a href="#">Commercial Ice Machine Service Agreements</a></li>
<li><a href="#">Residential Air Conditioning Service Agreements</a></li>
<li><a href="#">Residential Boiler Service Agreements</a></li>
<li><a href="#">Residential Furnace and IAQ Service Agreements</a></li>
<li><a href="#">Heat Pump Service Agreements</a></li>
</ul>
</li>
   <li><a class="MenuBarItemSubmenu" href="#">Products</a>
     <ul>
       <li><a href="#" class="MenuBarItemSubmenu">Commercial Refrigeration</a>
         <ul>
           <li><a href="#">Beverage Air</a></li>
           <li><a href="#">Beacon Smart Controller</a></li>
           <li><a href="#">Continental</a></li>
           <li><a href="#">Crown Tonka Walk Ins</a></li>
           <li><a href="#">Delfield</a></li>
           <li><a href="#">Heatcraft Refrigeration</a></li>
           <li><a href="#">Hoshizaki Refrigeration</a></li>
<li><a href="#">International Cold Storage</a></li>
<li><a href="#">Kelvinator</a></li>
<li><a href="#">Kolpak</a></li>
<li><a href="#">Larkin Refrigeration</a></li>
<li><a href="#">Perlik Bar and Beverage Equipment</a></li>
<li><a href="#">True Refrigeration</a></li>
         </ul>
       </li>
       <li><a href="#" class="MenuBarItemSubmenu">Commercial Rooftop</a>
         <ul>
           <li><a href="#">Arcoaire</a></li>
           <li><a href="#">American Standard</a></li>
         </ul>
       </li>
       <li><a href="#" class="MenuBarItemSubmenu">Commercial Ice Machine</a>
         <ul>
           <li><a href="#">Hoshizaki Ice Machines</a></li>
           <li><a href="#">Manitowoc Ice Machines</a></li>
           <li><a href="#">Scotsman Ice Machines</a></li>
         </ul>
       </li>
       <li><a href="#" class="MenuBarItemSubmenu">Air Conditioning</a>
         <ul>
           <li><a href="html/subzero/arcoaireaircondioning.html">Arcoaire</a></li>
           <li><a href="html/subzero/americanstandardairconditioning.html">American Standard</a></li>
           <li><a href="html/subzero/mitsubishiairconditioners.html">Mitsubishi</a></li>
         </ul>
     </li>
       <li><a href="#" class="MenuBarItemSubmenu">Boiler </a>
         <ul>
           <li><a href="#">Weil McLain Residential</a></li>
           <li><a href="#">Weil McLain Commercial</a></li>
         </ul>
   </li>
       <li><a href="#" class="MenuBarItemSubmenu">Furnace </a>
         <ul>
           <li><a href="#">Arcoaire</a></li>
           <li><a href="#">American Standard</a></li>
           <li><a href="#">Mitsubishi</a></li>
         </ul>
   </li>
       <li><a href="#" class="MenuBarItemSubmenu">Heat Pump </a>
         <ul>
           <li><a href="#">Arcoaire</a></li>
           <li><a href="#">American Standard</a></li>
           <li><a href="#">Mitsubishi</a></li>
         </ul>
   </li>
       <li><a href="#" class="MenuBarItemSubmenu">Indoor Air Quality</a>
         <ul>
           <li><a href="#">Aprilaire Humidifiers</a></li>
           <li><a href="#">Honeywell Electronic Air Cleaners</a></li>
           <li><a href="#">Honeywell Thermostats</a></li>
         </ul>
   </li>
     </ul>
</li>
   <li><a class="MenuBarItemSubmenu" href="#">Job Photos</a>
     <ul>
<li><a href="#">Commercial Refrigeration</a></li>
<li><a href="#">Commercial Rooftop</a></li>
<li><a href="#">Commercial Ice Machine</a></li>
<li><a href="#">Air Conditioning</a></li>
<li><a href="#">Boiler</a></li>
<li><a href="#">Furnace</a></li>
<li><a href="#">Heat Pump</a></li>
<li><a href="#">Indoor Air Quality</a></li>
     </ul>
   </li>
   <li><a class="MenuBarItemSubmenu" href="#">Cool Savings</a>
     <ul>
       <li><a href="#">Monthly Specials</a></li>
       <li><a href="#">Manufacturers Rebates</a></li>
       <li><a href="#">Utility Rebates</a></li>
       <li><a href="#">Website Coupons</a></li>
<li><a href="#">Customer Referral Program</a></li>
     </ul>
   </li>
   <li><a class="MenuBarItemSubmenu" href="#">Social</a>
     <ul>
       <li><a href="#">"LIKE" Us on Facebook</a></li>
       <li><a href="#">"FOLLOW" Us on Twitter</a></li>
<li><a href="#">Facebook Disclaimer</a></li>
     </ul>
</li>
<li><a class="MenuBarItem" href="#">Contact Us</a> </li>
</ul>
<p><br />
</p>
<div class="sidebar1"><img src="Images/home.jpg" alt="Home Page Photo" width="105" height="240" /></div></div>
<div class="content">
    <h1>Instructions</h1>
    <p>Be aware that the CSS for these layouts is heavily commented. If you do most of your work in Design view, have a peek at the code to get tips on working with the CSS for the fixed layouts. You can remove these comments before you launch your site. To learn more about the techniques used in these CSS Layouts, read this article at Adobe's Developer Center - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.</p>
    <h1>Clearing Method</h1>
    <p>Because all the columns are floated, this layout uses a clear:both declaration in the .footer rule. This clearing technique forces the .container to understand where the columns end in order to show any borders or background colors you place on the .container. If your design requires you to remove the .footer from the .container, you'll need to use a different clearing method. The most reliable will be to add a <br class="clearfloat" /> or <div class="clearfloat"></div> after your final floated column (but before the .container closes). This will have the same clearing effect.</p>
    <h3>Logo Replacement</h3>
    <p>An image placeholder was used in this layout in the .header where you'll likely want to place a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>
    <p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>
    <p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
    <h4>Backgrounds</h4>
    <p>By nature, the background color on any div will only show for the length of the content. This means if you're using a background color or border to create the look of a side column, it won't extend all the way to the footer but will stop when the content ends. If the .content div will always contain more content, you can place a border on the .content div to divide it from the column.</p>
    </div>
<div class="footer">
    <table width="960" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th width="102" scope="col"> </th>
        <th width="101" scope="col"> </th>
        <th width="106" scope="col"> </th>
        <th width="120" scope="col"> </th>
        <th width="172" scope="col"> </th>
        <th width="120" scope="col"> </th>
        <th width="103" scope="col"> </th>
        <th width="136" scope="col"> </th>
      </tr>
      <tr>
        <td colspan="2"><img src="Images/van.jpg" alt="Sub Zero Refrigeration Heating and Air Conditioning Service Van" width="243" height="109" align="left" /></td>
        <td colspan="6"><img src="Images/footer_right.jpg" width="717" height="109" alt="Footer" /></td>
      </tr>
    </table>
</div>
<div class="footer2">
    <div class="footer">
    <table width="960" height="62" border="1" align="center" cellspacing="8">
      <tr valign="middle">
        <th width="234" scope="col">Schedule a Service Call</th>
        <th width="247" scope="col"><p>Schedule Free New Equipment Replacement Estimate</p></th>
        <th width="99" scope="col"><a href="https://www.acca.org/consumer/find-a-contractor" target="_blank"><img src="Images/acca.gif" width="85" height="48" alt="ACCA Sub Zero Refrigeration" /></a></th>
        <th width="94" scope="col"><a href="http://www.bbb.org/chicago/business-reviews/heating-and-air-conditioning/sub-zero-refriger ation-and-a-c-in-midlothian-il-7695" target="_blank"><img src="Images/BBB.png" width="87" height="48" alt="Sub Zero Refrigeration BBB A+ Rating" /></a></th>
        <th width="84" scope="col"><a href="http://www.natex.org/" target="_blank"><img src="Images/nate.png" width="76" height="74" alt="NATE Sub Zero Refrigeration" /></a></th>
        <th width="83" scope="col"><a href="http://www.twitter.com/subzerorefrig" target="_new"><img src="Images/twitter_logo.jpg" width="69" height="69" alt="Follow us on Twitter" /></a></th>
        <th width="143" scope="col"><a href="https://www.facebook.com/subzerorefrig" target="_new"><img src="Images/facebook.png" width="81" height="81" alt="" /></a></th>
      </tr>
    </table>
    </div>
    <div class="footer3" id="footer3">
      <div class="footer">
        <table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <th width="960" style="background-color: #B7E3EA; font-size: 10px; font-family: Arial, Helvetica, sans-serif" scope="col">Home | About Us | Repair | Sales | Maintenance | Products | Our Job Photos | Cool Savings | Social | Contact Us | Schedule Free New Equipment Estimate | Schedule Service | Site Map<br />
            Search Sub Zero Refrigeration Heating and Air Conditioning<br />            </th>
          </tr>
        </table>
        <p>      Copyright 1999-2013 | Last updated on
          February 19, 2012 | Web designer's - Ted Wagner and Cherie White Cachampis      </p>
      </div>
    </div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
swfobject.registerObject("FlashID");
</script>
</body>
</html>

I seem to have fixed it by putting <div class="clearfloat"></div> after the navigation bar?

Spry Menu Bar Horiz -- another not rendering in IE8

please believe me that i've searched without success in finding a resolution for this problem.
for Right-Aligned Spry Horizontal Menu bar, IE8 incorrectly renders it on the left after prompting for running scripts or ActiveX controls.
here's the css file: THE ONLY THING CHANGED WAS THE FLOAT DIRECTION in ul.MenuBarHorizontal li (left to right)
.... so what am i missing in getting a horizontal spry menu on the right side of page?
@charset "UTF-8";
/* 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
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 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: 8em;
float: right;
/* 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-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
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: 8.2em;
/* 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: #333;
text-decoration: none;
/* 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;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #33C;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
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;
created page from 1-column liquid layout:
<!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>Untitled Document</title>
<style type="text/css">

</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="header"><a href="#"><img src="" alt="Insert Logo Here" name="Insert_logo" width="20%" height="90" id="Insert_logo" style="background: #8090AB; display:block;" /></a>
    </div>
<ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
        <ul>
          <li><a href="#">Item 1.1</a></li>
          <li><a href="#">Item 1.2</a></li>
          <li><a href="#">Item 1.3</a></li>
        </ul>
      </li>
      <li><a href="#">Item 2</a></li>
      <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
        <ul>
          <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
            <ul>
              <li><a href="#">Item 3.1.1</a></li>
              <li><a href="#">Item 3.1.2</a></li>
            </ul>
          </li>
          <li><a href="#">Item 3.2</a></li>
          <li><a href="#">Item 3.3</a></li>
        </ul>
      </li>
      <li><a href="#">Item 4</a></li>
</ul>
<div class="content">
    <h1>Instructions</h1>
    <p>Be aware that the CSS for these layouts is heavily commented. If you do most of your work in Design view, have a peek at the code to get tips on working with the CSS for the liquid layouts. You can remove these comments before you launch your site. To learn more about the techniques used in these CSS Layouts, read this article at Adobe's Developer Center - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.</p>
    <h2>Layout</h2>
    <p>Since this is a one-column layout, the .content is not floated. </p>
    <h3>Logo Replacement</h3>
    <p>An image placeholder was used in this layout in the .header where you'll likely want to place a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>
    <p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>
    <p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
</div>
<div class="footer">
    <p>Footer</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>

eliz926 wrote:
please believe me that i've searched without success in finding a resolution for this problem.
for Right-Aligned Spry Horizontal Menu bar, IE8 incorrectly renders it on the left after prompting for running scripts or ActiveX controls.
here's the css file: THE ONLY THING CHANGED WAS THE FLOAT DIRECTION in ul.MenuBarHorizontal li (left to right)
.... so what am i missing in getting a horizontal spry menu on the right side of page?
When you right float the container (LI) for each menu item, some browsers will do exactly that, float the first menu item to the right, place the second menu item left to that and so forth. Other browsers (IE) will not react to a right float of the container (LI).
The only way to right float the complete menubar is to use the complete container (UL). As with any float, the width has to be specified.
Hence in your case,
change ul.MenuBarHorizontal li back to left float
add a width (32em) and a right float to ul.MenuBarHorizontal
Gramps

Mirror my I-pad ?

Similar Messages

Maybe you are looking for