AP Div alternative?

Hi all
I'm a newbie to DW and website development.
I built my first ever website using AP Divs. All good.
But then wanted to include a footer that would always be at the bottom of the site (when there's not much content to be pushed to the bottom of the browser, and when there's more content than fits the window, to be at the end/bottom of the site).
I tried a few CSS an HTML codes but they didn't work.
After some online research I discovered that this is due to AP Divs.
Can anyone tell me what's the alternative to AP Divs? Apparently, they're not supposed to be used a lot in the first place? And how to achieve absolute positioning without divs?
My apologies if this is a silly question.
Many thanks for help!

Welcome to DW and the world of web site development.
I believe every web designer should begin with plain content in an unstyled HTML document (yeah, I know it's ugly). And the content should flow naturally & logically from top of page to bottom of page.
Then using default CSS positioning (which is no positioning at all), create Div IDs for main page regions such as your #header, #menu, #sidebars, #MainContent and #footer.
Take a look at this basic 1-column layout with floated boxes.
http://alt-web.com/TEMPLATES/Basic-1-col-fixed.html
Then using CSS width and margins, you layout the page position (either flush left or centered on screen) and establish boundaries for the various Div IDs. CSS margins, text-align and floats are used to position elements within divisions.
DW will punish you if you don't have a working knowledge of basic X/HTML & CSS code. Following are some links to get you started.
HTML & CSS Tutorials - http://w3schools.com/
Creating your first website in DW CS4 -
http://www.adobe.com/devnet/dreamweaver/articles/first_cs4_website_pt1.html
If you get stuck on anything, post back with specific questions.
Have Fun!
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Similar Messages

Alternative to f:verbatim to use custom DIV classes?

I have some pages with panelCustomizable facets containing simple HTML like so:
<f:verbatim>
<div class="tableClass">
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><h2>TABLE TITLE</h2></td>
</tr>
</f:verbatim>
At runtime, in "*Edit mode*", when I try to "*Add Content*" - the page hangs with a message about "stopping long-running script" which point to core11.1.1.3.js line 4569
By some trial and elimination - i think this is due to usage of f:verbatim tag- so whats the alternative?
I could use included HTML snippets stored off the file system (as shown in Avitek sample) but the data will eventually be dynamic and coming from data controls - to which i want to add some formatted text

Yannick - you are so right.
I once added some plain text in Design view which automatically got wrapped in <f:verbatim> and I assumed all plain HTML needed it.
Now this leads me to new exceptions which I will try to fix
java.lang.NullPointerException
     at oracle.jbo.uicli.binding.JUMethodIteratorDef$JUMethodIteratorBinding.hasRefreshParametersChanged(JUMethodIteratorDef.java:541)
     at oracle.jbo.uicli.binding.JUMethodIteratorDef$JUMethodIteratorBinding.executeQueryIfNeeded(JUMethodIteratorDef.java:334)
     at oracle.adf.model.binding.DCBindingContainer.internalRefreshControl(DCBindingContainer.java:3185)
     at oracle.adf.model.binding.DCBindingContainer.refresh(DCBindingContainer.java:2845)
     at oracle.adf.controller.internal.binding.TaskFlowRegionController.doRegionRefresh(TaskFlowRegionController.java:227)
     at oracle.adf.controller.internal.binding.TaskFlowRegionController.refreshRegion(TaskFlowRegionController.java:119)
     at oracle.adf.model.binding.DCBindingContainer.internalRefreshControl(DCBindingContainer.java:3143)
     at oracle.adf.model.binding.DCBindingContainer.refresh(DCBindingContainer.java:2845)
     at oracle.adf.controller.internal.binding.TaskFlowRegionController.doRegionRefresh(TaskFlowRegionController.java:227)
     at oracle.adf.controller.internal.binding.TaskFlowRegionController.refreshRegion(TaskFlowRegionController.java:119)
Edited by: new_to_webcenter on 24-Jan-2011 02:42

Alternative to AP Divs?

If AP Divs are such a bad idea in Dreamweaver CC because they're not compatible with different sized monitors, what's the alternative? How can I place an image without them? Are AP tables ok?

Each Absolute-Positioned (AP) Div you draw in Adobe Dreamweaver CS6 is listed automatically in the AP Elements panel (choose Window→AP Elements to display it). The AP Elements panel can help you select, hide, and show any AP Divs on the page. This panel is handy when you have lots of AP Divs on the page and want to navigate among them accurately.
Most of all, because you can modify the properties for any AP Div from its corresponding ID style, the panel helps you figure out which ID style belongs to an AP Div.
The AP Elements panel is often grouped with the CSS Styles panel, just in case you’re looking for it.
To modify a box (AP Div), follow these steps:
Choose Window→AP Elements to open the AP Elements panel.
In the panel, locate and select apDiv1 to highlight it on the page.
The Property inspector displays its size and position in addition to other properties.
Using the text boxes in the Property inspector, change the box width by entering a number into the W field and change the box height by entering a number in the H field.
Click the swatch next to Bg Color and choose a color from the pop-up Swatches panel to set a background color for the box.
For additional properties, such as border or padding, add them in the CSS Styles panel.
If the CSS Styles panel isn’t already visible, open it by choosing Window→CSS Styles.
Double-click the #apDiv1 ID style that controls the box.
The CSS Rule Definition dialog box appears.
Select the Border category from the left to change the border.
In the Style column, use the Top drop-down list to set a border style (such as Solid) to all four sides.
Use the Top drop-down list under the Width category to select a border thickness (for example, medium) for all four sides. Use the topmost Color Picker under the Color column to assign a border color to all four sides.
To assign different values to any or all sides for style, width, or color, deselect the Same for All check box under their respective columns.
In the Box category on the left, under Padding, set the padding for all four sides of the box to the thickness you want (for example, enter 5 px in the text boxes).
Click OK to exit the panel and apply the changes.
You see how the CSS properties you applied affect the apDiv1 box on the page.

Alternative Network Hard Dives

I'm looking for a recommendation for an external hard drive I can share with another computer.
I know of many NAS drives to connect wirelessly, but I'd like both computers to be connected by firewire/usb.
Any recommendations?
Thanks.

FiOS does not use a modem. FiOS provides a router. Further proof is that you have multiple computers connected wirelessly.
If your Macs are connected wirelessly they would be sharing the drive wirelessly.
What's the best way to do this with or without time capsule?
Absolute fastest way is to get a FireWire drive. Connect it to one Mac and copy files. Then disconnect it from that Mac and connect it to the 2nd Mac to transfer files.
The easiest way is to use a Time Capsule OR connect a USB or FireWire drive to one of the computers. Share the drive from that computer. The other computer(s) on the network can see and use the drive.

How do I create an auto page height with nested divs

I am using DW4 to create a website and am using nested divs to create the auto widths for the browsers
How do I make the height auto adjust for differing amounts of content? Different pages have different amounts of content so I want that height to auto flex with it if I can. Currently I give the Container a fixed height, but that is limiting ...
Here is my code so far - have not assigned specific style sheets yet
<!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 id="Container">
<div id="Header">
<div class="largewhite" id="towncarheader">Northwest Town Car Services</div>
<div class="redtext" id="phone">
    <div align="right"><strong>Reservations | 503-702-5999</strong></div>
</div>
<img src="images/head.jpg" width="756" height="150" alt="BLue header" />
</div>
<div id="bodycontent">
    <p>Portland Airport Shuttle Services <br />
      Transportation to and from PDX International airport<br />
      How you make your next trip to Portland Airport could be the best thing about your journey.<br />
      By choosing Northwest Town Car’s Airport Shuttle Service, you will have chosen a stress free solution for your trip, both there and back. <br />
      First time customers: <br />
      When you reserve your first trip to PDX Airport receive 20% discount when paying by cash or check. | 10% if you pay by credit card. <br />
      Our service area covers:<br />
      Greater Portland areas<br />
      Beaverton<br />
      Hillsboro<br />
      Tigard<br />
      Tualatin<br />
      Lake Oswego<br />
      West Linn <br />
      View a complete list of our Locations and Rates & Services <br />
      Call for your reservation - 503-702-5999 | Or make your Shuttle reservation online.<br />
      We take care of the details.<br />
      Our luxury sedans provide the best alternative transportation solutions for every busy traveller. Whether you are taking a business or a personal trip, we will take care of the details.<br />
      We always arrive at least 5 minutes early at your doorstep. We make certain you have plenty of time so you can check in, check your luggage.<br />
    </p>
    <p>Our chauffeurs are experienced and will make sure they have your returning flight details so we can track your flight. We know if your plane will be delayed or a little early. Knowing that we will be there waiting for you when you arrive, no matter what time it is, gives you a bit more peace of mind.<br />
      Getting you to your destination safely is our priority and we pride ourselves in knowing the area well and providing the best routes available.<br />
      Our mark of success is your satisfaction.<br />
      Northwest Town Car opened its doors in 1998 and is proud to continue providing superior sedan and town car transportation choices to our customers.<br />
      Our Vehicles<br />
      We offer a variety of vehicles to meet your business and personal needs.<br />
      Our Fleet includes Town Cars, SUV’s, and Mini Vans.<br />
      Additional Services<br />
      Business / Executive events<br />
      We work with local corporations, businesses and hotels across town. Our areas of coverage include:<br />
      Westside<br />
      Beaverton<br />
      Tigard<br />
      Tualatin<br />
      Lake Oswego<br />
      Downtown Portland<br />
      Personal events<br />
      No matter the occasion we can get you to your destination safely and in style.<br />
      Weddings<br />
      Parties<br />
      Personal night on the town<br />
      Tours including Wine tours</p>
</div>
<div class="redtext" id="footer"> © 2010 Northwest Town Car Service</div>
<div id="navbar">
    <ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Home</a></li>
      <li><a href="#">Fleet</a>      </li>
      <li><a href="#">Rates | Services</a></li>
      <li><a href="#">Testimonials</a></li>
      <li><a href="#">Resource Links</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
</div>
<p> </p>
<p> </p>
</div>
<script type="text/javascript">

</script>
</body>
</html>
Thanks Kathryn

#1 Don't use the Height property on any wrappers or containers that will hold text. Height is a restriction in every browser except IE -- which treats height as if it were min-height. People need to be able to increase text size in browser (View, Zoom , Text only) without causing damage to the page.
#2 Why are you using absolute positioning? Don't you realize this layout method is a huge cross to bare?
Here is why:
http://apptools.com/examples/pagelayout101.php
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Need help with overlapping divs!

Hey everyone,
I'm working on another website and I have come up against a common problem for newbie designers from what I hear, the dreaded overlapping div problem! I have a 2 column fixed layout with a floating left div. My left div has my nav bar and various images. When my main content div has more content than the left floating div, the left div border does not reach the footer! Until now, I have gotten by with just hitting return in my left column div until it reaches the footer. I am sure it is not the right way to do it but it has worked so far. The problem is, now one of the pages has the left column div overlapping onto the footer! I did some reading and I am guessing it involves either the box properties or clear float which I am not too familiar with.
Any advice would be stellar! I know this is just another stumbling block to get over but I would feel so much better if I was doing it the right way.
Here are screens of my issue,
And here is my code for the page in question.
<!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" />
<link rel="shortcut icon" href="http://www.xldesignsonline.com/fchi/favicon.ico">
<title>Full Circle Home Inspections</title>
<link href="_css/main.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body class="twoColFixLtHdr">
<div id="container">
<div id="header">
    <h1>
</h1></div>
<div id="sidebar1">
    <h3 align="center">
      <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="200" height="620">
        <param name="movie" value="_assets/menu.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="6.0.65.0" />
        
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        
        
        <object type="application/x-shockwave-flash" data="_assets/menu.swf" width="200" height="620">
          
          <param name="quality" value="high" />
          <param name="wmode" value="opaque" />
          <param name="swfversion" value="6.0.65.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>
    </h3>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"><a href="http://www.nachi.org/"><img src="_images/interNACHI.png" alt="InterNACHI" width="190" height="164" border="0" /></a></p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"><a href="http://www.nachi.org/education.htm"><img src="_images/education-seal-small.gif" alt="education seal" width="150" height="150" border="0" /></a></p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"><a href="http://www.iac2.org/"><img src="_images/iac2-all.gif" width="174" height="126" alt="IAC" /></a></p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"><a href="http://www.inspectopia.com/profile.b.507.r.16181.u.03bcfb.html"><img src="_images/logo_top.png" alt="Inspectopedia" width="190" height="45" border="0" /></a></p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"><a href="http://www.energystar.gov/"><img src="_images/img_energy_star_partner.jpg" width="160" height="191" alt="Energy Star Partner" /></a></p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"><a href="http://cjenterprises.myshaklee.com/us/en/welcome.html#"><img src="_images/Shaklee.gif" alt="Shaklee" width="119" height="160" border="0" /></a></p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"><a href="http://activerain.com/"><img src="_images/ARLogoSmall.gif" alt="Active Rain" width="135" height="36" border="0" /></a></p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"><a href="http://www.insiderpages.com/b/15246780294"><img src="_images/insider_pages.gif" alt="Insider Pages" width="89" height="37" border="0" /></a></p>
<p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center"> </p>
</div>
<div id="mainContent">
    <h2>Radon Gas Inspection</h2>
    <div id="paragraphFloat">
      <h5>What Is Radon?</h5>
      <p> Radon is a cancer causing radioactive gas. You cannot see, smell or taste radon, but it may be a problem in your home. The Surgeon General has warned that radon is the second leading cause of lung cancer in the United States today. </p>
      <div id="apDiv1">
    <div align="center"><a href="http://www.epa.gov/radon/video/epa-epu.wmv"><img src="_images/psa_revised.jpg" alt="What Is Radon?" width="200" height="172" border="0" /></a></div></div></div>
    <p>If you smoke and your home has high radon levels, you're at high risk for developing lung cancer. Some scientific studies of radon exposure indicate that children may be more sensitive to radon. This may be due to their higher respiration rate and their rapidly dividing cells, which may be more vulnerable to radiation damage. </p>
<p> </p>
    <h5>Why Is It Dangerous?</h5>
<p> The U.S. Environmental Protection Agency (US EPA) and the Surgeon General's Office have estimated that as many as 20,000 lung cancer deaths are caused each year by radon. Radon is the second leading cause of lung cancer. Radon-induced lung cancer costs the United States over $2 billion dollars per year in both direct and indirect health care costs.</p>
<p>According to the US EPA, nearly 1 in 3 homes checked in seven states and on three Indian lands had screening levels over 4 pCi/L, the EPA's recommended action level for radon exposure.</p>
<p>The alpha radiation emitted by radon is the same alpha radiation emitted by other alpha generating radiation sources such as plutonium.</p>
<p>A family whose home has radon levels of 4 pCi/l is exposed to approximately 35 times as much radiation as the Nuclear Regulatory Commission would allow if that family was standing next to the fence of a radioactive waste site. (25 mrem limit, 800 mrem exposure)</p>
<p> At the 4 pCi/l EPA action guideline level, radon carries approximately 1000 times the risk of death as any other EPA carcinogen. It is important to note that the action level is not a safe level, as there are no "safe" levels of radon gas.</p>
<p> </p>
<h5>How Does It Get Into My Home?</h5>
<p> Radon is a radioactive gas. It comes from the natural decay of uranium that is found in nearly all soils. It typically moves up through the ground to the air above and into your home through cracks and other holes in the foundation. Your home traps radon inside, where it can build up. Any home may have a radon problem. This means new and old homes, well-sealed and drafty homes, and homes with or without basements.</p>
<p> Radon from soil gas is the main cause of radon problems. Sometimes radon enters the home through well water. In a small number of homes, the building materials can give off radon, too. However, building materials rarely cause radon problems by themselves.</p>
<p><strong>Radon gets in through:</strong></p>
<ul>
<li>Cracks in solid floors
    <div id="apDiv3">
      <div align="center"><a href="http://www.fullcirclehomeinspections.com/_assets/CitizensGuideRadon.pdf"><img src="_images/citguidecoverradon.jpg" alt="Guide To Radon" width="154" height="200" border="0" /></a></div>
    </div>
</li>
<li>Construction joints</li>
<li>Cracks in walls</li>
<li>Gaps in suspended floors</li>
<li>Gaps around service pipes</li>
<li>Cavities inside walls</li>
<li>Surrounding water supply</li>
</ul>
<p> </p>
<h5>What Can I Do?</h5>
<p> Radon is a national environmental health problem. Elevated radon levels have been discovered in every state. The US EPA estimates that as many as 8 million homes throughout the country have elevated levels of radon. Current state surveys show that 1 home in 5 has elevated radon levels.</p>
<p> Testing is the only way to know your home's radon levels. There are no immediate symptoms that will alert you to the presence of radon. It typically takes years of exposure before any problems surface. </p>
<p>Let <strong>Full Circle Home Inspections</strong> ensure your family and your home are protected and safe from radon exposure!</p>
<p> </p>
<h5>Radon Myths</h5>
<p><strong><em>MYTH:</em> Scientists are not sure that radon really is a problem.</strong></p>
<blockquote>
<p><strong><em>FACT:</em></strong> Although some scientists dispute the precise number of deaths due to radon, all the major health organizations (like the Centers for Disease Control and Prevention, the American Lung Association and the American Medical Association) agree with estimates that radon causes thousands of preventable lung cancer deaths every year. This is especially true among smokers, since the risk to smokers is much greater than to non-smokers.</p>
</blockquote>
<p><strong><em>MYTH:</em> Radon testing is difficult, time-consuming and expensive.</strong></p>
<blockquote>
<p><strong><em>FACT:</em></strong> Radon testing is easy. You can test your home yourself or hire a qualified radon test company. Either approach takes only a small amount of time and effort.</p>
</blockquote>
<p><strong><em>MYTH:</em> Homes with radon problems can't be fixed.</strong></p>
<blockquote>
<p><strong><em>FACT:</em></strong> There are simple solutions to radon problems in homes. Hundreds of thousands of homeowners have already fixed radon problems in their homes. Most homes can be fixed for about the same cost as other common home repairs; check with one or more qualified mitigators. Call your <a href="http://www.epa.gov/radon/whereyoulive.html">state radon office</a> for help in identifying qualified mitigation contractors.</p>
</blockquote>
<p><strong><em>MYTH:</em> Radon affects only certain kinds of homes.</strong></p>
<blockquote>
<p><strong><em>FACT: </em></strong>House construction can affect radon levels. However, radon can be a problem in homes of all types: old homes, new homes, drafty homes, insulated homes, homes with basements, and homes without basements. Local geology, construction materials, and how the home was built are among the factors that can affect radon levels in homes.</p>
</blockquote>
<p><strong><em>MYTH:</em> Radon is only a problem in certain parts of the country.</strong></p>
<blockquote>
<p><strong><em>FACT:</em></strong> High radon levels have been found in every state. Radon problems do vary from area to area, but the only way to know your radon level is to test.</p>
</blockquote>
<p><strong><em>MYTH:</em> A neighbor's test result is a good indication of whether your home has a problem.</strong></p>
<blockquote>
<p><strong><em>FACT:</em></strong> It's not. Radon levels can vary greatly from home to home. The only way to know if your home has a radon problem is to test it.</p>
</blockquote>
<p><strong><em>MYTH:</em> Everyone should test their water for radon.</strong></p>
<blockquote>
<p><strong><em>FACT:</em></strong> Although radon gets into some homes through water, it is important to first test the air in the home for radon. If your water comes from a public water supply that uses ground water, call your water supplier. If high radon levels are found and the home has a private well, call the Safe Drinking Water Hotline at 1-800-426-4791 for information on testing your water.</p>
</blockquote>
<p><strong><em>MYTH:</em> It's difficult to sell homes where radon problems have been discovered.</strong></p>
<blockquote>
<p><strong><em>FACT:</em></strong> Where radon problems have been fixed, home sales have not been blocked or frustrated. The added protection is some times a good selling point.</p>
</blockquote>
<p><strong><em>MYTH:</em> I've lived in my home for so long, it doesn't make sense to take action now.</strong></p>
<blockquote>
<p><strong><em>FACT: </em></strong>You will reduce your risk of lung cancer when you reduce radon levels, even if you've lived with a radon problem for a long time.</p>
</blockquote>
<p><strong><em>MYTH:</em> Short-term tests can't be used for making a decision about whether to fix your home.</strong></p>
<blockquote>
<p><strong><em>FACT:</em> </strong>A short-term test, followed by a second short-term test* can be used to decide whether to fix your home. However, the closer the average of your two short-term tests is to 4 pCi/L, the less certain you can be about whether your year-round average is above or below that level. Keep in mind that radon levels below 4 pCi/L still pose some risk. Radon levels can be reduced in most homes to 2 pCi/L or below.</p>
<p> </p>
<p> </p>
<p> </p>
<p align="center"><img src="_images/CA-3.jpg" width="520" height="207" /></p>
</blockquote>
</div>
<div id="footer">
    <p align="center"><strong>© 2009 XL Designs Online - All Rights Reserved </strong></p>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
And here is my CSS if needed,
@charset "utf-8";
body {
     font: 100% Verdana, Arial, Helvetica, sans-serif;
     background: #666666;
     margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
     padding: 0;
     text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
     color: #000000;
.twoColFixLtHdr #container {
     width: 950px; /* the auto margins (in conjunction with a width) center the page */
     border: 1px solid #000000;
     text-align: left; /* this overrides the text-align: center on the body element. */
     margin-top: 20px;
     margin-right: auto;
     margin-bottom: 20px;
     margin-left: auto;
     background-color: #557050;
.twoColFixLtHdr #header {
     border-bottom: 1px solid #000000;
     height: 250px;
     background-color: #DDDDDD;
     padding-top: 0;
     padding-right: 10px;
     padding-bottom: 0;
     padding-left: 20px;
     background-image: url(../_images/homebanner1.png);
.twoColFixLtHdr #header h1 {
     margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
     padding: 20px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
     text-align: center;
     font-size: 48px;
     font-family: Tahoma, Geneva, sans-serif;
     color: #000;
.twoColFixLtHdr #sidebar1 {
     float: left; /* since this element is floated, a width must be given */
     width: 200px;
     border-right: 1px solid #000000;
     background-color: #557050;
     padding-top: 0px;
     padding-right: 10px;
     padding-bottom: 15px;
     padding-left: 10px;
.twoColFixLtHdr #mainContent {
     margin-top: 0;
     margin-right: 0;
     margin-bottom: 0;
     margin-left: 250px;
     padding-top: 0;
     padding-right: 20px;
     padding-bottom: 0;
     padding-left: 20px;
     text-align: left;
.twoColFixLtHdr #mainContent h1 {
     font-size: 48px;
     font-family: "Arial Rounded MT Bold";
     font-weight: bold;
.twoColFixLtHdr #mainContent h2 {
     font-family: "Arial Rounded MT Bold";
     font-size: 32px;
.twoColFixLtHdr #mainContent h3 {
     font-family: Georgia, "Times New Roman", Times, serif;
     font-style: italic;
     color: #CF0;
     font-size: 125%;
.twoColFixLtHdr #mainContent h5 {
     font-size: 120%;
.twoColFixLtHdr #footer {
     padding: 20px 10px 20px 20px;
     border-top: 1px solid #000000;
     background-color: #A3A3A3;
     font-family: Arial, Helvetica, sans-serif;
.twoColFixLtHdr #footer p {
     margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
     padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
.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 */
     float: left;
     margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
     clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
#paragraphFloat {
     width: 350px;
#paragraphFloat2 {
     width: 350px;
Please if anyone knows what I'm doing wrong please please let me know! Since I am learning, I really want to get main concepts like this down so I am not constantly doing things the hard way! Thank you!
Jayson

1) Regarding validation, what does it do?
It validates by telling you where your code isn't er... valid. Sometimes the results are a bit jumbled but if you work through them one at a time and revalidate, it's a good way to learn. If you fix all of the errors shown up through the validator you should end up with standards compliant code. Not necessarily the best, most efficient code you can write but at least it will be valid and it helps you spot errors that hours of code-staring never seems to find.
I don't use the DW validation tool because I find the W3c one easier.
The W3c validator has a check box of HTML Tidy which can tidy up your code but it's not always as easy to see what changes.
2) I know the <p> tag for spacing is wrong, I could just feel it in my bones. I just didn't know what else to do. If I <br> all the way down won't the code be just as cluttered?
You're obviously a born web coder!
<br> will bloat your page if you use them to position elements.
Here you need to get used to a) the Block Model and b) CSS positioning. Once you crack these, CSS opens up for you and becomes a little more intuitive.
if you have two elements on top of each other rather than push them apart with other elements you do it with padding and/or margin. There are things to watch out for here namely, collapsing margins but if you start to read up on the above, you'll get it.
I just thought of something. If I add a div in main content, align it to the bottom center with CSS, use a line break between it and the text above, and add the image in question in the new div, will the spacing between the text and image work itself out? I just really want to get out of the <p> bad habit.
Keep thinking! Web design is not like desktop publishing or print. Elements on a HTML page don't behave like paragraphs on a page. Once you begin to figure out why not it all gets a little easier.
If you want an image at the bottom an element you put that at the end of the content in that element. Then you need to ensure there is no margin, padding or border between the img element and the next element (your footer). HTML elements come with some styling that is applied by default in the browser. Many web developers include a rule like this:
body {
margin: 0;
padding:0;
This sets the margin and padding to zero of course and it's purpose is to override the defaults. Some people advocate applying similar rules to all elements and if your interested try googling Eric Meyer who has written about it online.
One of the key purposes of CSS is to take styling out of the page. It's leaner, more efficient for the viewer and the coder and helps with site management.
3) AP divs are weird, and I did only use as a last resort.
See? You're a natural!
The reason is I am confused by the float and clear float classes. My left column is floated left and that element is what I was having problems understanding. I tried to make new divs and float right but I screwed it all up. I am sure I am just not applying the clear float in the right places.
Getting the hang of floating is key to CSS positioning. You use a float if you want two elements to sit side by side on the page. It disrupts the "document flow." Ordinarily HTML elements are rendered one after the other, on top of each other. Floating an element takes it out of the document flow and allows other elements to occupy its space. When you float an element it should always have a width. If the element below it also has a width, that width has to be sufficiently narrow to allow it to occupy the space. In short, floated elements can't be wider than their containing element.
The clear property is used after a float to stop an element occupying the space left by a floated element. It works but confuses the heck out of me!
So that leads me to my final point. I am a novice too! I might have fluffed a few of the technical points above but it's pretty much there.
Regards
Martin

Making my side by side divs even in Height in different browsers

I have been wrestling with a problem for the past few hours. I don't know how to solve it and hope someone can help me. Here is a page that I thought I set up in such a way that I would be able to have the same height on both divs (left-text and right-flash movie). When I thought I had it worked out in Firefox, I looked at safari and saw uneven height.
Here is the page:
http://www.margaritascafe.com/parties.html
I have tried everything I can think of including the dreaded adding a height parameter to the div tags, however nothing is working to make both browsers show the same result.
here is my html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Untitled Document</title>

<link href="margaritastyles.css" rel="stylesheet" type="text/css" />
<script src="Margaritas_temp_spry/SpryMenuBar.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="Margaritas_temp_spry/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />


</head>
<body>
<div id="wrapper">
<div id="header">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000" height="150" id="FlashID" tabindex="10" title="Margarita's Cafe header 2">
      <param name="movie" value="flash_movies/Margaritas Header 5.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="9.0.45.0" />
      
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      
      
      <object type="application/x-shockwave-flash" data="flash_movies/Margaritas Header 5.swf" width="1000" height="150">
        
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="9.0.45.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>
</div>
<div id="navigation">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="index.html">Home</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Menus</a>
        <ul>
          <li><a href="menus/lunch.html">Lunch</a></li>
          <li><a href="menus/dinner.html">Dinner</a></li>
          <li><a href="menus/cocktail.html">Cocktail</a></li>
          <li><a href="menus/takeout.html">Take Out</a></li>
        </ul>
      </li>
      <li><a href="photo_gallery.html">Photos</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Catering</a>
        <ul>
          <li><a href="parties.html">Private Parties</a></li>
        </ul>
      </li>
      <li><a href="reservations.html">Reservations</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Contact</a>
        <ul>
          <li><a href="facebook.html">Facebook</a></li>
          <li><a href="twitter.html">Twitter</a></li>
          <li><a href="youtube.html">Youtube</a></li>
          <li><a href="merchant_circle.html">Merchant Circle</a></li>
<li><a href="directions.html">Directions</a></li>
        </ul>
      </li>
      <li><a href="reviews.html">Reviews</a></li>
      <li><a href="specials.html">Specials</a></li>
    </ul>
</div>
<div id="sidebar">
    <h2>Come Dine With Us!</h2>
    <p><span id="name">Margarita's Cafe</span> is the prime location to have your next party or event. Our experienced team of event planners are ready to help you have the time of your life! Margarita's Cafe is the only restaurant that will allow you to customize your menu and pricing to your needs.</p>
    <p>We offer a large dining room area for a large party or event up to 75 people. We also have a smaller dining area for a more intimate gathering of up to 20 people. Need Music, entertainment or decorations? No problem! Our staff will work with you to create the ultimate party experience.    </p>
    <p>Take a look at our party packages to get an idea of how we can create that special atmosphere for your next event. Got a date in mind or have questions? Give us a call at 516-745-0033 or 516-222-0328.</p>
    <p>Private Parties for:</p>
    <ul>
      <li>Weddings | Anniversaries</li>
      <li>Birthdays | Bar/Bat Mitzvahs | Sweet Sixteens</li>
      <li>Corporate Functions | Business Luncheons</li>
      <li>Bachelor / Bachelorette Parties<br />
        <br />
      </li>
    </ul>
    </div>
<div id="maincontent">
<script type="text/javascript">

</script>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="560" height="315" id="FlashID2" title="Parties">
    <param name="movie" value="flash_movies/parties.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="9.0.45.0" />
    
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    
    
    <object type="application/x-shockwave-flash" data="flash_movies/parties.swf" width="560" height="315">
      
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="9.0.45.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>
</div>
<div id="clearboth"></div>
<div id="page_container"></div>
<div id="footer"><a href="http://www.facebook.com/margaritascafe" target="_blank"><img src="png-gif-jpg/Margaritas Facebook logo.png" alt="Facebook" width="40" height="25" align="absmiddle" /></a> <a href="http://twitter.com/#!/MargaritasCafe" target="_blank"><img src="png-gif-jpg/Margaritas Twitter logo.png" alt="Twitter Logo" width="40" height="25" align="absmiddle" /></a><a href="http://www.merchantcircle.com/business/Margaritas.Cafe.516-745-0033" target="_blank"><img src="png-gif-jpg/merchantcircle_mini.png" alt="Merchant Circle Logo" width="63" height="25" align="absmiddle" /></a> Powered by Kemite Multimedia ©2011 Margarita's Cafe</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
and my CSS:
body {
    text-align: center;
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    background-color: #FCAF5D;
#wrapper {
    text-align: left;
    padding: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    width: 1000px;
#header {
    margin: 0px;
    padding: 0px;
#navigation {
    padding: 0px;
    background-color: #909;
    margin-top: -3px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
#sidebar {
    background-color: #77c4cb;
    width: 420px;
    float: left;
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-left: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 20px;
    font-style: italic;
    color: #FFF;
    margin: 0px;
#wrapper #sidebar p #name {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
#maincontent {
    margin: 0px;
    padding: 0px;
    width: 560px;
    float: right;
#maincontentlayout3 {
    background-color: #0F0;
    margin: 0px;
    padding: 0px;
    clear: both;
    height: 250px;
#specials {
    background-color: #CC9;
    text-align: center;
    margin: 0px;
    padding: 0px;
    float: left;
    clear: both;
#footer {
    margin: 0px;
    background-color: #fdc58a;
    clear: both;
    font-style: italic;
    font-size: 11px;
    text-align: right;
    padding-top: 0px;
    padding-right: 5px;
    padding-bottom: 0px;
    padding-left: 0px;
#clearboth {
    margin: 0px;
    padding: 0px;
    clear: both;
#page_container {
    margin: 0px;
    padding: 0px;
#menu {
    margin: 0px;
    padding: 0px;
#menutitle {
    text-align: center;
    margin: 0px;
    padding: 0px;
    color: #FFF;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
#menutable {
    text-align: center;
    padding: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
Can anyone tell me what to do to solve this problem?

The easy way is to google 'faux columns'. It won't make the divs the same height, but it will make it look like they are.
The (probably) best way to do it would be to leverage some CSS2 as I show in the following table (view it in Live view in DW) -
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#wrap {
          display:table;
          border:1px solid #000;
#col1, #col2 {
          display:table-cell;
          width:350px;
#col1 {
          background-color:#CCC;
#col2 {
          background-color:#FFC;
</style>
</head>
<body>
<div id="wrap">
<div id="col1">Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt eu fugiat nulla pariatur.</div>
<div id="col2">Similique sunt in culpa qui officia deserunt mollitia animi, qui in ea voluptate magnam aliquam quaerat voluptatem. Nemo enim ipsam voluptatem nam libero tempore, eaque ipsa quae ab illo inventore veritatis.</div>
</div>
</body>
</html>

Help with floating divs

Hi All,
I have given up on the liquid template and now started from scratch with fixed divs.
My problem now is the floating elements.
I adapted this layout to a adobe tutorial with less divs so the floats and clears that the tutorial said some dont work.
Could someone look at my template and check the floating so as it sits like it does and wont move with content added.
I want to add a horizontal spry navigation bar at the bottom like the top but when i add another div it moves eveything and i get an error about 3px line gaps.
If I am not making sense please let me know
Any help would be appreciated.
Thanks in advance
This is my code and css.
<!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="file:///C|/Users/Nikki/Desktop/tmp/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="file:///C|/Users/Nikki/Desktop/tmp/Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="file:///C|/Users/Nikki/Desktop/tmp/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="file:///C|/Users/Nikki/Desktop/tmp/SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />


<link href="../faarcss.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body,td,th {
    font-family: "Myriad Pro";
h1,h2,h3,h4,h5,h6 {
    font-family: "Myriad Pro";
    font-weight: bold;
h1 {
    font-size: 110%;
h2 {
    font-size: 105%;
h3 {
    font-size: 100%;
h4 {
    font-size: 90%;
h5 {
    font-size: 90%;
h6 {
    font-size: 90%;
p {font-size: 90%;
</style>
</head>
<body onload="KW_doClock()">
<div id="wrapper">
<div id="topNav">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#">Home</a></li>
      <li><a class="MenuBarItemSubmenu" href="#">Finance</a>
        <ul>
          <li><a href="#">Finance Overview</a></li>
          <li><a href="#">More than Just a Mortgage</a></li>
          <li><a href="#">Line Of Credit</a></li>
          <li><a href="#">The Latte Factor</a></li>
          <li><a href="#">Untitled Item</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Insurance</a>
        <ul>
          <li><a href="#">The Importance of Insurance</a></li>
          <li><a href="#">Why do we need Insurance</a></li>
          <li><a href="#">Personal Insurance</a></li>
          <li><a href="#">Health Insurance</a></li>
          <li><a href="#">Untitled Item</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Financial Planning</a>
        <ul>
          <li><a href="#">Creating your financial security</a></li>
          <li><a href="#">Superannuation</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Budgeting</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Taxation</a>
        <ul>
          <li><a href="#">Accounting</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Taxation</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Property</a>
        <ul>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Property Archives</a></li>
          <li><a href="#">Property F.A.Q.</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Legal</a>
        <ul>
          <li><a href="#">Estate Planning</a></li>
          <li><a href="#">Solicitors</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Information</a>
        <ul>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Seminars</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Media</a>
        <ul>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Media</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">About FAAR</a>
        <ul>
          <li><a href="#">Our Point of Difference</a></li>
          <li><a href="#">Our Undertaking</a></li>
          <li><a href="#">Feedback</a></li>
          <li><a href="#">Site map</a></li>
          <li><a href="#">Contact FAAR</a></li>
</ul>
      </li>
    </ul>
</div>
<div id="logo"><img src="file:///C|/Users/Nikki/Desktop/faar/images/FAAR.logo.jpg" alt="Logo" width="230" height="230" align="left" /></div>
<div id="name">
<img src="file:///C|/Users/Nikki/Desktop/faar.com.au/images/name2.jpg" width="300" height="230" alt="FAAR" /></div>
<div id="header">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="450" height="230" id="FlashID" title="Header">
<param name="movie" value="file:///C|/Users/Nikki/Desktop/faar/newFlash.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />

<param name="expressinstall" value="file:///C|/Users/Nikki/Desktop/tmp/Scripts/expressInstall.swf" />


<object type="application/x-shockwave-flash" data="file:///C|/Users/Nikki/Desktop/faar/newFlash.swf" width="450" height="230">
    
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="6.0.65.0" />
    <param name="expressinstall" value="file:///C|/Users/Nikki/Desktop/tmp/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></div>
<div id="motto">It makes sense to hire an expert - and even more sense to learn from them!</div>
<div id="clock">
    <script language='JavaScript'>
// Kaosweaver Live Clock Start
function class_clock(f,s,c,b,w,h,d,m,g,z) { // Copyright 2002 by Kaosweaver, All rights reserved
    this.b=b;this.w=w;this.h=h;this.d=d;this.g=g;this.z=z
    this.o='<font style="color:'+c+'; font-family:'+f+'; font-size:'+s+'pt;">';
if (m==1) this.o+=doDate("W0",",%20","D1","%20","M0",",%20","Y0",",%20");
var clock=new class_clock("Arial, Helvetica, sans-serif","10","#000000","#FFFFFF","287",1,1,1,0,0)
// If the clock's size needs adjusting, change the 287 above.
d=document
if (d.all || d.getElementById) {d.write('<span id="activeClock" style="width:'+clock.w+'px; background-color:'+clock.b+'"></span>'); }
else if (d.layers) {d.write('<ilayer bgcolor="'+clock.b+'" id="wrapClock"><layer width="'+clock.w+'" id="activeClock"></layer></ilayer>'); }
else {KW_doClock(1);}
function KW_doClock(a) { // Copyright 2003 by Kaosweaver, All rights reserved
    d=document;t=new Date();p="";dClock="";    if (d.layers) d.wrapClock.visibility="show";
    tD=(t.getTimezoneOffset()-(clock.z*60))*clock.g;t.setMinutes(tD+t.getMinutes())
    h=t.getHours();m=t.getMinutes();s=t.getSeconds();if (clock.h)
     {p=(h>11)?"PM":"AM";h=(h>12)?h-12:h;h=(h==0)?12:h;}if (clock.d)
     {m=(m<=9)?"0"+m:m; s=(s<=9)?"0"+s:s;} dClock = clock.o+h+':'+m+':'+s+' '+p+'</font>';
    if (a) {d.write(dClock);}if (d.layers) {wc = document.wrapClock;lc = wc.document.activeClock;
        lc.document.write(dClock);lc.document.close();
    } else if (d.all) {    activeClock.innerHTML = dClock;
    } else if (d.getElementById) {d.getElementById("activeClock").innerHTML = dClock;}
    if (!a) setTimeout("KW_doClock()",1000);
function doDate(){ // Copyright 2002 by Kaosweaver, All rights reserved.
var t=new Date(),a=doDate.arguments,str="",i,a1,lang="1";
var month=new Array('January','Jan', 'February','Feb', 'March','Mar', 'April','Apr', 'May','May', 'June','Jun', 'July','Jul', 'August','Aug', 'September','Sep', 'October','Oct', 'November','Nov', 'December','Dec');
var tday= new Array('Sunday','Sun','Monday','Mon', 'Tuesday','Tue', 'Wednesday','Wed','Thursday','Thr','Friday','Fri','Saturday','Sat');
for(i=0;i<a.length;i++) {a1=a[i].charAt(1);switch (a[i].charAt(0)) {
case "M":if ((Number(a1)==3) && ((t.getMonth()+1)<10)) str+="0";
str+=(Number(a1)>1)?t.getMonth()+1:month[t.getMonth()*2+Number(a1)];break;
case "D": if ((Number(a1)==1) && (t.getDate()<10)) str+="0";str+=t.getDate();break;
case "Y": str+=(a1=='0')?t.getFullYear():t.getFullYear().toString().substring(2);break;
case "W":str+=tday[t.getDay()*2+Number(a1)];break; default: str+=unescape(a[i]);}}return str;
// Kaosweaver Live Clock End
    </script>
    
</div>

<div id="mainContent">
    <p><strong>Template for Financial & Accounting</strong></p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
</div>

<div id="sidebar">
    <ul id="MenuBar2" class="MenuBarVertical">
      <li class="navMenu"><a href="#">Home</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Finance</a>
        <ul>
          <li><a href="#">Finance Overview</a></li>
          <li><a href="#">More Thank Just a Mortgage</a></li>
          <li><a href="#">Line of Credit</a></li>
          <li><a href="#">The Latte Factor</a></li>
          <li><a href="#">Untitled Item</a></li>
        </ul>
      </li>
      <li class="navMenu"><a href="#" class="MenuBarItemSubmenu">Insurance</a>
        <ul>
          <li><a href="#">Importance of Insurance</a></li>
          <li><a href="#">Why do we need Insurance</a></li>
          <li><a href="#">Personal Insurance</a></li>
          <li><a href="#">Health Insurance</a></li>
          <li><a href="#">Untitled Item</a></li>
        </ul>
      </li>
<li><a href="#" class="MenuBarItemSubmenu">Financial Planning</a>
<ul>
    <li><a href="#">Creating your financial security</a></li>
    <li><a href="#">Superannuation</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Budgeting</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Taxation</a>
<ul>
    <li><a href="#">Accounting</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Property</a>
<ul>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Property Archives</a></li>
    <li><a href="#">Property F.A.Q.</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Legal</a>
<ul>
    <li><a href="#">Solicitors</a></li>
    <li><a href="#">Estate Planning</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Information</a>
<ul>
    <li><a href="#">Seminars</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Media</a>
<ul>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#">Site Map</a></li>
<li><a href="#" class="MenuBarItemSubmenu">About Faar</a>
<ul>
    <li><a href="#">Our Point of Difference</a></li>
    <li><a href="#">Our Undertaking</a></li>
    <li><a href="#">Site map</a></li>
    <li><a href="#">Feedback</a></li>
    <li><a href="#">CONTACT FAAR</a></li>
</ul>
</li>
<li><a href="#">Feedback</a></li>
<li><a href="#">CONTACT FAAR</a></li>
    </ul>
</div>
<div id="footer">
<p class="copyright">Copyright © Financial And Accounting Resources 2011
<p class="disclaimer">Disclaimer: Due to the financial industry continually evolving and   changing every effort has been made to ensure the accuracy of the   information contained within ths website. Financial and Accounting   Resources accepts no responsibility or liability for any loss or damage   whatsoever (either directly or indirectly) to any person arising from   the use or reliance on the information contained in this website.
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"/www/tmp/SpryAssets/SpryMenuBarRightHover.gif"});
swfobject.registerObject("FlashID");
</script>
</body>
</html>
CSS.
@charset "utf-8";
/* CSS Document */
body {
    background-color: #FFF;
    padding: 0px;
    margin-top: 25px;
    text-align: center;
    background-image: url(images/watermark.jpg);
    background-repeat: repeat-y;
    background-position: center;
html, body {
    margin: 0px;
    padding: 0px;
#wrapper {
    background-color: #FFF;
    width: 1000px;
    text-align: left;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    position: relative;
#topNav {
    background-color: #00A0C4;
    width: 1000px;
    padding-top: -25px;
    clear: left;
    float: left;
    padding-bottom: 5px;
#logo {
    background-color: #FFF;
    height: 230px;
    width: 230px;
    float: left;
    padding-top: 10px;
#name {
    background-color: #FFF;
    height: 230px;
    width: 300px;
    float: left;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 10px;
#header {
    background-color: #FFF;
    height: 230px;
    width: 450px;
    float: right;
    clear: right;
    padding-top: 10px;
#motto {
    background-color: #FFF;
    height: 25px;
    width: 1000px;
    float: left;
    text-align: center;
    color: #000;
    font-weight: bold;
    font-size: 110%;
    font-style: italic;
    padding-top: 15px;
#clock {
    background-color: #FFF;
    height: 30px;
    width: 1000px;
    clear: both;
    float: left;
    font-size: 100%;
    text-align: right;
    font-weight: normal;
    color: #000;
    vertical-align: middle;
    padding-top: 10px;
#mainContent {
    background-color: #FFF;
    height: auto;
    width: 720px;
    float: right;
    margin-bottom: 10px;
    padding-right: 25px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-image: url(images/watermark.jpg);
    background-repeat: repeat-y;
    background-position: center;
    background-attachment: fixed;
    text-align: justify;
#sidebar {
    background-color: #00A0C4;
    width: 225px;
    clear: left;
    float: left;
    height: auto;
    padding: 10px;
ul nav {
    background-color: #00A0C4;
    width: 250px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    list-style-position: inside;
    list-style-type: none;
#footer {
    background-color: #00A0C4;
    height: 100px;
    width: 940px;
    float: left;
    clear: left;
    padding: 10px;
body,td,th {
    font-family: Arial, Helvetica, sans-serif;
sidebar.menu {
    font-size: 100%;
    font-weight: bold;
    color: #FFF;
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 */
    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: #C6D580;
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: #ADB96E;
    color: #FFF;
    float: left;
.navMenu {
    font-size: 100%;
    text-align: left;
    padding-right: -10px;
    color: #FFF;
    font-weight: bold;
.sideNav {
    font-size: 80%;
    text-align: left;
    padding: 10px;
.copyright {
    font-family: "Myriad Pro";
    font-size: 110%;
    font-weight: bold;
    color: #FFF;
    text-align: center;
.disclaimer {
    font-size: 75%;
    color: #FFF;
    text-align: left;
Thank you
muznik

The table is still above the text, not on the side like in the image you sent.
I have the test document in a folder called "Test" in that folder i have a folder named "CSS" where the text document is saved as style.css
The code i have now is below... Not sure what I'm doing wrong :/
<!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=iso-8859-1" />
<title>Untitled Document</title>
<head>
<title>style.css</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="masthead">
    <div id="logo">
    </div>
    <div id="header">
    </div>
</div>
<div id="container">
    <div id="left_col">
      <table width="188" border="1">
      <tr>
        <td>Test 1 </td>
      </tr>
      <tr>
        <td>Test 2 </td>
      </tr>
      <tr>
        <td>Test 3 </td>
      </tr>
      <tr>
        <td>Test 4 </td>
      </tr>
    </table>
    </div>
<div id="page_content" style="overflow: auto;">
      <p>The Department of the Navy desires a tool for analyzing the affects of budgetary changes upon Fire and Emergency Services provided upon Naval Installations throughout the world.   The diversity of these installations suggests that across the board funding changes may affect each location differently. This project presents a Fire Loss Model to support the continued development of the analysis tool.</p>
    </div>
</div>
<div id="footer"></div>
</body>
</html>

Show/Hide Divs Problem in IE6

Hello, and thanks for taking a look at this.
I have inherited a web site which isn't performing very well in IE6, more details later. The setup is as follows:
The website delivers training content. The design is such that there are no scrollbars, all Lesson content is laid out carefully within a 'page' area and the user clicks a Next or Previous button to page through the content.
Each Lesson is a single HTML file which is designed and edited in Dreamweaver CS5. All the Lesson pages are based upon a single Template file which defines the common functionality. The Lesson content is basically a series of Divs, a Div for each 'page' of content and each have a unique id (for example 'page2'). Each Div has a CSS Class which defines the 'display' property. The CSS Classes are as follows:
.hideDiv{
     display:none;
.showDiv{
     display: inline;
Initially the first Div in the Lesson is set to .showDiv and all of the following Divs are set to .hideDiv.
The navigation is designed in Flash and the Next and Previous buttons are situated below the content area. When clicked a Javascript function is called, from a Javascript file referenced by the Lesson HTML page. The javascript function is as follows:
function hideShow(hideDiv, showDiv){
     if(document.getElementById(hideDiv)!=null){
          document.getElementById(hideDiv).className = "hideDiv clear";
     if(document.getElementById(showDiv)!=null){
     document.getElementById(showDiv).className = "showDiv clear";
It has to be said that everything works. There is further code which accounts for reaching the last page or trying to click previous on the first page etc, but this is the core principal.
Our problem is that our users have to use IE6 and when viewing the website in IE6 it is much slower than in say IE8 or Safari etc. We have noticed that as the number of pages (Divs) in a Lesson increases so the performance decreases. Crucially we notice that as you click Next, or previous, the browser Status Bar indicates that all of the images in the Lesson are being downloaded. Every time you click Next or Previous!
If anyone can either assist in preventing all of the images constantly downloading, or suggest an alternative approach to paging through the content I would be extremely grateful.
Regards
Chris

Hello Murray
Thanks for going to the trouble of creating the little test site.
Other browsers appear to load the pages much quicker. This may be because they are able to more inteligently handle our code, I don't know. Safari on our Macs zooms through it.
In IE6 if I open a large Lesson and click next I see, at the bottom of the screen in the Status Bar, "(21 items remaining)" and then "(20 items remaining)" etc. which counts down and then disappears. Interestingly if the next screen happens to display the same image this does not happen, just the message "Done". If the next screen has a different image then the count down from "(21 items remaining)" again as all the linked resources (I presume) are downloaded.
I have opened your site in IE6 (Windows XP Pro) and I don't see the message. However the image is so small that I may not because it is so fast to load.
It may be related to how IE6 handles Temporary Internet Files, I'm not sure.

Why isn't my layout connecting divs tightly?

I am building a website, and I am having trouble with the coding. I have a Spry Menu that needs my Nivo (jquery) Slider to fit tightly underneath it, and then have the second Spry Menu (#2) fit tightly underneath the slider.
Why am I not able to push these tightly together? (my site html and spry menu html is below - CSS built into header of page)
Thanks for any insight anyone could provide!!!
SOURCE CODE
<!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>Cache Valley ENT</title>
<meta name="keywords" content="Cache Valley ENT, ent, ear, nose, throat, allergy, allergies, symptom, congestion, treatment, clinic"/>
<meta name="description" content="Cache Valley ENT is Northern Utah's most experienced ear, nose, and throat clinic, offering treatments for your worst symptoms, including allergies." />
<meta name="identifier-url" content="http://" />
<style type="text/css">
body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #000;
body {
    background-color: #F1D2A6;
    background-image: url(pictures/backgroundslice.jpg);
    background-repeat: repeat-x;
#header {
    width: 900px;
#body {
    vertical-align: baseline;
    width: 725px;
    text-align: justify;
    height: 900px;
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-image: url(pictures/textbox/home_text.png);
    padding-top: 10px;
    padding-right: 60px;
    padding-bottom: 40px;
    padding-left: 30px;
    margin: auto;
#navbar {
    height: 40px;
    width: 696px;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-color: #000;
    border-right-color: #000;
    border-bottom-color: #000000;
    border-left-color: #000;
    margin-left: 12px;
#MenuBar2 li {
    width: 174px;
    font-family: "Arial", Arial, serif;
    color: #FFFFFF;
    font-size: 20px;
    letter-spacing:;
    height: auto;
    background-image: url(pictures/images/images/spry_menu_background2.png);
    background-hover: url (pictures/images/images/hover_spry_menu_background2.png)
    padding-top: 20px;
#footer {
    font-size: 13px;
    width:800px;
    left: 50px;
    margin-top: 10px;
    padding-top: 10px;
a:link {
    color: #000;
    text-decoration: none;
a:visited {
    text-decoration: none;
    color: #000;
a:hover {
    text-decoration: underline;
    color: #666;
a:active {
    text-decoration: none;
.headerphone {
    font-size: 24px;
    text-align: center;
</style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script src="ajximagerotator.js" type="text/javascript"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        directionNav: true,
        controlNav: true,
        directionNavHide: false,
        captionOpacity: 1,
        prevText: '<',
        nextText: '>',
        effect: 'fade',
        pauseTime: 9000,
</script>
<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-32226035-1']);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
</head>
<body>
<div id="header"></div>
<div id="body">
<table width="720" border="0">
    <tr>
      <td width="557"><img src="pictures/CVENT Logo Edit.jpg" width="300" height="147" vspace="0" align="top" /></td>
      <td width="153" nowrap="nowrap"><div class="headerphone">
        <p><strong>Cache Valley ENT</strong></p>
        <p>435.753.7880</p>
      </div></td>
    </tr>
</table>
<hr />
<div id="navbar">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="home.html">Home</a></li>
      <li><a href="our_providers.html">Our Providers</a></li>
      <li><a class="MenuBarItemSubmenu" href="services.html">Services</a>
        <ul>
          <li><a href="services_entservices.html">General ENT</a></li>
          <li><a href="services_allergy.html">Allergy</a></li>
          <li><a href="services_hearing.html">Hearing</a></li>
          <li><a href="services_pediatric.html">Pediatric Services</a></li>
          <li><a href="services_asthma.html">Asthma</a></li>
          <li><a href="services_headache.html">Headache</a></li>
          <li><a href="services_facialplasticsurgery.html">Facial Plastic Surgery</a></li>
        </ul>
      </li>
      <li><a href="new_patient.html" class="MenuBarItemSubmenu">New Patient</a>
        <ul>
          <li><a href="#">Forms</a></li>
          <li><a href="#">Insurance</a></li>
        </ul>
      </li>
      <li><a href="patient_resources.html" class="MenuBarItemSubmenu">Patient Resources</a>
        <ul>
          <li><a href="patient_resources_ears.html">Ears</a></li>
          <li><a href="patient_resources_throat.html">Throat</a></li>
          <li><a href="patient_resources_noseandmouth.html">Nose and Mouth</a></li>
          <li><a href="patient_resources_headandneck.html">Head and Neck</a></li>
          <li><a href="patient_resources_cancer.html">Cancer</a></li>
          <li><a href="patient_resources_pediatric.html">Pediatric</a></li>
          <li><a href="patient_resources_featuredhealthinformation.html">Featured Health Information</a></li>
          <li><a href="patient_resources_enespanol.html">en Español</a></li>
          <li><a href="patient_resources_aboutotolaryngology.html">About Otolaryngology</a></li>
          <li><a href="patient_resources_enthistory.html">ENT History</a></li>
        </ul>
      </li>
    </ul>
    <p> </p>
    <div class="slider-wrapper theme-default">
      <div class="ribbon"></div>
      <div id="slider" class="nivoSlider">
        <p><img src="nivo_images/walle.jpg" alt="" /> <a href="http://dev7studios.com"><img src="nivo_images/toystory.jpg" alt="" /><img src="nivo_images/nemo.jpg" alt="" /></a></p>
      </div>
    </div>
    <ul id="MenuBar2" class="MenuBarHorizontal">
      <li><a href="services_entservices.html">General ENT</a></li>
      <li><a href="services_facialplasticsurgery.html">Surgery</a></li>
      <li><a href="http://www.CacheAllergy.com" target="_blank">Allergies</a></li>
      <li><a href="http://www.wherecvhears.com">Hearing</a></li>
    </ul>
</div>
<div id="img">
    <h1> </h1>
    <h1> </h1>
    <h1>Welcome!</h1>
    <p> <strong>Cache Valley ENT is located in North Logan, Utah, </strong>and provides ear, nose and throat (ENT) servies to relieve the the most stubborn allergy symptoms. Cache Valley ENT serves all Cache Valley residents, Box Elder County, and even Franklin County Idaho. Our doctors, Doctor Gordon Wood, Doctor Jeffrey Bennion, Doctor James Blotter, and Lindsay Humes (PA.C.), are all trained and experienced in allergy testing and treatments to provide you a favorable experience, and to help you live the live you deserve! They have more than 75 years' combined experience in providing successful ENT treatments! Cache Valley ENT is affiliated with the MidWest ENT Associates, PLLC. <br />
      <br />
    We have a convenient location in North Logan, UT at 2380 North 400 East, inside the Cache Valley Specialty Hospital. This location houses the ENT Clinic and the Gulf South Outpatient Surgery Clinic. Hours of operation are Monday through Thursday, 8am to 5pm, and Friday from 8am to 12noon. Call <strong>801-753-7880</strong> to schedule an appointment. </p>
    <p><img src="pictures/our_practice.png" width="500" height="333" hspace="110" align="middle" /></p>
</div>
<p> </p>
<div id="footer">
    <p> </p>
    <p>Copyright 2012 | Cache Valley ENT | 2380 N 400 E, Suite D | North Logan, Utah 84341 | 435.753.7880 | <strong> <a href="contact.html">CONTACT US</a></strong></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>
SPRYMENUBARHORIZONTAL.CSS
@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;    -moz-background-inline-policy: bounding-box;}/* 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;    float: left;    background-image: url(../pictures/images/images/spry_menu_background.png);    width: 139px;    z-index: 1001;}  /* 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: 9.5em;    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: 10em;}/* 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{ } /* Menu items are a light gray block with padding and no text decoration */ul.MenuBarHorizontal a{    display: block;    cursor: pointer;    padding: 0.5em 0.75em;    text-decoration: none;    text-align: center;    border: 0.75px solid;    border-bottom-color: #000000;    border-left: none;    border-right: none;    border-top: none;} ul.MenuBarHorizontal ul a {    text-align: left; } /* Menu items that have mouse over or focus have a blue background and white text */ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{    text-align: center;    background-image: url(../pictures/images/images/hover_spry_menu_background2.png);}/* 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{    text-align: center;    color: #000;} /******************************************************************************* 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-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-repeat: no-repeat;    background-position: 95% 50%;    text-align: center;}/* 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;    }}

That which you have shared with us is OK. All fits neatly as per your requirement.
Perhaps it is that which you have not shared with us that could be the problem.
Gramps
PS The following may help you
Announcement: How Important is Code? A plea for new posters to help us!
Hide Details
Please don't ask a layout question (or really almost any other question) here without also giving us a look at the code on your page.
The best way to do this is to upload the page and its dependent files, and to post a link to this uploaded page. A poor second alternative would be to paste your code into your post using the double chevron icon on the toolbar, and selecting Syntax Highlighting > Plain Text.
Without knowing what you have in your code, we cannot possibly answer anything other than a very simple question. Save us the trouble of engaging in twenty questions to find out what you have done and just show us the code. After all, it's what determines what happens on the page, not your screenshot or your description.
Please?
Also, if your question is one that involves database use or server-scripting, please tell us what server model (PHP, CF, etc.) and database you are using (MySQL, SQL Server, etc.), as well as the operating system and platform. All of those details are necessary for complete troubleshooting and will help us help you through the process!
by Murray *ACP* (04-Aug-2010)

Unable to add text in DIVs (Was: divs)

I have inserted three divs. In the first one I was able to add text to but I am not able to do so for the second nor third, why is this?

The following HTML5 code creates a grid of varying width, floated divisions.   See screenshot below.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Grid</title>

<style>
    margin:0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
body {
    background: #5C9E99;
    color: #333;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-size: 100%;
.wrapper {
    width: 980px; /**adjust width in px % or ems**/
    margin:25px auto; /**with width, this is centered**/
    background-color: #FFF;
    /**optional eye candy**/
    border: 6px groove #39C;
    border-radius: 20px;
    box-shadow: 2px 3px 10px #333;
header, footer {
    width: 100%;
    padding: 0 1%;
    background: #366;
    min-height: 75px;
    color: #E3D79D;
header {border-radius:10px 10px 0 0}
footer {border-radius: 0 0 10px 10px}
header h1, header h2 { display: inline }
article {
    clear: both;
    display: block;
    padding: 2%;
section {
    margin: 0.5% 0 0.5% 0;
    float: left;
    padding: 2%;
/**clear floats after last one in row**/
.clearfix:after {
    content:'';
    clear: both;
    display: table;
/** number of columns**/
.one { width: 100%; }
.two { width: 50%; }
.three { width: 33.33%; }
.four { width: 25%; }
.five { width: 20% }
.six { width: 16.66% }
/**alternating backgrounds**/
section:nth-child(odd) { background-color: #EBD7A5; }
section:nth-child(even) { background-color: #ADC9A5; }
/**re-useable classes**/
.center { text-align: center }
.right { text-align: right }
</style>
</head>
<body>
<div class="wrapper">
<header>
<h1>SiteName</h1> | <h2>Some Pithy Slogan...</h2>
</header>
<nav>Menu goes here...</nav>
<h2 class="center">2 across</h2>

<section class="two"> <h3>section "two"</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. </p>
</section>
<section class="two clearfix"> <h3>section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. </p>
</section>

<h2 class="center">3 across</h2>
<section class="three"> <h3>section "three"</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. </p>
</section>
<section class="three"> <h3>section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. </p>
</section>
<section class="three clearfix"> <h3>section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. </p>
</section>

<h2 class="center">4 across</h2>
<section class="four"> <h3>section "four"</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. </p>
</section>
<section class="four"> <h3>section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis.</p>
</section>
<section class="four"> <h3>section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis.</p>
</section>
<section class="four clearfix"> <h3>section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. </p>
</section>

<h2 class="center">5 across</h2>
<section class="five"> <h3>section "five"<br>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. </p>
</section>
<section class="five"><h3>section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. </p>
</section>
<section class="five"><h3>section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. </p>
</section>
<section class="five"><h3>section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. </p>
</section>
<section class="five clearfix"> <h3>section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. </p>
</section>

<h2 class="center">6 across</h2>
<section class="six"> <h3>section "six"<br>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. </p>
</section>
<section class="six"><h3>section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. </p>
</section>
<section class="six"><h3>section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. </p>
</section>
<section class="six"><h3>section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. </p>
</section>
<section class="six"><h3>section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. </p>
</section>
<section class="six clearfix"> <h3>section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. </p>
</section>

<h2 class="center">mix them up</h2>
<section class="two"><h3>section "two"</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis.
Vestibulum luctus mauris sed sem dapibus luctus.
Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus maecenas quis velit nisl, volutpat viverra felis luctus mauris.</p>
</section>
<section class="four"><h3>section "four"</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. </p>
</section>
<section class="four clearfix"><h3>section "four"</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. </p>
</section>

<article> <h3>Article - Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis.
Vestibulum luctus mauris sed sem dapibus luctus.
Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius.Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim.</p>
</article>

<footer class="right"> <small>© 2014 Site Name. All rights reserved.</small> </footer>

</div>
</body>
</html>
Nancy O.

Spry Navigation 2.0 - Spacing for div for nav bar

Hello:
I am once again working on an navigation bar that renders somewhat differently in various browsers (problems with IE 8 & 6). The navigation is to fit into a div that is bordered by a gold coloured border top and bottom (top border is attached to the header). The problem is one of calculating the appropriate height based on the settings for the custom nav css file. I have taken the font size, padding (top and bottom) and border (top and bottom) together with padding on the overall container of the nav bar. Accordingly I have set the height of the navigation container div at 41px. In most browsers this works fine, however there are some glitches that cause excess white space to appear either above the navigation bar or below it, thus separating the border from the navigation bar.
The url for the site is http://socls.org/PCLC-testing/CorePages.html
I have included the css for the custom nav settings, and the css relating to the navigation in the general css file as well as a screen shot of IE 8.
Thanks for any help in advance.
Steve.
The custom nav css is as follows:
@charset "UTF-8";
/* CSS Document */
/* BeginOAWidget_Instance_2141544: #MenuBar */
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
    these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
     These assume the following widget classes for menu layout (set in a preset)
    .MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
    .MenuBarVertical - vertical main bar; all submenus are pull-right.
    You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
    They only apply to horizontal menu bars:
        MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
        MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
        MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
        MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
                        and centered in its parent container.
        MenuBarFullwidth - Grows to fill its parent container width.
    In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
    with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
    there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuBar {
    background-color:#7888c7;
    font-family: Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
                                                MenuItem, and MenuItemLabel
                                                at a given level all use same definition for ems.
                                                Note that this means the size is also inherited to child submenus,
                                                so use caution in using relative sizes other than
                                                100% on submenu fonts. */
    font-weight: normal;
    font-size: 17px;
    font-style: normal;
    padding:0;
    border-color: #4457a2 #333366 #2c3868 #4457a2;
    border-width:3px;
    border-style: none none none none;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
    display:none;
.MenuBarLeftShrink {
    float: left; /* shrink to content, as well as float the MenuBar */
    width: auto;
.MenuBarRightShrink {
    float: right; /* shrink to content, as well as float the MenuBar */
    width: auto;
.MenuBarFixedLeft {
    float: left;
    width: 80em;
.MenuBarFixedCentered {
    float: none;
    width: 80em;
    margin-left:auto;
    margin-right:auto;
.MenuBarFixedCentered br {
    clear:both;
    display:block;
.MenuBarFixedCentered .SubMenu br {
    display:none;
.MenuBarFullwidth {
    float: left;
    width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
    padding: 0px 0px 0px 0px;
    margin: 0;     /* Zero out margin on the item containers. The MenuItem is the active hover area.
                For most items, we have to do top or bottom padding or borders only on the MenuItem
                or a child so we keep the entire submenu tiled with items.
                Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
    padding: 0px 24px 0px 0px;
    background-color:#7888c7;
    border-width:3px;
    border-color: #8899cf #566a99 #333366 #8899cf;
    border-style: solid solid solid solid;
#MenuBar .MenuItemFirst {
    border-style: solid solid solid solid;
#MenuBar .MenuItemLast {
    border-style: solid solid solid solid;
#MenuBar .MenuItem .MenuItemLabel{
    text-align:center;
    line-height:1.4em;
    color:#331e0d;
    background-color:#7888c7;
    padding: 6px 15px 6px 39px;
    width: 10em;
    width:auto;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
    width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 14px;
    font-style: normal;
    background-color:#7888c7;
    padding:0px 2px 0px 0px;
    border-width:3px;
    border-color: #8899cf #333366 #333366 #8899cf;
    /* Border styles are overriden by first and last items */
    border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemFirst {
    border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
    padding-top: 6px;
#MenuBar .SubMenu .MenuItemLast {
    border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
    padding-bottom: 6px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
    text-align:center;
    line-height:1em;
    background-color:#7888c7;
    color:#331e0d;
    padding: 6px 12px 6px 5px;
    white-space:normal;
    width: 210px;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
    background-color: #3b4b8d;
    border-color: #5266b7 #14192f #14192f #5266b7;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
    background-color: #3b4b8d; /* consider exposing this prop separately*/
    color: #fefefe;
#MenuBar .MenuItemHover .MenuItemLabel{
    background-color: #3b4b8d;
    color: #fefefe;
#MenuBar .SubMenu .MenuItemHover {
    background-color: #3b4b8d;
    border-color: #5266b7 #14192f #14192f #5266b7;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
    background-color: #3b4b8d;
    color: #fefefe;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
    background-color: #7888c7;
    min-width:0%; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
    border-color: #3b4b8d #3b4b8d #3b4b8d #3b4b8d;
    border-width:0px;
    border-style: none none none none;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
    top: 100%;    /* 100% is at the bottom of parent menuItemContainer */
    left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
                    and your personal taste.
                    0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
                    on MenuItemContainer and MenuItem on the parent
                    menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
                    the dropdown with the left of the menu item label.*/
    z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
    top: 0px;
    left:100%;
    min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
    background-color: #7888c7;
    min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
    top: 0px;    /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
                that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
                vertically 'centered' on its invoking item */
    left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
                negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
                to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
    background-color: #3b4b8d; /* consider exposing this prop separately*/
    color: #fefefe;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
    background-color: #3b4b8d; /* consider exposing this prop separately*/
    color: #fefefe;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
    margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
/* EndOAWidget_Instance_2141544 */
The css for the page in general (as it relates to the navigation bar) is:
#main_nav_contents {
    width: 960px;
    height: 41px;
    position: relative;
    padding-left:0px;
    border-bottom: 3px solid #C56F2C;

Hello Again:
Based on some recalculations I realized that with a font size of 17px, 6px padding (top and bottom = 12px) and 3 px border (top and bottom =6) that the height of the nav container should be 35px; I have change the general style sheet to reflect that change, but still have rendering problems accross browsers.
To perhaps add clarity, the following is a screen shot of how it appears in most browsers, and how I intended it should look.
Thanks (again) in advance for any help that can be offered. Steve.

Search function in DW to flag stray /div tags?

This seems like a very basic question, but searching the site, the discussion threads, and the FAQs didn't produce any answers. Does Dreamweaver have a search function -- or an alternative Validate function for CSS -- to pick up stray </div> tags? I've got a page with one </div> too many or too few, doubtless due to a slight selection oversight on a copy/paste I made from another source. The page is rendering with elements flopping into the wrong places, or disapperaing entirely, so I'm sure it's an odd </div> somewhere; but I'm just not up to eyeballing 500 lines of code right now, trying to figure out where there's an imbalance in <div> and </div> pairs. It seems like a natural job for automation. Thanks.

Use the W3C Validation tools.
HTML - http://validator.w3.org/
I find it helps to insert HTML comments around Divisions.

<div id="DivName>

</div>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Make my right click context menus occur only in selected divs

Hi
I want to make some context menus for certain divs in my website page. So the person viewing the site sees a link to a music file and they right click on the link to get more options but instead of the default browser options coming up, a customized list comes up.
This is just an example. The real thing is that I want multiple menus that work in selected divs only. So if you click in most places on the page you get the default context menu but if you click within certain divs you get a different menu.
So far everyone has just given me java script but i can't set html links inside of javascript. Can anyone tell me how to take this script and make it apply to divs instead of the whole document?
<script src="SpryAssets/SpryTooltip.js" type="text/javascript"></script>
    <script type="text/javascript">
    var contextMenuObj;
    var MSIE = navigator.userAgent.indexOf('MSIE')?true:false;
    var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1;
    var activeContextMenuItem = false;
    function highlightContextMenuItem()
        this.className='contextMenuHighlighted';
    function deHighlightContextMenuItem()
        this.className='';
    function showContextMenu(e)
      contextMenuSource = this;
      if(activeContextMenuItem)activeContextMenuItem.className='';
      if(document.all)e = event;
      var xPos = e.clientX;
      if(xPos + contextMenuObj.offsetWidth > (document.documentElement.offsetWidth-20)){
       xPos = xPos + (document.documentElement.offsetWidth - (xPos + contextMenuObj.offsetWidth)) - 20;
      var yPos = e.clientY;
      if(window.document.body.scrollTop > 0)
          yPos = (window.screen.Height) ? e.clientY + window.document.body.scrollTop -20 : e.clientY -20;
        else if (window.pageYOffset)
          yPos = (window.pageYOffset > 0) ? e.clientY + window.pageYOffset -20 : e.clientY -20;
        else
        { yPos = e.clientY -20; }
      contextMenuObj.style.left = xPos + 'px';
      contextMenuObj.style.top = yPos + 'px';
      contextMenuObj.style.display='block';
      return false;
    function hideContextMenu(e)
        if(document.all) e = event;
        if(e.button==0 && !MSIE){
        }else{
            contextMenuObj.style.display='none';
    function initContextMenu()
        contextMenuObj = document.getElementById('contextMenu');
        contextMenuObj.style.display = 'block';
        var menuItems = contextMenuObj.getElementsByTagName('LI');
        for(var no=0;no<menuItems.length;no++){
            menuItems[no].onmouseover = highlightContextMenuItem;
            menuItems[no].onmouseout = deHighlightContextMenuItem;
            var aTag = menuItems[no].getElementsByTagName('A')[0];
            var img = menuItems[no].getElementsByTagName('IMG')[0];
            if(img){
                var div = document.createElement('DIV');
                div.className = 'imageBox';
                div.appendChild(img);
                if(MSIE && navigatorVersion<6){
                    aTag.style.paddingLeft = '0px';
                var divTxt = document.createElement('DIV');
                divTxt.className='itemTxt';
                divTxt.innerHTML = aTag.innerHTML;
                aTag.innerHTML = '';
                aTag.appendChild(div);
                aTag.appendChild(divTxt);
                if(MSIE && navigatorVersion<6){
                    div.style.position = 'absolute';
                    div.style.left = '2px';
                    divTxt.style.paddingLeft = '15px';
                if(!document.all){
                    var clearDiv = document.createElement('DIV');
                    clearDiv.style.clear = 'both';
                    aTag.appendChild(clearDiv);
            }else{
                if(MSIE && navigatorVersion<6){
                    aTag.style.paddingLeft = '15px';
                    aTag.style.width = (aTag.offsetWidth - 30) + 'px';
                }else{
                    aTag.style.paddingLeft = '30px';
                    aTag.style.width = (aTag.offsetWidth - 60) + 'px';
        contextMenuObj.style.display = 'none';
        document.documentElement.oncontextmenu = showContextMenu;
        document.documentElement.onclick = hideContextMenu;
    </script>
If anyone has an alternative to this that will allow me to apply the following link to one of the items in the menu I'd like to hear it.
This is the link that I want to use: <a href="Test Audio File.mp3" download="Test Audio File.mp3">
Thanks
Tohorhilau

Hi, thanks for the quick response!
While trying to find info on how to fix this I looked up some context menu addons for FF and tried one. It didn't work so I uninstalled it and after that everything was back to normal. Odd, but there you have it. I still don't know what went wrong in the first place but for the moment it appears to have cleared up.
Next time though I will try loading into Safe Mode if I find any issues (I forgot there was one!).
Thanks for getting back to me again.
GC

Tag library 'div' hook

Well, 'div' is not corrupt, but the application programming related to customization of Tag libraries is corrupt.
What is happening:
When Dreamweaver CC is installed, and when it opens fresh html files, it makes a mess of line breaks and indents in the text layout of the code. Using the menu item Commands / Apply source formatting also makes a mess, This menu command mess is a slight improvement over the horrendous mess that Dreamweaver CC makes of code when it opens and when it periodically 'refreshes' the files that it trashes. However, the code is not usable, as with more advanced css and html technique, the code becomes unreadable for Chrome, Internet Explorer, Safari, and presumably all browsers.
DW's mess described:
All indents are as spaces, making manual clean-up repetitive, necessary and extremely tedious.
The head and body tags are indented far inside their content, and that content is also erratically indented.
The use of Tag library editor would seem the expected user path, in seeking a user resolution, and perhaps in defining a programmatic intervention.
All tags are trashed, put going to the heart of the html cascade, we start with the p tag: e.g., p tag in Tag libraries defaults as
Line breaks: before and after tag
Contents: formatted and indented
Case: default
We try numerous combinations of p tag settings in the noted dialog interface.
The p tag settings do not appear to effect the mess. Dreamweaver, ignores default and manual settings, sometimes shuffling the mess a little, but minor shuffling only occurring twice, and without any tag block line break changes.
Perhaps, for a given instance of Dreamweaver installation, within a given simple document's system interface, Dreamweaver settings may reveal something called a 'performance hook' by application programmers. Perhaps we can isolate a hook that is useful for the Adobe support; support that lacking professional attention has maintained Dreamweaver as a failed application for over a year (since October 2012) on my Windows desktop. We move next to the div tag.
Manual intervention 'exposes bad behavior of div tag' hook:
Our simple document layout is... simple. Deploying doctypes for both html5 and xhtml transitional and deploying internal and external style methods, with the same code trashing result, we correctly layout tags as HEAD, BODY, DIV and P. Beginning with the p tag, various tag library settings are applied to determine effect on Apply source formatting command. Various p tag settings have no effect, and p is returned to its DW default setting, as noted above. The following div tag settings disable Apply source formatting command's code trashing specifically of line indents.
Line breaks: before and after tag
Contents: formatted but not indented
Case: default
Unfortunately, with this setting, line breaks between only some tags are maintained during Dreamweaver's auto code trashing (e.g., between closing head and opening body tag): sometimes when Dreamweaver does it's auto (or manual) trashing, these specific line breaks, between block tags, are not preserved. However, with this Tag library setting for the div tag using the noted basic cascade, all tag indents are ignored. But only when code is manually kept against left margin, without any indentation. And, ONLY WITH DIV TAG HOLDING THESE PARTICULAR SETTINGS, FOR THIS PARTICULAR DOCUMENT!
FLAT CODE is preferable to the bigger mess that Dreamweaver routinely imposes as it auto trashes code. Also, allowing any left margin indentation worsens Dreamweaver's code trashing... so, given Dreamweaver's chaotic destructiveness, I don't know if it is correct to imply any significance to my manual Tag library settings management, but it is clear that Dreamweaver is unable to correct the mess it makes, using the manual Apply source formatting command. And this is the first 'performance hook' that has been defined for my desktop in over 400 days. But setting div tag in this way is the only way to stop Dreamweaver trashing code layout line indents (trashing that occurs both during Dreamweaver automatic actions and with user menu action, for the specific noted html layout - a layout that is far too basic to be useful for 99.9% of design work). But only for a given instance of Dreamweaver installation for a given OS installation, and not across OS installations, or with any other file than the file (or files, in relational assessment) targeted for our 'hook' presentation analysis.
Conclusion:
Dreamweaver trashes code layout every time the application applies code formatting (e.g., opening new documents from other sources, applying menu commands, etc.). That is, all user code layout will be trashed by Dreamweaver. However, a specific div tag setting in Tag library editor may maintain a single instance for manual correction of Dreamweaver code trashing, when basic page layout is used with div in the noted cascade, and with div settings manually corrected as noted. This is a hopelessly unacceptable condition that the Dreamweaver application imposes on design work for my Windows 8.1 operating system. Professional designers of global significance and stature using many variants of Mac and PC systems have warned me not to use Dreamweaver, recommending numerous alternatives. I am taking the position that Adobe retains a shred of marketplace survivability, and therefore will promptly fix minor problems when I bring them to Adobe's attention.
IMPORTANT:
Obviously, this is not acceptable application performance. Is support available to Adobe that will now, immediately repair the Dreamweaver application that I use as a paid subscription to eliminate systematic code trashing?

I figured it out. Under the Configuration/TagLibraries,
create a CrossTagAttr folder and stick a .vtm file in it. In the
.vtm file, use the <crosstag_attributes> tag and its
children. See Configuration/TagLibraries/CrossTagAttr/Spry/Spry.vtm
for an example.

AP Div alternative?

Similar Messages

Maybe you are looking for