Trouble with css background

Hey guys, I am having trouble with some code. I have nested divs inside of a container dive for the body copy, but I am having trouble with the background of the container div going behind the nested divs. I only have this issue with the background when I go to float the nested divs.
Below is a copy of my html and a copy of my linked css style sheet.
<!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>Welcome to Optimus Lens</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
<style type="text/css">
#sector {
     background-repeat: no-repeat;
     background-position: left;
     width: 869px;
     margin-top: -51px;
     margin-right: auto;
     margin-bottom: 0;
     margin-left: auto;
#oag {
     width: 574px;
     margin-left: 23px;
     float: left;
     /* [disabled]position: relative; */
#small_col {
     width: 279px;
     margin-right: 23px;
     float: right;
     /* [disabled]position: static; */
</style>
</head>
<body onload="MM_preloadImages('images/home_over.jpg','images/our_mission_over.jpg','images/products_over.jpg','images/news_over.jpg','images/order_over.jpg','images/contact_over.jpg')">
<div id="CONTAINER">
       <div id="header"><img src="images/header_top.png" width="916" height="39" />
       <img src="images/header_logo.jpg" width="916" height="95" />
      <img src="images/header_image.jpg" width="916" height="266" />
       <img src="images/header_bar.jpg" width="916" height="9" />
</div>
      <div id="menuContainer">
     <!-- NAVIGATION -->
                <ul>
                <li>
                <img src="images/fold_left_top.png" width="22" height="35" /><img src="images/menu_left.jpg" width="197" height="35" />
                </li>
                <li>
                    <div class="menu n1"><a href="index.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/home_over.jpg',1)"><img src="images/home_up.jpg" alt="home" name="home" width="66" height="35" border="0" id="home" /></a></div></li>
                <li>
                  <div class="menu n2"><a href="mission.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Our Mission','','images/our_mission_over.jpg',1)"><img src="images/our_mission_up.jpg" alt="Our Mission" name="Our Mission" width="124" height="35" border="0" id="Our Mission" /></a></div></li>
                <li>
                    <div class="menu n3"><a href="products.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Products','','images/products_over.jpg',1)"><img src="images/products_up.jpg" alt="products" name="Products" width="98" height="35" border="0" id="Products" /></a></div></li>
                <li>
                    <div class="menu n4"><a href="news.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('News','','images/news_over.jpg',1)"><img src="images/news_up.jpg" alt="News" name="News" width="77" height="35" border="0" id="News" /></a></div></li>
                <li>
                    <div class="menu n5"><a href="order.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Order','','images/order_over.jpg',1)"><img src="images/order_up.jpg" alt="Order" name="Order" width="77" height="35" border="0" id="Order" /></a></div></li>
                <li>
                  <div class="menu n6"><a href="contact.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/contact_over.jpg',1)"><img src="images/contact_up.jpg" alt="Contact" name="Contact" width="80" height="35" border="0" id="Contact" /></a></div></li>
                <li>
                  <img src="images/menu_right.jpg" width="197" height="35" /><img src="images/fold_right_top.png" width="22" height="35" /> </li>
                </ul>
      </div>
       <div id="header_bottom"><img src="images/fold_left_bottom.png" width="22" height="38" /><img src="images/header_bottom.jpg" width="916" height="38" /><img src="images/fold_right_bottom.png" width="22" height="38" />
    </div>
     <div id="bodycopy">
       <div id="sector">
      <img src="images/home/sector_top.png" width="869" height="341" alt="sector frames" />
      </div>
       <p> </p>
       <div id="oag">
      <img src="images/home/oag_join.png" width="574" height="281" alt="save with oag" />
      <p> </p>
      <img src="images/home/bottom.png" width="574" height="132" />
      </div>
      <div id="small_col">
      <img src="images/home/optimize_small.png" width="279" height="132" />
      <p> </p>
      <img src="images/home/intuition_small.png" width="279" height="132" />
      <p> </p>
      <img src="images/home/intuition_small.png" width="279" height="132" />
      </div>
     </div>
    <div id="footer"><img src="images/footer.png" width="916" height="52" />
  </div>
</div>
</body>
</html>body {
     margin: 0px;
     background-image: url(images/background_fade_04.jpg);
     background-repeat: repeat-x;
     background-position: top;
     background-color: #DCDCDC;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 13px;
#box1 {
     background-image: url(images/bodycopybox_01.png);
     background-repeat: no-repeat;
     background-position: left;
     height: 54px;
     width: 869px;
     margin-top: 0;
     margin-right: auto;
     margin-bottom: 0;
     margin-left: auto;
#box2 {
     background-image: url(images/bodycopybox_02.png);
     background-repeat: repeat-y;
     background-position: left;
     width: 869px;
     margin-top: 0;
     margin-right: auto;
     margin-bottom: 0;
     margin-left: auto;
.bodycopybox {
     padding-right: 40px;
     padding-left: 40px;
.bodycopyboxheader {
     padding-right: 40px;
     padding-left: 40px;
     font-weight: bolder;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 14px;
     color: #21368b;
#box3 {
     background-image: url(images/bodycopybox_04.png);
     background-repeat: no-repeat;
     background-position: left;
     height: 31px;
     width: 869px;
     margin:0 auto;
#box4 {
     background-image: url(images/bodycopybox_03.png);
     background-repeat: no-repeat;
     background-position: left;
     height: 31px;
     width: 869px;
     margin:0 auto;
p {
     margin: 0px;
#header_bottom {
     width: 960px;
     margin:0 auto;
#CONTAINER {
     width: 100%;
     margin:0 auto;
#header {
     width: 916px;
     margin:0 auto;
#menuContainer {
     width: 960px;
     margin:0 auto;
     height: 35px;
#menuContainer ul{
     list-style:none;
     height:35px;
     margin:0;
     padding:0;
#menuContainer li{
     float:left;
     height:35px;
     margin:0;
     padding:0;
#menuContainer li a{
     text-align:center;
     float:none;
     height:35px;
     margin:0;
     padding:0;
div.menu{position:relative;}
.n1{
     width:66px;
     float:left;
     display:inline-block;
     clear:both;
.n2{
     width:124px;
     float:left;
     display:inline-block;
     clear:both;
.n3{
     width:98px;
     float:left;
     display:inline-block;
     clear:both;
.n4{
     width:77px;
     float:left;
     display:inline-block;
     clear:both;
.n5{
     width:77px;
     float:left;
     display:inline-block;
     clear:both;
.n6 {
     width:80px;
     float:left;
     display:inline-block;
     clear:both;
#bodycopy {
     background-color: #FFFFFF;
     width: 916px;
     padding: 0px;
     margin-top: 0;
     margin-right: auto;
     margin-bottom: 0;
     margin-left: auto;
#footer {
     width: 916px;
     margin:0 auto;
     padding: 0px;

Try this:
#CONTAINER {
width: 900px;
margin:0 auto;
background: #FFF;
overflow:hidden; /**float containment**/
/**There is no need for #sector division, you can delete it.**/
#oag {
width: 574px;
float: left;
margin-left: 25px;
#small_col {
width: 279px;
float: right;
margin-right: 25px;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists 
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

  • Trouble with CSS background scaling

    Hi,
    Please take a look at the following page I am working on at
    the moment
    http://www.dpweddingphotography.co.uk/test.html
    I am trying to acheive the look of
    http://tomwickyphotography.com/index2.php?v=v1
    Is this possible in Dreamweaver using CSS/Java? When I reduce
    my browsers window and make it really narrow, up pops the white
    blank space at the bottom of the page which I am trying to avoid.
    You can see on the other site that when it gets to a certain point
    it stops scaling down. The same with it vertically also.
    Now I know this other site is done in flash but can it be
    done in dreamweaver and if so how please?
    Thanks
    Here's the code I am using for testing:

    Im not really sure I understand your question, but if you
    were to make this
    graphic (ContactSheet-001.jpg ) a background image and set it
    to repeat,
    would that not solve the issue?
    "bensmithhull" <[email protected]> wrote in
    message
    news:gmvntr$icj$[email protected]..
    > Hi,
    >
    > Please take a look at the following page I am working on
    at the moment
    >
    http://www.dpweddingphotography.co.uk/test.html
    >
    > I am trying to acheive the look of
    >
    http://tomwickyphotography.com/index2.php?v=v1
    >
    > Is this possible in Dreamweaver using CSS/Java? When I
    reduce my browsers
    > window and make it really narrow, up pops the white
    blank space at the
    > bottom
    > of the page which I am trying to avoid. You can see on
    the other site that
    > when
    > it gets to a certain point it stops scaling down. The
    same with it
    > vertically
    > also.
    >
    > Now I know this other site is done in flash but can it
    be done in
    > dreamweaver
    > and if so how please?
    >
    > Thanks
    >
    > Here's the code I am using for testing:
    >
    >
    >
    > <html>
    > <head>
    > <title>BG</title>
    > <style type="text/css">
    > body {
    > /* for IE; otherwise, BG isn't fully stretched */
    > margin: 0px;
    > }
    >
    > #bg {
    > position: fixed;
    > margin: 0px;
    > border: 0px;
    > padding: 0px;
    > left: 0px;
    > top: 0px;
    > width: 100%;
    > height: 100%;
    > overflow: hidden;
    > z-index: 0;
    > }
    >
    > #bg img {
    > width: 100%;
    > }
    >
    >
    > #body {
    > position: absolute;
    > left: 0%;
    > top: 0%;
    > width: 100%;
    > height:100%;
    > padding: 0;
    > z-index: 10;
    > }
    >
    > li {
    > margin-bottom: 2em;
    > }
    > </style>
    > <!--[if IE]>
    > <style type="text/css">
    > body {
    > margin: 0px;
    > overflow: hidden;
    > }
    >
    > #body {
    > padding: 1em;
    > width: 100%;
    > height:100%;
    > overflow: auto;
    > }
    > </style>
    > <![endif]-->
    > </head>
    >
    > <body>
    > <!-- img must be encased in div to keep proper image
    aspect ratio -->
    > <div id="bg"><img
    src="images/ContactSheet-001.jpg"></div>
    >
    > <div id="body">Put the page's content
    here.</div>
    > </body>
    > </html>
    >

  • Viewing Troubles with CSS web

    Hello,
    I am still having trouble with a web page that I was asked to
    redesign. I decided to implement CSS into the page to change the
    appearance and navigation, however, the javascript (inherited) that
    was used on the page is having problems. I don't not know
    javascript, therefore I really can't address that issure right now.
    The page is centered in all of the browsers, along with the
    header and the container for the tab menu. The issue is the other
    containers that have side navigation or the content within the tab
    menu container.
    My concern is that the page is viewing correctly in IE6 and
    Opera but not in Netscape and Firefox. When I preview the page in
    the browsers, I get an error message in the status bar "done but
    errors on page" (still views correctly in IE & Opera).
    Hopefully, this all makes sense and everyone is not off
    enjoying pre-4th July celebrations to respond. -Thanks!
    css style

    Did you post a link to your page?
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.dreamweavermx-templates.com
    - Template Triage!
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    http://www.macromedia.com/support/search/
    - Macromedia (MM) Technotes
    ==================
    "Iwannaknow2" <[email protected]> wrote in
    message
    news:e8b5du$9q2$[email protected]..
    > Hello,
    >
    > I am still having trouble with a web page that I was
    asked to redesign. I
    > decided to implement CSS into the page to change the
    appearance and
    > navigation,
    > however, the javascript (inherited) that was used on the
    page is having
    > problems. I don't not know javascript, therefore I
    really can't address
    > that
    > issure right now.
    >
    > The page is centered in all of the browsers, along with
    the header and the
    > container for the tab menu. The issue is the other
    containers that have
    > side
    > navigation or the content within the tab menu container.
    >
    > My concern is that the page is viewing correctly in IE6
    and Opera but not
    > in
    > Netscape and Firefox. When I preview the page in the
    browsers, I get an
    > error
    > message in the status bar "done but errors on page"
    (still views correctly
    > in
    > IE & Opera).
    >
    > Hopefully, this all makes sense and everyone is not off
    enjoying pre-4th
    > July
    > celebrations to respond. -Thanks!
    > [email protected]
    >

  • I am having trouble with CSS.  Displays right in DW but not in web browser

    Hello,
    I am having difficultiy getting my webpage to look the way it does in Dreamweaver in a browers (All 5 of them).  My problems are with:
    - Title Heading Content
    - Sidebar
    I have two lines in my heading with the name of the organization.  I made two rules.  Header H1 and a sub header.  For some reason while previewing them in a browser there is a gap between the two words.  But in DW there is not.  I do not want the gaps.  How can I fix it?
    In a browser the side bar does not come all the way down.  There is a small gap between it and the footer.  Like the other problem this does not appear in DW only in the browers.
    Any help would be appreciated!  I am still learning CSS.
    I believe these are the only two files you need to look at.
    Thanks for the help!

    Also how can you see if your ISP offers the free web server space?
    Contact your internet service provider (ISP).  Often this is your telephone or cable broadband provider too.  If not, there are many free or very low cost remote server hosts around.   Do a Google search.
    I did do the validator and it told me I was fine.  I did not do a CSS one though.
    Good. So we know it's not an HTML error.  Get the FF Web Developer Toolbar.  It permits you to edit CSS in your browser to see how changes effect the layout plus a lot of other cool stuff.
    Sorry I'm still new to all of this.
    Don't fret, Tim. We all started in the same place.  You'll catch on soon enough. 
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb

  • Trouble with CSS Positioning

    Hello-
    I am working with a built-in Dreamweaver CSS template (2
    Column, Fixed, Header & Footer). I am trying to get the two
    divs that are nested inside the container div to always be 100%
    height of that container div... Just can't seem to get it right.
    For example, I have a div named "Container". Then I have two
    nested divs, one called "LeftSideBar" (set to float: Left), the
    other named "MainContent" (no float). When I go to set the
    positioning, I put the height of the interior divs to 100%, but
    only the "MainContent" div is adjusting to the height of the
    outside "Container" div. The "LeftSideBar" stays the same and does
    not grow to fill 100% of the Container.
    Below is the code for the three Divs mentioned above... Any
    help would be much appreciated.
    PS - Here is a link to the page...
    Executive.html
    Here is the CSS code for the three Divs:

    Anyone? I would really appreciate the help!

  • Trouble with CSS div column

    Just got DW CS3 and having a good time learning the new
    features. About to pull my hair out regarding one issue though, and
    I have definitely hit the wall, I pretty sure I tried every option,
    but maybe I am missing something. Here is the page in question:
    http://www.grpg.org/NewDesign
    I cannot get the right and left hand columns to just stop
    where the main container stops, i.e. the white section, before the
    footer. As you can see on the right hand column, if I make the
    height 100%, it goes past the footer, and if I make it a fixed
    length, like on the left column, it does not extend all the way to
    the bottom...I need them both to stretch with the main container,
    i.e. the white part. I have tried all the positioning tags,
    relative, absolute, etc. and none of them seem to give me what I
    want. Please HELP!

    The best (i.e., non-javascript) method to make columns look
    to be the same
    height is to use a faux-column method. Google that....
    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
    ==================
    "SnakEyez02" <[email protected]> wrote in
    message
    news:g6snvo$6c8$[email protected]..
    > Divs do not work like tables, so if you expand 2 divs
    down next to each
    > other
    > they will keep their respective heights unlike tables
    which expand. I
    > would
    > recommend taking a look at the source code of the
    following example and
    > read
    > over the tutorial that accompanies it:
    >
    >
    http://www.projectseven.com/tutorials/css/pvii_columns/col3fluid.htm
    > Example
    >
    http://www.projectseven.com/tutorials/css/pvii_columns/index.htm
    >
    > Project Seven also has some other good tutorials so I'll
    just give you
    > that
    > link for a later time:
    >
    >
    http://www.projectseven.com/tutorials/index.htm
    >
    >

  • Please help beginner with CSS background-image

    I'm using Dreamweaver CS4. I set up a local site  on my computer. D:Data\Local_sites\Gravity_Works. Under this directory using Dreamweaver I created 3 folders -  css, images and Templates. In the images folder I have an image -  bg_body_winter.jpg. In the Templates folder I have Gravity-Works-Home01.dwt . I created a new page form the template file and named it index-test01.html and saved it directly in the Gravity_Works folder
    I have this css code in a linked css file in the css folder :
    body {
        background: url(/images/bg_body_winter.jpg) no-repeat scroll center top #C1CAD6;
    body  {
        font: 100% Verdana, Arial, Helvetica, sans-serif;
        margin: 0;
    I uploaded the site to a test folder on my server at fatcow.com. You can see the page using the link below.
    http://www.openrangeimaging.com/Test/Gravity-Test/index-test01.html
    The image appears as it should in Dreamweaver Live View. It does not appear in Design view. It also does not appear when previewing the local file in a browser. The image does not appear when looking at the index-test01.html file thats on the server using the link above. The background-color I specified shows up but not the image.
    I'm confused about how I should name the path to the image. I beleive  it should be site root relative so that no matter where I upload the site,  the image can be found. Can anyone tell me how I should name the path to the image correctly.
    I feel like I should know how to do this and have searched around in the online help and the tutorial books I have but I'm just not getting it.
    TIA for any help.

    body {
        background: url(/images/bg_body_winter.jpg) no-repeat scroll center top #C1CAD6;
    Using a site root relative path, means the server will look for the images folder at
    http://www.openrangeimaging.com/images
    Try using a doc relative path while you're testing (remove the leading / from the path).

  • Trouble with css borders- won't show in browser

    When I link my external style sheet, my borders work when I preview them in ie, but when I put my site (including the external style sheet) I cannot see the borders. My borders are around tables and inside tables and around images. In some docs, the css border will show if I attach it to the doc, but if I make the css an external style sheet, it won't work. Any suggestions?
    Thank You!

    BossDJ is just asking for a link to your page.  Do you have it uploaded anywhere?  Even if it's not a good looking page, it might be the easiest way for you to get help.
    From what you say, I would guess the problem might be the way you are linking to your external style sheet.
    Try looking in the head of your document and copy the code for that into the forum post.
    <link href="../css/contact.css" rel="stylesheet" type="text/css" media="all" />
    That's an example of a link to a style sheet in one of my pages.  It's the red part that might be going wrong for you.
    Martin

  • Having trouble with CSS Properties panel

    copying all from a button (example). Many properties such as gradient don't always seem to be shown in the properties and therefor not carried across to the external (DW) page?  What am I doing wrong? No problem modifying CSS but shouldn't it be there?
    In fact if I don't put in a border to the button only the dimensions seem to be there?

    The .tif file format isn't generally recommended for web use; it's intended more for print. Historically, some browsers haven't supported the format, if I recall correctly, though many of them may do so now. (Just checked Firefox and Safari, and both seem to display the format just fine.)
    It could be that Dreamweaver doesn't recognize the .tif format. (I'm a little lazy to test this theory at the moment, but it seems quite likely.) Here's one rather old thread on this topic: http://forums.adobe.com/thread/26977
    Incidentally, this is straying from the topic of your original post and would have been better posted as a new discussion.

  • CSS Background properties

    Hi there and thanx for helping me out.
    I'm having trouble with my background properties in CSS.
    I used CS3's Two Columns, Header & Footer, Fixed template
    to build my
    site.
    I have a background which I want to use. It must not repeat
    and also
    must be fixed and not scroll with the page.
    When using this:
    background-image: url(../graphics/background.jpg);
    background-repeat: no-repeat;
    The image shows perfectly well
    BUT, when adding:
    background-attachment: fixed;
    my background does not appear and has disappeared.
    Can someone please help me? This happens with both FireFox
    and IE.
    Thank you so long.
    Deon

    Try something like this. Good luck, Tom
    table
    margin-top: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: auto !important;
    width: 850px !important;
    height: 100% !important;
    text-align: left !important;

  • Some help with my background

    Hey all. I just started on dreamweaver and I'm having trouble with the background. I made it myself in another adobe program and saved it in jpg, tif and psd. The image is 4000 x 4000 px. DW doesn't like tif and doesn't accept it. Now, for the psd and jpegs, it takes them and makes them the background but it zooms in rediculously and bloats the image.
    THanks

    Browsers have no ability to read a photoshop .psd file, you should only be using .jpg, .gif and .png for best cross-browser rendering.
    Also, 4000 x 4000 pixels is HUGE for a webpage. You really should never get more than 2000 pixels in either direction and even that is a very large image for online purposes. A background image over 200KB is too large. It would take almost 1 minute for that single file to download over a 56k modem.
    To Optimize your image in Photoshop, open the image and hit Ctrl + Shift + Alt (or command) + S to Save For Web.
    Click the 2-Up tab and take a look at the file size and speed of download for the image. You can click the bottom image in the 2-Up and move the Quality slider for higher or lower quality. That will affect the file size and load time. Choose the lowest quality setting that doesn't make your image degrade too far and click Save.
    EDIT: DW isn't zooming in at all, it is simply displaying the file at full size (without the reduction in size you are likely using in Photoshop). If you are using PS to view the entire image all at once, you are likely zoomed out several steps and are only viewing it at 16-25% actual size. My 23" monitor is only 1920 pixels wide and 1080 tall, a 4000 pixel image needs to be reduced to 22% or so in order to view the entire thing without scrolling in PS.

  • Trouble with spacing of divs vertically

    Hi all,
    I am having trouble with CSS and vertically stacking my divs, In the following code there are a number of identical divs and I want them to stack one upon the other like in a list. At the moment I need to hit returns after each div to get below the one above and it puts way too much room in between each div doing this. I am at a loss how to do set the amount of spcae between them and also to make one go directly below the other.
    Any and all help greatly appreciated
    Thanks  Rick
    <bodystyle="margin:0; padding:0;">
    <div class="logo">
      <p><img src="images/spinlogonewsml.jpg" alt="Spin City Logo" border="0" style="position: absolute; top: 10px; left: 500px; /></p>
      <p> </p>
      <p> </p>
    </div>
    <div class=main">
    <div class="imagebutton" id="left"><img src="images/img_16_n.png" width="40" height="40" alt="left button" /></div>
    <div class="help">Rotate the Object or Panorama left one increment.</div>
    <p> </p>
    <div class="imagebutton" id="right"><img src="images/img_17_n.png" width="40" height="40" alt="Right Button" /></div>
    <div class="help">Rotate the Object or Panorama right one increment.</div>
    <p> </p>
    <div class="imagebutton" id="Plus"><img src="images/img_18_n.png" width="40" height="40" alt="Plus Button" /></div>
    <div class="help">Zoom into the image a step at a time.</div>
    <p> </p>
    <div class="imagebutton" id="minus"><img src="images/img_19_n.png" width="40" height="40" alt="Minus Button" /></div>
    <div class="help">Zoom out of the image a step at a time.</div>
    <p> </p>
    <div class="imagebutton" id="AutoRotate"><img src="images/img_20_n.png" width="40" height="40" alt="Auto Rotate Button" /></div>
    <div class="help">Starts or stops auto rotation of the Object or Panorama.</div>
    <p> </p>
    <div class="imagebutton" id="DefaultView"><img src="images/img_23_n.png" width="40" height="40" alt="Default Vew Button" /></div>
    <div class="help">Resets the Object or Panorama to it's starting position.</div>
    <p> </p>
    <div class="imagebutton" id="RotateMode"><img src="images/img_25_n.png" width="40" height="40" alt="RotateMode" /></div>
    <div class="help">
      Sets the mouse interactive mode to 'Rotate' allows for rotating the Object when zoomed in, toggles with 'Move' button below.
    </div>
    <p> </p>
    <div class="imagebutton" id="MoveMode"><img src="images/img_24_n.png" width="40" height="40" alt="Move Mode Button" /></div>
    <div class="help">Sets the mouse interactive mode to 'Move' allows for dragging the Object when zoomed in, toggles with 'Rotate' button above.</div>
    <p> </p>
    <div class="imagebutton" id="SoundButton"><img src="images/img_28_n.png" width="40" height="40" alt="Sound Button" /></div>
    <div class="help">Use this button to mute the sounds played by the interactive presentation.</div>
    <p>  </p>
    </div>
    </body>
    </html>

    Way too many divisions.  All you need is one main division or possibly two.  The rest is easily contained inside <p> tags.
    Copy and paste this into a new HTML document.
    <!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>Vr help File</title>
    <style type="text/css">
    /**zero out browser default settings on everything**/
    * {margin:0; padding:0; line-height: 100%; font-size: 100%;}
    p {
    line-height: 1em;
    font-size: 16px;
    margin-bottom: 12px; /**space between paragraphs**/
    #logo {
    float:right;
    width: 35%;
    margin-right: 150px /**adjust as req'd**/
    </style>
    </head>
    <body>
    <div id="logo">
    <img src="http://www.spincityimaging.com/images/spinlogonewsml.jpg" width="74" height="53" class="logo" />
    <!--end logo --></div>
    <p><img src="http://www.spincityimaging.com/images/img_16_n.png" width="40" height="40" alt="left button" />Rotate the Object or Panorama left one increment.</p>
    <p><img src="http://www.spincityimaging.com/images/img_17_n.png" width="40" height="40" alt="Right Button" />Rotate the Object or Panorama right one increment.</p>
    <p><img src="http://www.spincityimaging.com/images/img_18_n.png" width="40" height="40" alt="Plus Button" />Zoom into the image a step at a time.</p>
    <p><img src="http://www.spincityimaging.com/images/img_19_n.png" width="40" height="40" alt="Minus Button" />Zoom out of the image a step at a time.</p>
    <p><img src="http://www.spincityimaging.com/images/img_20_n.png" width="40" height="40" alt="Auto Rotate Button" />Starts or stops auto rotation of the Object or Panorama.</p>
    <p><img src="http://www.spincityimaging.com/images/img_23_n.png" width="40" height="40" alt="Default Vew Button" />Resets the Object or Panorama to it's starting position.</p>
    </body>
    </html>
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb

  • Spry Sliding Panel bugs with Flash SWF, iFrames, CSS background images

    Greetings,
    I'm working on a site right now that is build with Spry 1.6
    Sliding Panels. On the home panel I have integrated a looping SWF,
    and scrolling iFrames on the Overview panel. After extensive
    research on these forums, I'm still scratching my head at a few
    bugs listed below:
    • Firefox (MAC v2.0.0.14)
    - The SWF on the home panel doesn't hide properly when
    sliding to a different panel. I have set 'wmode opaque' parameters
    to the flash file, but this seems to have not resolved the issue.
    - Additionally, I've noticed that sometimes the SWF will not
    finish sliding into the correct position when clicking to the home
    panel (the SWF will stop sliding several pixels left of the
    original positioning).
    - The SWF (which happens to be a loop animation) resets every
    time the home panel is visited. In my testing, this does not happen
    in any other browser.
    - On the Overview panel, scrolling iFrames are used on the
    "Staff Profiles". These iFrames don't hide properly when clicking
    through other panels, as the scroll bars are still viewable.
    - Overall, the sliding animation is a bit choppy compared to
    all other browsers. I can live with this, but I wonder if I have
    improper code somewhere?
    • Opera (MAC v9.27)
    - Same issue as above concerning the fact that the SWF
    appears outside of the sliding panel view port.
    • IE 6
    - CSS background images flash during the sliding panel
    animation.
    * Site page links *
    Main URL
    Home
    Page iFrame
    Overview
    Page iFrame
    * CSS *
    Main
    site-wide CSS
    Sliding
    Panels CSS
    * Scripts *
    Sliding
    Panels Sript
    Any suggestions, pointers would be much appreciated!
    Cheers,
    Chris

    Greetings,
    I'm working on a site right now that is build with Spry 1.6
    Sliding Panels. On the home panel I have integrated a looping SWF,
    and scrolling iFrames on the Overview panel. After extensive
    research on these forums, I'm still scratching my head at a few
    bugs listed below:
    • Firefox (MAC v2.0.0.14)
    - The SWF on the home panel doesn't hide properly when
    sliding to a different panel. I have set 'wmode opaque' parameters
    to the flash file, but this seems to have not resolved the issue.
    - Additionally, I've noticed that sometimes the SWF will not
    finish sliding into the correct position when clicking to the home
    panel (the SWF will stop sliding several pixels left of the
    original positioning).
    - The SWF (which happens to be a loop animation) resets every
    time the home panel is visited. In my testing, this does not happen
    in any other browser.
    - On the Overview panel, scrolling iFrames are used on the
    "Staff Profiles". These iFrames don't hide properly when clicking
    through other panels, as the scroll bars are still viewable.
    - Overall, the sliding animation is a bit choppy compared to
    all other browsers. I can live with this, but I wonder if I have
    improper code somewhere?
    • Opera (MAC v9.27)
    - Same issue as above concerning the fact that the SWF
    appears outside of the sliding panel view port.
    • IE 6
    - CSS background images flash during the sliding panel
    animation.
    * Site page links *
    Main URL
    Home
    Page iFrame
    Overview
    Page iFrame
    * CSS *
    Main
    site-wide CSS
    Sliding
    Panels CSS
    * Scripts *
    Sliding
    Panels Sript
    Any suggestions, pointers would be much appreciated!
    Cheers,
    Chris

  • CSS -- background color doesn't show with scroll bar

    I have a nav bar with a background-color that shows up fine if the image opens to the right size.  If, however, the window opens small and I have to use the scroll bar to move things over, the color for the nav bar isn't there.
    Any thoughts would be appreciated.
    Here's the code:
    HTML:
    <body>
        <div id="Global">
            <div id="navHeader">
                <div id="navBar">
                    <ul class="navStyle">
                        <li>Home</li>
                        <li>Chamber Info</li>
                        <li>Event Galleries</li>
                        <li>Contact Us</li>
                        <li>Join</li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
    CSS:
    @charset "utf-8";
    /* CSS Document */
        padding:0 0;
        margin:0 0;
    body{
        background-color:#f1eee3;
    #Global{ margin:0 auto;}
    #navHeader{
        width:100%;
        height:40px;
        margin:0 auto;
        background-color:#bfbfbf;
    #navBar{
        margin: 0 auto;
        width:960px;
        text-align:center;}
    .navStyle{
        font-family:"Eras Medium ITC",Arial, Helvetica, sans-serif;
        font-size:18px;
        padding-top:10px;
    .navStyle li{
        display:inline;
        padding-left:20px;
        padding-right:20px;

    Does this help?
    #navHeader{
    width:100%;
    min-height:40px;
    _height:40px; /**for IE6 only**/
    margin:0 auto;
    background-color:#bfbfbf;
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb
    http://alt-web.blogspot.com

  • Hi, having trouble with my iMac on startup. Background screen appears, but no icons,

    Having trouble with my iMac- on startup, the background screen appears, but no icons. The spinning beach ball appears for quite a long while, then when the icons finally come up, when I open a finder window, the only icons to appear are the Network and Macintosh HD icons. I've tried to repair disk permissions: this came up with heaps of errors, which it then fixed, but the original problem remains.
    Any suggestions on how to fix this?
    thanks

    Please read this whole message before doing anything.
    This procedure is a test, not a solution. Don’t be disappointed when you find that nothing has changed after you complete it.
    Step 1
    The purpose of this step is to determine whether the problem is localized to your user account.
    Enable guest logins and log in as Guest. For instructions, launch the System Preferences application, select Help from the menu bar, and enter “Set up a guest account” (without the quotes) in the search box. Same problem(s)?
    After testing, log out of the guest account and, in your own account, disable it if you wish. Any files you created in the guest account will be deleted automatically when you log out of it.
    Note: If you’ve activated “Find My Mac” or FileVault in Mac OS X 10.7 or later, then you can’t enable the Guest account. Create a new account in which to test, and delete it, including its home folder, after testing.
    Step 2
    The purpose of this step is to determine whether the problem is caused by third-party system modifications that load automatically at startup or login.
    Disconnect all wired peripherals except those needed for the test, and remove all aftermarket expansion cards. Boot in safe mode and log in to the account with the problem. The instructions provided by Apple are as follows:
    Be sure your Mac is shut down.
    Press the power button.
    Immediately after you hear the startup tone, hold the Shift key. The Shift key should be held as soon as possible after the startup tone, but not before the tone.
    Release the Shift key when you see the gray Apple icon and the progress indicator (looks like a spinning gear).
    Safe mode is much slower to boot and run than normal, and some things won’t work at all, including wireless networking on certain Macs.
    The login screen appears even if you usually log in automatically. You must know your login password in order to log in. If you’ve forgotten the password, you will need to reset it before you begin.
    Same problem(s) in safe mode?
    After testing, reboot as usual (i.e., not in safe mode) and verify that you still have the problem. Post the results of steps 1 and 2.

Maybe you are looking for

  • Problem with Speaker and Headset in Windows Vista

    Hi, I just got my Macbook Pro 13" and having problem with speaker and headset when working with Windows Vista (I have installed the driver from bootcamp). The sound very weak if I play music from Itunes or youtube even the volume already full and if

  • How to pick out the main body/article when surrounded by ads ?

    Hi all, First of all, not exactly sure where I should post this, so please let me know a better forum if you know of one. I am working with a linguisitic search engine that takes pdf articles and indexes them based on lists of keywords, and then does

  • Error While configuring SMS

    Hi All, I configured SMS by using transaction code SCOT and while sending the sms i am getting the below error "No Delivery to SMS:9*********** due to problem with communication connection. No delivery to SMS:9********** due to problem with communica

  • FRM-40209 Field must be of form . - for a non-based text item

    Hello, When I try querying using a VARCHAR2 non-based text item in a table-based block, setting dynamically in PRE-QUERY trigger the DEFAULT_WHERE property for its block, in case I use characters > or < (for bringing values greater or smaller than th

  • T.CODE SEARCH FROM TABLE

    Hii, In our company, we are going to do the acrhiving projject,so in second phase we have to find out t.code which using th4e database,ex.EA60 used table ERDK, We have alomst 110 tables, we have idetified the below process, 1.take program of each t.c