Content not aligning properly?

I'm Having trouble getting my content to align properly, it looks right in dreamweaver but when I put it (doesn't matter what internet browser) it is not aligned the same way it is in dreamweaver. The site is www.thecrowdedroom.ca It's pretty obvious what isn't linging up.... The nave container the page identifier and the page content
Here's my code, I've put the code for the style sheets below the source code
SOURCE CODE:
<html>
<head>
<title>crowded room - home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="stylesheet1.css" rel="stylesheet" type="text/css">
</head><center>
<body>
<div id="container">
<div id="navbar" align="left">
        <ul>
            <li><a href="CRhome.html"><img src="images/home-button.jpg" alt="Home" width="75" height="23" border="0"></a></li>
            <li><a href="CRprojects.html"><img src="images/projects-button.jpg" alt="Projects" width="87" height="23" border="0"></a></li>
            <li><a href="CRinfo.html"><img src="images/rundown-button.jpg" alt="Info" width="131" height="23" border="0"></a></li>
            <li><a href="CRcontact.html"><img src="images/contact-button.jpg" alt="Contact" width="89" height="23" border="0"></a></li>
        </ul>
</div>
<div id="display">
  <img src="images/home-display.jpg" width="182" height="34">
</div>
<div id="content">
Welcome to the Crowded Room<br><br>
Home of Web Developement, Media Production, and Event Planning<br>
Take a look around, check out our current and past projects  
</div>
<div id="footer">
  Copyright © 2009 CROWDED ROOM PRODUCTIONS. All rights reserved
</div>
<this is the container div nothing goes below it>
</div>
</body></center>
</html>
STYLE SHEETS
#container {
    background-image: url(images/CRhome.jpg);
    background-repeat: no-repeat;
    height: 800px;
    width: 800px;
    margin-top: 30;
    margin-right: auto;
    margin-left: auto;
#container #navbar ul  {
    list-style-type: none;
    clip: rect(auto,auto,auto,auto);
    height: 4px;
    width: 100px;
#container #navbar ul li {
    margin-top: 6px;
#navbar {
    height: 100px;
    width: 100px;
    float: none;
    margin-top: 202px;
    margin-left: 50px;
    position: absolute;
    left: 254px;
    top: 87px;
#display {
    position: absolute;
    left: 311px;
    top: 630px;
#content {
    letter-spacing: normal;
    text-align: left;
    word-spacing: normal;
    overflow: auto;
    height: 122px;
    width: 760px;
    margin-top: 635px;
    padding-top: 20px;
    padding-right: 20px;
    padding-left: 20px;
    position: absolute;
    font-family: "Myriad Pro";
    font-size: 14px;
    font-style: normal;
    line-height: 25px;
    vertical-align: middle;
    left: 284px;
    top: 30px;
#footer {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 9px;
    height: 14px;
    width: 800px;
    position: absolute;
    text-align: center;
    left: 283px;
    top: 785px;
    margin-top: 30;
    margin-right: auto;
    margin-left: auto;
#contentpic {
    letter-spacing: normal;
    text-align: left;
    word-spacing: normal;
    overflow: auto;
    height: 150px;
    width: 200px;
    margin-top: 635px;
    padding-top: 20px;
    padding-right: 20px;
    padding-left: 20px;
    position: absolute;
    font-family: "Myriad Pro";
    font-size: 14px;
    font-style: normal;
    line-height: 25px;
    vertical-align: middle;
    left: 12px;
    top: 32px;
#contentwordpic {
    letter-spacing: normal;
    text-align: left;
    word-spacing: normal;
    overflow: auto;
    height: 150px;
    width: 560px;
    margin-top: 635px;
    padding-top: 20px;
    padding-right: 20px;
    padding-left: 20px;
    position: absolute;
    font-family: "Myriad Pro";
    font-size: 14px;
    font-style: normal;
    line-height: 25px;
    vertical-align: middle;
    top: 31px;
    left: 214px;

http://www.thecrowdedroom.ca 
I can tell you that having no document type declaration (DTD) on the first line of your HTML docs is not a good thing and sends your page into Browser Quirks Mode.
DW   automatically applies a doc type to new pages so you may have copied & pasted this code  from someplace else ??
To fix this problem, Go to File Menu > Convert > Select a Doc type that fits your coding skills.  Either XHTML or HTML (transitional).
HINT:  It's a good idea to use HTML heading <h1> <h2> <h3> or paragraph <p> tags around your text content for search engines to find.  Heading 1 carries greater importance than heading 2 and so on...
Related Links:
HTML Validator - http://validator.w3.org 
CSS Validator - http://jigsaw.w3.org/css-validator/  
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
Good luck with your project,
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

  • IPad air Smart Cover not aligning properly

    Is anyone else having issues?
    My nice new iPad air arrived on Tuesday, 3 days latter I received my apple Smart Cover! Why not send them together? That's another storey.
    After a days use, I notice that the cover is not aligning properly, then I read online that it could be an issues with the actual iPad not the cover, anyone else having these problems?
    Experienced outcomes?
    Regards
    Norm.

    You don't have this option?
    Open Settings->General->Lock/Unlock...make sure it is toggled on.
    Also, try restarting the iPad then check Settings again.
    When the iPad recognizes that the cover is installed that setting should appear and as I can recall, it defaults to that setting being ON.  Are you using an Apple Smart Cover or a third party cover.  If it's an Apple cover & that setting doesn't appear, take the cover back to the store & exchange it,  there may be a problem with the magnet placement in the cover.  If that doesn't fix the issue then you may have to make an appointment at a Genius Bar to have them run a diagnostic on your iPad.

  • New Macbook Pro Lid not Aligned Properly

    Hi all,
    I received my new 2010 15" HR i7 Macbook Pro earlier this month (May) and have been very happy with it up until yesterday when I noticed that the screen lid and the rest of the body do are not aligned properly when the lid is closed. There is an offset of about 1.5mm in the left-to-righthand direction.
    The computer is only weeks old and hasn't been dropped or mishandled, so I was wondering where I stand here. It's not a massive deal really, but I feel as a virtually brand new machine, this thing should be perfect. Would I be entitled to a replacement for this defect, and if so, how long would I likely be without a machine whilst I send it back etc. (it has some customisations so can't be exchanged in a retail store).
    Thanks in advance

    Hi chapowski and welcome to Apple Discussions!
    You are asking questions here which we don't really have any way of answering. Your best bet is to contact Apple ((44) 0844 209 0611 in the UK) and let them know your problem, and ask what they can do for you.
    Just FYI, Apple typically does not replace computers unless they are unable to repair them. Since it is not a stock machine, a repair would likely take less time than a replacement anyway.
    Best of luck.

  • Div tags not aligning properly

    I can not get my div tags to align properly.  I have one div tag set to float left, and the other to float right.  I can get the first set to work, but as soon as I add in another set, they both float left.  I have played around with margins, borders, and padding and nothing seems to be working.  Here is the code:
    <style type="text/css">
    .pageborder {
    width: 795px;
    height: 1000px;
    border: medium solid #008478;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 10pt;
    .prodboxleft {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 10pt;
    background-color: #76c6be;
    text-align: left;
    width: 369px;
    float: left;
    height: 150px;
    border: medium dashed #008478;
    margin-top: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-left: 12px;
    padding: 0px;
    .prodboxright {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 10pt;
    background-color: #76c6be;
    text-align: left;
    width: 369px;
    float: right;
    height: 150px;
    border: medium dashed #008478;
    margin-top: 5px;
    margin-right: 12px;
    margin-bottom: 5px;
    margin-left: 5px;
    padding: 0px;
    </style>
    </head>
    <body>
    <div class="pageborder"><div class="prodboxleft">Content for  class "prodboxleft" Goes Here</div>
    <div class="prodboxright">Content for  class "prodboxright" Goes Here</div>
    <div class="prodboxleft">Content for  class "prodboxleft" Goes Here</div>
    <div class="prodboxright">Content for  class "prodboxright" Goes Here</div>
    <div class="prodboxleft">Content for  class "prodboxleft" Goes Here</div>
    <div class="prodboxright">Content for  class "prodboxright" Goes Here</div>
    </div>

    Thank you, unfortunately that is not the issue.  The border is set in pixels and it is wide enough to accommodate the floated containers.  As I mentioned in my first post, the first set of containers work perfectly, then the second set does not, and yet a third set does.  It is almost as if there is something in the middle of the space that is not allowing the containers to behave properly.  I have attached a screen shot to show what I am talking about.

  • Front panel not aligning properly on scale print

    So I've created a custom print VI with various graphics that I'd like to print on an 11x17 sheet of paper in landscape mode, but for the life of me I can't get the thing to align properly.  I want the front panel to print centered with 0.1 - 0.2 inch margins all around, but instead of doing this, the front panel will sometimes print aligned to the left and top or other times to the right and top (with wrong margins always on two sides, sometimes three or four).  I'm using a programmatic call to the easy print function that scales the front panel to fit on this size.  However, even after making the proportions of objects on the VI 11:17 (vertical: horizontal) I still can't seem to get this thing to center properly.  Any ideas of what the problem could be?

    Ok, So I created a blank VI with a 1280 x 1978 frame decoration, yet the print preview in labview still doesn't seem to show the thing with proper alignment.  
    Looking at the picture, looks like it's aligned along the right and top of the page rather than uniformly centered.  Ideally, the frame would uniformly cover all the edges around the page in the preview.  I suspect this is an issue with LabVIEW and not my printer, as I can set my printer to borderless printing. 
    Any ideas? 
    Attachments:
    print align.JPG ‏22 KB

  • Scalable content not displaying properly in IE 10 and above

    I am using Captivate 7, publishing a swf in flash 10 and selecting "scalable html content".  In Internet Explorer 10 and 11 the content looks like the following screen shot:
    The content is not scaling to screen resolution and is unreadable by the end users.
    Any suggestions?

    AFdeveloper - Yes, we could launch content in a new window but if I can't solve this the solution will probably be not to scale my content. 
    BUT I have some new information.
    On MY workstation, with IE 10 and Flash 11 the modules scale properly in the production LMS server but not on our testing LMS server.  There is no difference to the modules.
    Also, I have copied some modules to an external hard drive.  If I run the modules from the external hard drive they do not scale properly.
    I thought it could be the Global Flash settings but changing the settings didn't make a difference.
    Not sure if this additional information will help anyone with suggesting a solution.  Even if you could provide me someelse to try I would appreciate it.  I'm kind of at a road block of what to do next.  If you need anymore information please let me know.

  • Viewing header info not aligning properly

    I've been using Microsoft Entourage for about 6 years or so and decided to try out the Mail program. I'm running Mail 2.1.2 on OS 10.4.11. Everything is working fine except the way the emails are displayed. Header info, "From" and "To" are not aligning up properly with the names.
    The sender's name (email address) is at the top and there are approx 12 line spaces (blank) before the "From:". "Subject" and "Date" info are aligned properly. Following the Date info, the receiver's name and email address is displayed followed by about 12 line spaces (blank) before the "To:". This makes the header info take up a lot of space with empty area.
    I tried changing fonts and sizes with no luck. I ran all the updates which also didn't fix the problem. FYI, I use the Suitecase to manage my fonts.
    Any suggestions will be greatly appreciated.
    Thank you!

    This is a font issue. You’ve probably either disabled or removed a font that Mail needs to work properly (e.g. Helvetica):
    Font Management in Mac OS X Tiger and Panther
    You can only change in Preferences the fonts that Mail uses for some things. The font that Mail uses for other things, and for message headers in particular, is fixed (Helvetica).

  • Content Not Coming Properly after converting a Smartform to PDF.

    I am converting a smartform into PDF format using CONVERT_OTF .
    This smart form will be triggered from the portal at the occurance of an event .After Conversion some texts are properly outputted in the PDF but some texts which are in  arabic are not coming properly ( shows some junk data in a language other than Arabic).
    Can any give a Solution ??
    Thanks
    Chaitanya Sharma
    Edited by: chaitanya  sharma on Jan 28, 2009 2:15 PM

    hi
    try using this fm CONVERT_OTF_2_PDF
    hope this helps
    regards
    Aakash Banga

  • Images not aligning properly in table cells

    I have a simple table (1 row, 4 columns).
    Three of the images have identical dimensions (108 x 200 pixels). After placing them each into a cell of the table, the middle image is not aligned with the other two. Instead, it is higher in the cell.
    I looked at source code, and everything appears to be identical. Also, every image has the default setting for alignment (center, middle).
    How can I fix this?
    Thanks

    OK thanks for posting a link to your site.  The error is in Line 73 .  The code snippet looks like this:
    Click on the above picture to get a magnified version of it and you will see that in Line 73 you have something like this:
    & nbsp;
    Delete it and your problem is solved.
    Good luck.

  • Some images and handwritten content not converting properly

    Some images on a pre printed pdf form and hand written details on a form are not converting properly and come out as rubbish.
    Can this be fixed?

    Hi
    thanks - I will try a different browser, but attached are the two forms.  they both have a handwritten element with a signature or the client completing the one with boxes by putting x's in the boxes to answer the questions.  This is what is not working.  It all comes out mixed and changed.
    Thanks.
    Sam

  • Content in browser view is not aligned properly but looks fine in design/live view

    Here is my site: www.kaleongdesigns.com
    Here is the coding:
    <!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">
    <!--
    body {
              font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
              background: #42413C;
              margin: 0;
              padding: 0;
              color: #000;
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
              padding: 0;
              margin: 0;
    h1, h2, h3, h4, h5, h6, p {
              margin-top: 0;           /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
              padding-right: 15px;
              padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
              border: none;
    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
    a:link {
              color: #42413C;
              text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    a:visited {
              color: #6E6C64;
              text-decoration: underline;
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
              text-decoration: none;
    /* ~~ this fixed width container surrounds the other divs ~~ */
    .container {
              width: 1024px;
              background: #FFF; /* the auto value on the sides, coupled with the width, centers the layout */
              height: 768px;
              margin-top: 0;
              margin-right: auto;
              margin-bottom: 0;
              margin-left: auto;
    /* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
    .header {
              height: 89px;
              width: 1024px;
              background-color: #ADB96E;
              background-image: url(images/KADhomepage2_01.jpg);
    /* ~~ This is the layout information. ~~
    1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
    .content {
              height: 536px;
              width: 1024px;
              padding-top: 10px;
              padding-right: 0;
              padding-bottom: 10px;
              padding-left: 0;
              background-image: url(images/KADhomepage2_02.jpg);
    /* ~~ The footer ~~ */
    .footer {
              height: 101px;
              width: 1024px;
              padding-top: 10px;
              padding-right: 0;
              padding-bottom: 10px;
              padding-left: 0;
              background-color: #CCC49F;
              background-image: url(images/KADhomepage2_03.jpg);
    /* ~~ miscellaneous float/clear classes ~~ */
    .fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
              float: right;
              margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
              float: left;
              margin-right: 8px;
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
              clear:both;
              height:0;
              font-size: 1px;
              line-height: 0px;
    #apDiv1 {
              position:absolute;
              width:433px;
              height:41px;
              z-index:1;
              left: 300px;
              top: 24px;
    -->
    </style>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    </head><body>
    <div class="container">
      <div class="header"><!-- end .header -->
        <div id="apDiv1">
          <ul id="MenuBar1" class="MenuBarHorizontal">
            <li><a href="index.html"><strong>Home</strong></a></li><li><a href="KADres.html">Resume</a></li><li><a href="KADport.html">Portfolio</a></li><li><a href="KADproc.html">Process</a></li><li><a href="KADcon1.html">Contact</a></li>
          </ul>
        </div>
      </div>
      <div class="content">
        <h1> </h1>
      <!-- end .content --></div>
      <div class="footer">
        <p> </p>
        <!-- end .footer --></div>
      <!-- end .container --></div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body></html>

    Your Menu is situated in an absolutely positioned div
    #apDiv1 {
        height: 41px; 
        left: 300px;
        position: absolute;
        top: 24px;
        width: 433px;
        z-index: 1;
    AP divs are removed from the document flow and remain in exactly the same place regardless of user preferences. For example if text size is changed, your design moves, but your menu stays where it was.
    Try this
    #apDiv1 { 
        height: 41px;    left: 300px;
        position: relative;
        top: 24px;
        width: 450px;
        z-index: 1;

  • Labels are not aligned properly when printed using HP5610

    Hi ,
    I am trying to print Avery J8160 labels using my HP 5610 Officejet. I am using official Avery templates and have checked all printer settings, there are no issues.
    Everything is fine if I use plain paper but if I use Avery label A4 sheet, the alignment goes out. It's as if the label paper is not being drawn into the printer properly. All print settings are fine. I have contacted Avery and they have no explanation. Avery infact said that there is issue of alignment with printer and contact HP for finding solution. And they said most probably its something to do with printer treating both papers differently and some kind of skidding on rollers or something else resulting into this issue.
    I have just done a quick test, I removed top row of labels and then feed the sheet and everything is fine. To me somehow seems that its thickness of label sheet and somehow printer start printing before actual print area on sheet starts. While in case if paper is thin (normal paper or top row of labels removed) , everything is fine.
    Any help would be great, I have already wasted many sheets of labels.
    regards
    Maninder

    Which SQL client and Linux version are we talking about?
    Assuming you are using the Oracle sqlplus client... it does not support command line editing and history using the arrow keys. For this to work you will have to install a product called Readline Wrapper. See my answer at the General Database forum:
    sqlplus command line editing

  • Data not aligned properly

    Here's my rtf structure
    group-by Product
    <there's a table in here>
    for-each Company
    <there's a table in here>
    for-each Community
    <there's a table in here>
    Data appear as below
    Computer
    <there's a table in here>
    Company 1000
    <there's a table in here>
    Community A
    <there's a table in here>
    Community B
    <there's a table in here>
    Community C
    <there's a table in here>
    Company 2000
    <there's a table in here>
    Community D
    <there's a table in here>
    Community E
    <there's a table in here>
    Right now, the Community C table header for example, will be on page 1 and its table will be on page 2 because its table does not fit on page 1.  So I selected for-each Community then paragraph -> Line and Page Breaks -> Keep with Next.  Then it works but the data appears as below
    Page 1
    Computer
    <there's a table in here>
    Company 1000
    <there's a table in here>
    <THERE A BIG BLANK SPACE HERE>
    Page 2
    Community A
    <there's a table in here>
    Community B
    <there's a table in here>
    Community C
    <there's a table in here>
    The Community Headers stay with their tables but there's a big blank space between a Community A and Company 1000
    I did the same Keep with Next with for-each Company and same result, I did it for group-by Product and same result, big blank space
    How can we make it so data will flow with each other and if a table header (Product or Company or Community) does not fit on a page then it will go to the next page please?

    Thanks Kavipriya for your help. The report shows data properly now.
    Thanks Nagireddy for your offer.

  • Dynamic Header row for table not aligned properly on 2nd Page

    Hello Friends,
    The problem is like this :
    We have a table with dynamic number of columns and few of them are being hidden at runtime based on a configuration table.
    Now problem while printing is that first page is printing the header row, but same is not being repeated on subsequent pages.
    Please see the layout
    Header row is warped in 2 subforms both are flowed - western text so that they will get squeezed if column is hidden
    Here are the properties for subforms
    1) overflowLeader => Flow top-bottom
    2) OF_SF => Flowed , western text
    On 2nd page all the columns are getting aligned to left hand side whereas printing fine on first page.
    Thanks,
    Nitin

    Hi Nitin,
    in this case, you must use more nested wrapper subforms and set the root subform layout from "flow" to "positioned". I cannot give advice on how the wrapper subforms are organized, since it depends on your logic, just try it out.
    Cheers,
    Tao

  • Avery Barcode labels does not align properly when printed from Adobe Reader 11.0.0

    Hi,
    I have barcode labels in a PDF (Version 1.4, Acrobat 5.x). PDF producer is PPAlambic(Distiller). When I try to print the PDF on to Avery 5160 sheet containing 30 labels (10 rows; 3 labels in a row), always the barcodes on the first column goes beyond the left margins and hence does not print the full barcode. PDF size is 8.5" * 11" .I have tried following options in Print dialog box:
    1. Actual Size + Portrait + Letter size
    2. Shrink oversized pages + Portrait + Letter size
    3. Fit + Portrait + Letter size
    None of the above options resolved my issue.
    When I open the same PDF in Adobe Reader 11.0.07, it prints perfectly. Does someone help me understand if this is a known defect in Adobe 11.0.0 and is there any workaround in 11.0.0 itself to adjust the alignment?
    Note: PDF is not editable as it comes from a third party vendor. Please help.

    Hi,
    I have barcode labels in a PDF (Version 1.4, Acrobat 5.x). PDF producer is PPAlambic(Distiller). When I try to print the PDF on to Avery 5160 sheet containing 30 labels (10 rows; 3 labels in a row), always the barcodes on the first column goes beyond the left margins and hence does not print the full barcode. PDF size is 8.5" * 11" .I have tried following options in Print dialog box:
    1. Actual Size + Portrait + Letter size
    2. Shrink oversized pages + Portrait + Letter size
    3. Fit + Portrait + Letter size
    None of the above options resolved my issue.
    When I open the same PDF in Adobe Reader 11.0.07, it prints perfectly. Does someone help me understand if this is a known defect in Adobe 11.0.0 and is there any workaround in 11.0.0 itself to adjust the alignment?
    Note: PDF is not editable as it comes from a third party vendor. Please help.

Maybe you are looking for