Divs overlapping

http://www.jordankrose.com/jkr_shortStories2.html
EVA PRIM WRITES—
CHOICES. ANARCHY. HYPOCRISY.
this section (shorts3) has been a nightmare. The buyshorts3 div will not format correctly; it was going under the text below, so I moved it above the text. my client will not like that as it is not consistent with other parts of the page.
Thanks for your help.

richardswife wrote:
http://www.jordankrose.com/jkr_shortStories2.html
EVA PRIM WRITES—
CHOICES. ANARCHY. HYPOCRISY.
this section (shorts3) has been a nightmare. The buyshorts3 div will not format correctly; it was going under the text below, so I moved it above the text. my client will not like that as it is not consistent with other parts of the page.
Thanks for your help.
You're making it a nightmare because you're trying to layout a web page in the same way as you would approach a desk top publishing page.
You're trying to fit text in the spaces allocated on one big background image, this is never going to work successfully because everyone has their browsers set up differently.
You would be far better 'isolating' each book and eack books details in their own container. Yes you dont get the 'integrated runaround' look but what you do get is a webapage that is far better suited to more devices and far easier to manage in terms of producing.
At the moment you can come up with a number of 'hacky' fixes but you will never know how it really performs on a wider range of different set ups people use to view the page.

Similar Messages

Topic Content Pane ( div ) overlaps SideBar (TOC/Index) Pane after publishing Browser-based AirHelp, while locally it works fine.

Hi,
I have been facing this issue where the Topic Content Pane (<div>) overlaps the SideBar pane every time I try to open the Browser-Based AirHelp after it has been published on a server.
Although, if I view the same locally on my machine, it appears fine.
I'm using RoboHelp 10 to create the help and have the context sensitivity enabled for integrating the help with my software application.
I have also created the custom window for viewing help.
Now, considering the fact, that we are only using and testing our helpfile on the latest versions of Firefox and Chrome browsers with Flash enabled, this problem however, is not consistent. After getting published, on some machines it appears fine on both browsers and on some it only appears fine on any one of the browsers. Also, there are some machines, where the problem is seen on both browsers.
For Example:
When I try to view the helpfile after it has been published on a server, the following issues are observed:
On My Machine: Topic Content pane overlaps Sidebar pane on Chrome browser and on Firefox it appears fine.
Firefox version: 35.0.1, Chrome Version: 40.0.2214.115 m, Adobe Flash Player 11 Plugin Version: 11.7.700.202
On Another Machine: It appears fine on both browsers.
Firefox version: 35.0.1, Chrome Version: 40.0.2214.115 m, Adobe Flash Player 11 Plugin Version:11.6.6.2.171
Now take a look at these images:
(On Chrome) When Opened Locally:
(On Firefox) After Getting Published:
(On Chrome) After Getting Published:
Machine 1: Topic content overlaps TOC pane
Machine 2: Empty white space appears at the bottom (below footer)
After going through all the relevant information that could be found on your AirHelp forums, I couldn't find a solution.
This issue is very critical to me right now due to the upcoming documentation releases, and i need a resolution to this ASAP. Please Help.

Hi Jeff,
I wrongly addressed it to Adobe. Any help through this forum would be appreciated.

Div overlapping

Hello all,
I've got a page laid out with div tags. The footer div
overlaps the wrapper div when I'm looking at it in design view in
dreamweaver. I can get the divs to not overlap in dreamweaver's
design view if I add 3 - <br /> in between the two divs, but
then the footer is not displayed on the page on any of the browsers
(it's a footer that is always on the bottom of the page, that gets
pushed down if the body is large). How do I get dreamweaver's
design view to not overlap these divs? Any ideas? Thanks for your
help.

Let's see the page, please.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"9thReg" <[email protected]> wrote in
message
news:g03ud8$iib$[email protected]..
> Hello all,
>
> I've got a page laid out with div tags. The footer div
overlaps the
> wrapper
> div when I'm looking at it in design view in
dreamweaver. I can get the
> divs
> to not overlap in dreamweaver's design view if I add 3 -
<br /> in between
> the
> two divs, but then the footer is not displayed on the
page on any of the
> browsers (it's a footer that is always on the bottom of
the page, that
> gets
> pushed down if the body is large). How do I get
dreamweaver's design view
> to
> not overlap these divs? Any ideas? Thanks for your help.
>

Learning as I go, need help with div overlapping

PLEASE HELP, PEOPLE ARE LOOKING BUT YOU ARE NOT RESPONDING. At least give me something, please!! If you need more info I can give it to you, I just don't know what you need
I am learning Dreamweaver through the tutorials provided here on the Adobe site. I have basic html/css knowledge and am trying to learn how to use it!!
I have tried inserting div inside one big div, like in the getting started tutorial, but the tags seem to be overlapping when I click on the Live View option. The look fine in the design view, but overlap in the Live View. I need them not to overlap.
If this is not enough info for someone to help, please ask what you need to know.
Thank you
Robbie

1. Have you previously posted a question here? You seem to be alluding to one but I see no posts under the moniker of RobJes
     -No John, I haven't. I think I was just getting impatient. I had been working on this for a while and couldn't figure it out. I edited the original post after      I had seen that several people had looked at the question but had not even responded. I was being impatient.
2. Can you provide a link to what you've done so far?
      Here is a link to what I have so far, I think I fixed the problem, but if you see anything I could do please let me know
     http://www.spin4life.net/main.html
     Most of the links don't work yet, was just trying to get the layout fixed first.
3. What is your question in a nutshell?
     The text below the pictures on the top was overlapping with the other text below it. But like I said, I think I have it fixed now.
Either way, thank you for your reply. I really appreciate it and if you have any suggestions I would be all ears!! Thank you

Div overlapping footer

Instead of pushing the footer and bottomlinks divs down the info div is overlapping them. It doesn't do it if I take out some of the text but I don't think the client would appreciate that. I've tried clearing loats but nothing is working for me. What have I done wrong?
http://www.russellagency.com/t2/patrick.html
Thanks for any insight!

You've still got height in your CSS applied to your <div id="white">
Follow Nancy's suggestion and change it to min-height
#white {
background: #FFF;
min-height: 700px;

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

Textarea does not work in android!!

Hello. I need to place a multiline text area for the user to enter and remain in memory. I'm using a "textarea: within a" form "in html5. Everything works fine on iPad, when I test it in Android, the keyboard is not activated.
I am new in Digital Publishing Suite and I'm doing my first project. I would greatly appreciate if you could help me. I have several days of searching and answer and I exhausted my options. I am working in INDesignCS6 and the tablet i am using to text has Android OS, 4,04

kmolina, the issue might be the z index not being onfocus or there might be divs overlapping the text area which would prevent the keyboard to appear but still show the text area to be on focus.
This is also a known issue for Android OS.
There is a similar discussion at http://stackoverflow.com/questions/3460915/webview-textarea-doesnt-pop-up-the-keyboard where they provide some workarounds.
This link also has info on text area in Android: http://developer.android.com/guide/topics/ui/controls/text.html
If those tips do not solve the issue I recommend contacting your Gold support to be investigated by a technical support engineer.

Links not working in Firefox 5

Log in button (top left of page) not working only in Firefox 5 (This does not happen in any other version of Firefox or any other browser.):
https://www.firsttennessee.com/
This is a major issue, as users are not able to log in normally...and this only became an issue when browser was updated to Firefox 5.
It looks as though this is due to the onclick event. Here is the code for the button:
<a class="btn-login" href="/login/login_per" onclick="return ntptLinkTag( this, 'lc=://page personal_bol_login&nidetail=personal_bol_login');">Log In</a>
It seems that if you double-click the button really quickly it will work and take you to the intended page. If this onclick event is removed the links works normally. Possibly the onclick could be modified in a certain way, but still yield the intended results?
Note: All plugins and addons were disabled also, so these should not be the cause or be contributing to the cause...and I tried this in IE and Mac with same results

I have designed this page with divs overlaping other divs.
Yep - <div id="apDiv1">.
Building a page using absolute positioning is a recipe for disaster. Absolute positioning is a 'specialty tool' not a general-purpose layout tool, particularly on this page. Wait'll you see what happens when someone resizes the text in their browser. Your text will spill out of the container, and become a mess.
Your links are not working because they are being masked by your content divs. Give that div a 1px solid red border to see where it falls on the page. Also, you have two instances of "ContainerAU" on the page - any given ID can only be used once on a page.
Finally, putting all of your site content on a single page is a very bad idea. You cannot bookmark interesting content, and you get a page that's heavier than Manhattan.
"this site is best viewed in 1024 x 768 resolution"
Do you really think someone is going to change their resolution to view your site? And by the way, resolution has no effect on page rendering. A given page will look the same at any resolution when viewed in the same pixel width browser. This means that the variable you have to worry about is browser viewport width, not resolution.

Embedded Video Plays on PCs but Not Macs

As the King of Siam declared, "It's a puzzlement."
I'm updating a site and have embedded a .mov from the client's YouTube channel using YouTube's preferred <iframe> code. Here is the URL: http://www.realcosmetics.com/ourStory.html.
The video will play in all of the browsers on my Win7 PC (latest Firefox, Safari, Chrome, Opera, and IE which also emulates IE7 & IE8). It will also play on the PCs of friends I've asked to test. It will not play from the page on any Macs where we've tested. [FYI, the .mov file was edited on a Mac and plays there.]
It will play on the Macs, however, from the YouTube channel. And the guy who is building the Facebook page embedded the same video on a tab using the old YouTube <object><embed> code. The test Macs have no problem playing the video from the FB page.
So, I tried switching to the old <object><embed>. Still doesn't play on the Macs, so I restored the iframe code.
What is totally confusing is that I recently embedded videos from YouTube into another site using YouTube's <iframe> code, and the client can play those on the Macs. Both pages use the same DOCTYPE (XHTML 1.0 Transitional) and code copied from YouTube. The page validates (after I removed the allowfullscreen switch which W3C said wasn't valid under the DOCTYPE).
I've searched online through forums and discussion threads for solutions, and while I found several that seemed to work for one person but not another (having to do with changing Mac preferences, etc.), none of those solutions worked on the test Macs.
Any ideas from you wonderful gurus? The answer may be staring me in the face but can't see it for having stared at it for so long. The only difference between this application and the previous one that I can think of is that the host servers are not the same company.
Thanks for pondering this!
Chris

Adninjastrator,
My advice was on the back of testing in Firebug - it was there I saw the .text div overlapping the Video. The video will become 'active' if I remove the float from #rcsVideo, however there are other floats and positioning that aren't helping anything.
To clarify, I can't get the play button to change when I hover over it (and I can't click it to play it) until I disable the float on #rcsVideo. Bizarre but that's what happens - in both FF and Chrome. No idea why this works in Windows machines without disabling the float. As you can see in the images attached, .text highlights the entire video area. Then, by disabling float:left on #rcsVideo, the text area is not covering the video.
The video itself is direct from youtube and has a flash fallback as well as many other kinds of fallback for all machines. As such, this displays in my iPad.

Border Radius Problem

I'm having trouble getting a border radius to work as I want. Please keep in mind my pages are works in progress. The corner radii of the footer div do not fill correctly when I apply a 1px border around the container div. There's a tiny bit of page background color that bleeds through at the lower rounded corners. Look here:
http://www.kiefferfurniture.com/testcss.html
If I remove the border from the container div and add it to the footer div, then it does render correctly. Look here:
http://www.kiefferfurniture.com/testcss2.html
Applying the border to both causes the border to appear as 2px wide where the divs overlap, and that is no good. How do I get a 1px border around everything so it looks and renders correctly?

I'm not seeing a problem in FF12. But older browsers need proprietary code. Note the syntax difference for Mozilla (whacky).
Also, older IE doesn't support border-radius.
#footer {
background-color: #66A7C5;
margin-top: 0px;
border: 5px solid #284B4D; /**increased border width**/
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/

SWF integration into Safari

Hello All,
I have a problem with the way my page is displayed in Safari:
I have a few DIVs, some overlapping others.
One of these DIV is in the background (lowest Z-index) and contains an SWF. (a kind of liquid picture/video in Flash)
My problem is :
In all common browsers it's fine, the website is displayed correctly, with DIVs overlapping or being overlapped according to their Z-Index.
Though, in Safari, the DIV containing the SWF always show on the foreground and hide all other DIVs, whatever the Z-index attributed to all the DIVs.
Would you have an idea how to fix this ?
Many Thanks
Mike

Hi Ned,
Thanks for the reply.
Though I have tried this already, my code is already showing :
<param name="wmode" value="transparent" />
I changed from "opaque" in the past but cannot see any difference ...
I was wondering if I should use that famous library that takes care of integrating SWF properly (no longer remember the name of that library)
Could this also be related to the containing div being positionned as "absolute" with width=100% and height=100% ?
I use absolute but I may use "static" and "float" instead maybe. (I have never been able to spot the difference between "absolute" and "float")

Everything looks fine, until page is printed

I created a page with CSS and html that looks fine in the
browser, but when I print it, 2 of the divs overlap. It's on an
intranet so I can't post a link to it, but here's the CSS. I'm
wondering if anyone can help me out. Thanks in advance.
#credits {
margin-top:10px;
margin-bottom:5px;
position:relative;
margin-right:0px;
width:100%;
background-image:url(graphics/tosbg.gif);
#ad1 {
float:right;
position:relative;
margin-top:10px;
margin-bottom:10px;
}

You sould be able to make a seperate CSS for Print vs Web.
In the printer CSS, perhaps you can just change the
positioning and margin
attributes to compensate for the printing challenges.
Plus making sure your floats are properly cleared (hard to
see if there's
anything regarding the rest of the HTML in conjunction with
the CSS without
the page)
Check out this link re: print CSS
http://www.alistapart.com/articles/goingtoprint/
Good luck
-Dave
"BruceCSI2" <[email protected]> wrote in
message
news:fha3dn$mp7$[email protected]..
>I created a page with CSS and html that looks fine in the
browser, but when
>I
> print it, 2 of the divs overlap. It's on an intranet so
I can't post a
> link to
> it, but here's the CSS. I'm wondering if anyone can help
me out. Thanks in
> advance.
>
> #credits {
> margin-top:10px;
> margin-bottom:5px;
> position:relative;
> margin-right:0px;
> width:100%;
> background-image:url(graphics/tosbg.gif);
> }
> #ad1 {
> float:right;
> position:relative;
> margin-top:10px;
> margin-bottom:10px;
> }
>

Why does f12(preview in browser mode) not render the page correctly?

Why does f12(preview in browser mode) not render the page correctly? Instead when i go to the main or original file, it renders properly? It is drriving me nuts! HAHA! Can anyone help? mainly CSS problem, div overlapping but when viewing from original file on browser not through F12, it renders correctly. CS5.5 DW. Thanks!

just that one of it is a f12 (preview in browser) while the other one is going to the directory and clicking the html page by itself.
F12 is simply a hot key that launches your browser.
The only thing I can think of to explain this is that you have a local site folder someplace in addition to a testing server site.
When you hit preview, your testing server on the localhost/ is being called up in the browser.
When you open the HTML page directly, you're seeing the local site file with unparsed data.
Try disabling your Testing Server in Sites > Manage sites > Edit...
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/

Positioning all wrong

Hi if you go to www.taxicredit.ie/index1.html you will see
that the layers in the pages are not positioned right although they
are in dreamweaver. If i position them off centre in dreamweaver
they will be correct for viewing in the web but not for all
settings. How can i position these content layers in dreamweaver so
they will be positioned correct in the web.

Hello,
In addition to what Ken said, take a look at your site in
FireFox and
enlarge the text (ctrl+ +).
The page breaks apart as the text overflows out of the AP
Divs, overlaps
other text and becomes illegible.
That's one of the biggest problems when trying to use AP Divs
(also known as
"Layers" in older versions of DW) to layout a site.
For more info and the recommended solution, please read "The
Problem with
Layers" section in this link:
http://apptools.com/examples/pagelayout101.php
AP Divs should only be used for some specific purposes.
You should use divs and CSS to control position using normal
page flow,
margins, padding, floats and so on to keep your page from
"exploding" in
people's browsers where the text size is different than in
your browser.
Take care,
Tim
"Ken Binney" <[email protected]> wrote
in message
news:gb2plb$g5j$[email protected]..
> Love your design, but absolutely positioned layers (to
quote Murray) "is
> like attempting to nail jelly to a wall"..
>
> I fear you will have to restructure using CSS positioned
DIVS.
> Not my forte, but others will be able to help.
>
>
> "tashmac" <[email protected]> wrote in
message
> news:gb2gkn$6c6$[email protected]..
>> Hi if you go to www.taxicredit.ie/index1.html you
will see that the
>> layers
> in
>> the pages are not positioned right although they are
in dreamweaver. If
>> i
>> position them off centre in dreamweaver they will be
correct for viewing
> in the
>> web but not for all settings. How can i position
these content layers in
>> dreamweaver so they will be positioned correct in
the web.
>>
>
>

Preventing overlapping divs (using spry collapsible panel)?

I'm using a collapsible panel. below that is another div.
When user clicks on collapsible panel it revelas it content. The following div with content(i.e. <div class=""> </div>
             <div class="clean-graypop">
               <input type="radio" value="a" name="question1" />...) moves down. At least when viewed in a browser.
However, when viewed in print preview, and when printed. the contents of the collapsible panels now overlaps the content of the following div contents
<p><strong>Part 1: Statistical inference</strong></p>
            <p> Questions revealed and hidden using buttons.</p>
            <div id="CollapsiblePanel2" class="CollapsiblePanel">
              <div class="CollapsiblePanelTab" tabindex="0"><a href="#" target="_self" class="button"><span>Question 1</span></a><br />
                <br />
              </div>
              <div class="CollapsiblePanelContent">
                <p>Read the following statements (1-5) about measures of effect in epidemiological studies. </p>
                <ol>
                  <li>A measure of effect is a quantity that measures the effect of a factor on the frequency or risk of an outcome.</li>
                  <li>The incidence of a disease cannot be calculated in a case-control study because the controls represent an unknown fraction of the whole population.</li>
                  <li>Rate ratios, risk ratios, odds ratios, differences between means and differences between medians can all be used as effect measures in both cohort and intervention studies.</li>
                  <li>The only measures of effect that can be calculated in a cross-sectional study are prevalence ratios and odds ratios. </li>
                  <li>A prevalence ratio can be calculated in an ecological study.</li>
                </ol>
                <p>Which one of the following options (a-e) is correct?</p>
              </div>
            </div>
            <br />
            <div class=""> </div>
            <div class="clean-graypop">
              <input type="radio" value="a" name="question1" />
              a) Statements 1 and 2 are correct<br />
              <input type="radio" value="b" name="question1" />
              b) Statements 1, 3 and 5 are correct<br />
              <input type="radio" value="c" name="question1" />
              c) Statements 1, 2, 3 and 4 are correct<br />
              <input type="radio" value="d" name="question1" />
              d) Statements 2, 3, 4 and 5 are correct<br />
              <input type="radio" value="e" name="question1" />
              e) All of the statements are correct<br />
            </div>
            <br />

Define a media type CSS for print that compensates. Read here: http://www.w3.org/TR/CSS2/media.html
Mylenium

Divs overlapping

Similar Messages

Maybe you are looking for