2 column fixed behaving as elastic? and image reflowing

Apologies if these 2 questions have been asked previously but I couldn't find the answer when I searched the forums today.
I hope someone can help with 2 (probably simple) issues with my web site:
I selected a fixed template when starting dreamweaver that shows correctly in design & live previews:
but when I view in Mozilla Firefox or Explorer the sidebar aligns to the left of the browser window and the main image flows under the sidebar:
See www.paphospropertysolutions.com to see live & view source code.
I have tried various alignment options in CSS and HTML but no joy. Any ideas?
Many thanks for reading.
Paul

(The HTML comments inside the style tags are fine. They hide the stylesheet from ancient browsers which would otherwise display the CSS rules as plain text in the page)
The CSS in the <head> section of the page is partially working but mostly ignored because it's broken in one spot.
The embedded CSS rule for the <body> tag is broken (incomplete) for the background attributes in red below:
body  {
font: 100% Verdana, Arial, Helvetica, sans-serif;
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;
margin-left: 0px;
background: image(;
background-image: url();
background-color: #FFF;
Up to the margin-left attribute is read and honoured by the browsers. After that is ignored.
You can see this via View > Source in IE8 where the coding changes color after margin-left.
This is causing the rest of the CSS rules which create the page structure from that point on to be ignored by the browsers.
Either delete or properly complete the background attributes in the rule above.

Similar Messages

  • How can I fix this? Text and images collide, space and margins are not taking into account. The whole page layout is a mess.

    Hi,
    Whatever I design in muse is totally different from what the preview in the browser shows. Texts crashed with images, and spaces and margins are not taken into account,
    Is there a way to fix this? Is it a bug?
    Thanks.

    Hi Federico,
    Please take a look at this forum post for a similar discussion : Aligning multiple HTML objects on one page?
    Regards,
    Aish

  • PLEASE HELP - Problem with 2 column fixed template in Dreamweaver CS3

    I am trying to create a website using the 2 column fixed, right sidebar, header and footer html template in Dreamweaver CS3.  I tried putting a picture in the right side bar as well as with in the main content or left portion of the page, and neither picture is showing up when I view it in any of the browsers I'm using.
    I've made some minor changes in colors and sizing, but other than that no other changes.  The pic I put in for the header is showing up just fine though.
    Any help or advice to solve this issue would be greatly appreciated.
    Thanks!!

    Here is the base Dreamweaver code including the pic references that I'm trying to show on either side - when the browser opens, it only shows a blank space where the pics should be... let me know what you think.  Thanks!!
    <!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"><!-- InstanceBegin template="/Templates/AL TemplateNEW.dwt" codeOutsideHTMLIsLocked="false" -->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>Temp Home</title>
    <!-- InstanceEndEditable -->
    <!-- InstanceBeginEditable name="head" -->
    <!-- InstanceEndEditable -->
    <style type="text/css">
    <!--
    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;
    .twoColFixRtHdr #container {
    width: 780px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
    background: #FFFFFF;
    margin: 0 auto; /* 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. */
    .twoColFixRtHdr #header {
    background: #DDDDDD;
    padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    .twoColFixRtHdr #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: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    .twoColFixRtHdr #sidebar1 {
    float: right; /* since this element is floated, a width must be given */
    width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 15px 10px;
    .twoColFixRtHdr #mainContent {
    margin: 0 250px 0 0; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
    padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    .twoColFixRtHdr #footer {
    padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
    background:#DDDDDD;
    .twoColFixRtHdr #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;
    -->
    </style><!--[if IE 5]>
    <style type="text/css">
    /* place css box model fixes for IE 5* in this conditional comment */
    .twoColFixRtHdr #sidebar1 { width: 220px; }
    </style>
    <![endif]--><!--[if IE]>
    <style type="text/css">
    /* place css fixes for all versions of IE in this conditional comment */
    .twoColFixRtHdr #sidebar1 { padding-top: 30px; }
    .twoColFixRtHdr #mainContent { zoom: 1; }
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    </style>
    <![endif]--></head>
    <body class="twoColFixRtHdr">
    <div id="container">
      <div id="header">
        <h1>Header</h1>
      <!-- end #header --></div>
      <div id="sidebar1">
        <h3>Sidebar1 Content</h3>
        <!-- InstanceBeginEditable name="RightSideBar" -->
        <p>Right Side Bar Content - - -    </p>
        <p>Inserted pic below here</p>
        <p><img src="/images/Syntergy5.jpg" width="123" height="105" /></p>
        <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p>
        <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend  sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
    <!-- InstanceEndEditable -->
        <p> </p>
      <!-- end #sidebar1 --></div>
      <div id="mainContent">
        <h1> Main Content </h1>
        <!-- InstanceBeginEditable name="MainContent" -->
        <p>Main Content - - </p>
        <p>inserted pic below here:</p>
        <p><img src="/images/Kelly1.jpg" width="285" height="236" /></p>
        <p> </p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero. </p>
        <!-- InstanceEndEditable -->
        <p>
          <!-- end #mainContent -->
        </p>
      </div>
    <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
      <div id="footer">
        <p>Footer</p>
      <!-- end #footer --></div>
    <!-- end #container --></div>
    </body>
    <!-- InstanceEnd --></html>

  • How do I set up a 2 column fixed, left sidebar... in CC Dreamweaver based on one of the 16 samples in Dreamweaver CS5?

    I am in Graphic Design school and we are studying Dreamweaver CS5.  One of the projects is to create a new page based on one of the 16 samples available which is the 2 column, fixed, left sidebar, header and footer option.
    However, in CC Dreamweaver, I only see the 2 column, fixed, right sidebar option.

    Change line 62 to
    float: left;

  • Conditional Text and Image based on Excel column values

    Hi,
       I have an excel file which contains data that needs to be imported/merged in an InDesign document. I have converted that file into a CSV... I'm unable to figure out how to create document using Data Merge after evaluating some conditions on data ... Example InDesing document layout is like below and will be repeated for say 200 data rows...
    Heading 1
    Text 1, Text 2
    Text 3
    Image
    Heading 1, Text 1 and Text 2 even Image value will be set after checking some condition like below
    if ( column 'A' == ' ' && column 'B' == '1')
      Set 'Heading 1' == column X
    if ( column 'C' == '0' && file.exist(column C & '.jpg'))
       Set 'Image' == column C & '.jpg'
    Can someone please guide me how to create document when CSV and Images are given based on this scenario? and even if Data Merge is the right solution for this.
    -- Thanks.

    Data merge can only reproduce one layout, so you can't merge 200 rows and then change things unless you do it in separate documents and then combine them. Of course anything you can do via scripting or manually on a regular document you can also do to a merged document after the merge is complete.
    It sounds like this is a multiple-records-per-page scenario. TO do that you set up ONE instance only of what you want to merge, in the upper left position on the page. ID then duplicates EVERYTHING that is on the page as many times as will fit using the spacing parameters you provide. This means you need to be careful with frame sizes so they don't extend beyond where they should, but it also means you can add a no-fill, no-stroke frame as a border or bounding box to make it easier to get a precise size to be used by each record. Frames in merged documents are not threaded from record to record (though there are methods for doing that after the merge, if desired), so deleting a record normally leaves a hole in the page.
    If you have master page items, it's probably best to us the "none" master before the merge, then apply the correct master page after.
    Peter

  • Hi, how can i break the value for a row and column once i have converted the image to the array?????​??

    Hi, I would like to know how can i break the value for a row and column once i have converted the image to the array. I wanted to make some modification on the element of the array at a certain position. how can i do that?
    At the moment (as per attachhment), the value of the new row and column will be inserted by the user. But now, I want to do some coding that will automatically insert the new value of the row and the column ( I will use the formula node for the programming). But the question now, I don't know how to split the row and the column. Is it the value of i in the 'for loop'? I've  tried to link the 'i' to the input of the 'replace subset array icon' , but i'm unable to do it as i got some error.
    Please help me!
    For your information, I'm using LABView 7.0.

    Hi,
    Thanks for your reply.Sorry for the confusion.
    I manage to change the array element by changing the row and column value. But, what i want is to allow the program to change the array element at a specified row and column value, where the new value is generated automatically by the program.
    Atatched is the diagram. I've detailed out the program . you may refer to the comments in the formula node. There are 2 arrays going into the loop. If a >3, then the program will switch to b, where if b =0, then the program will check on the value of the next element which is in the same row with b but in the next column. But if b =45, another set of checking will be done at a dufferent value of row and column.
    I hope that I have made the problem clear. Sorry if it is still confusing.
    Hope you can help me. Thank you!!!!
    Attachments:
    arrayrowncolumn2.JPG ‏64 KB

  • Three column fixed layout and text-wrap

    I have a page using the three col fixed header and footer
    layout.
    I know that if your #maincontent div has a left margin the
    width+ of the left sidebar, the sidebar appears to continue down
    the page no matter how much content is has in it. In the 3 column
    fixed layout comments it says to delete that margin if you want the
    text to flow into that space after the sidebar content ends. This
    is what I want but it does not work in IE 7.
    Is there a workaround?
    www.sandracase.com
    www.sandracase.com

    Instead of that ,  define three windows for three clolumns and then define three text modules  that would be very easy. I have done the similar requirement for 2 columns.
    Reward points if useful.
    Regards,
    Nageswar

  • Facebook is not loading properly and all my text and images are lined up along the right side of the page. How can this get fixed to the way it use to be?

    Facebook is not loading properly and all my text and images are lined up along the right side of the page. How can this get fixed to the way it use to look?
    Everyone who logs into Facebook on my Firefox has this problem however if we use Internet Explorer - facebook looks normal.

    If you have increased the minimum font size then try the default setting "none" as a high value can cause issues like you described.
    * Tools > Options > Content : Fonts & Colors > Advanced > Minimum Font Size (none)
    *Tools > Options > Content : Fonts & Colors > Advanced > [X] "Allow pages to choose their own fonts, instead of my selections above"

  • When I change the time zone of the clock, the "Date created" time information for my documents and image files in the Finder window (and in Get Info) is changed. Can I make the time info in "Date created" remain fixed regardless of the clock's timezone?

    When I change the time zone of the clock, the "Date created" time information for my documents and image files in the Finder window (and in Get Info) is changed. Can I make the time info in "Date created" remain fixed regardless of the clock's timezone?

    When I change the time zone of the clock, the "Date created" time information for my documents and image files in the Finder window (and in Get Info) is changed. Can I make the time info in "Date created" remain fixed regardless of the clock's timezone?

  • Header and first column fixed in the table

    Hi,
    Our requirement is that we want to fix header and first column of the table.
    It means that when we will move right or down through scroll bar then header and first column should be fixed.
    Thanks,
    Anumit

    Hi,
    To fix header, the approach followed can be as following:
    a) Create dedicated table for header with no rows visible
    b) Set the property to FIXED (I do not rememeber proprty)
    c) Create another table with header visiblity to NONE and all data rows visible
    For First Column fix: the following approach could be tried:
    a) New Transparent container: Matrix layout
    b) 2 tables A and B adjacent to each other : B in scroll container[only horizontal scroll enabled] and both associated with same node.
    c) A will have only one column and B will have remaining columns
    regrads,
    ganga

  • Google search and images not working since last night on my macbook air and iPad, how to fix?

    Google search and images stopped working last night on my macbook air and the ipad. Any idea why or how to fix?

    Restart the router.
    Restart the computer.
    Restart the iPad.
    Best.

  • When I click "edit" to manage content on a web page, I see code instead of text and images. How can I fix this?

    I edit content on www.fomh.org. Until recently, I could sign in as administrator, click "edit" in the editable area of a web page, and proceed to update text and images. I have been using Firefox to do this for several years. Now when I attempt to do this, I see all the html code in the editable area instead of the text and images.
    I am using Mac OS 10.6.8

    What is the content of that window?
    Can you attach a screenshot?
    *http://en.wikipedia.org/wiki/Screenshot
    *https://support.mozilla.org/kb/how-do-i-create-screenshot-my-problem
    *Use a compressed image type like PNG or JPG to save the screenshot
    *Make sure that you do not exceed the maximum size of 1 MB
    Start Firefox in <u>[[Safe Mode|Safe Mode]]</u> to check if one of the extensions (Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem.
    *Switch to the DEFAULT theme: Firefox/Tools > Add-ons > Appearance
    *Do NOT click the Reset button on the Safe Mode start window
    *https://support.mozilla.org/kb/Safe+Mode
    *https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes

  • Wikis are missing all css and images!

    Hello,
    I enabled the wikis today, but when I visit it:
    http://tinyurl.com/34maae
    there are no images or styling.
    How can I fix this?
    Thanks,
    James

    James,
    I fear your post is slightly confusing - clicking on the tinyurl gives a group listing that appears quite normal.
    It's possible that you have achieved this by downloading and installing the images etc. by hand but this really isn't the way to go. (Alternatively you may have solved the problem in which case please ignore the rest of this post)
    The collaboration folder (which contains javascript, css and image files) is normally at
    usr/share/collaboration
    on your start up hard disc
    and if it's NOT there I would worry about your system install.
    If it IS there, a possible source of error is that the location of 'collaboration' is set as an alias in so that web pages can access it simply as 'http://www.website.com/collaboration'
    So, I advise you check that you haven't amended this in some way.
    Assuming that you have your server set up in Advanced Configuration you could do the following. If you have it as a Stardard or Workgroup config I fear I can't help you as I have no experience as to how the set the alias. Someone else should be able to advise. (Alternatively you COULD start editing the Apache files directly but I wouldn't advise it unless you feel happy doing that and any edit may well get overwritten anyway The relevant files are at etc/apache2/sites/)
    Launch Server Admin, select web from the list of services in the left hand column and select the domain name from the list at the top - you may only have one.
    Then select aliases from the horizontal list of radio buttons and see what it says for /collaboration, it should read
    Alias /collaboration /usr/share/collaboration
    Beyond that I don't know what to say.
    Good luck

  • On YouTube, I can't play playlists there. It says I need to update my Java and it is updated already. When I go to different sites like Yahoo! the links and images are all distorted. This is the second time this has happened to me now

    Hello Firefox,
    I am having problems with my Firefox's image processor I believe. My web browser is fine but then a few minutes later I get some weird look on my page. It then just stays here and I can't fix it. When I go to Yahoo all the links and images do not look normal. I really cannot explain this and wish I could send a picture instead. When I go to the Log in page for Facebook I do not see the image of the small faces networking around the world. It's blank and the links are widely spread apart. With YouTube the page is also distorted. Nothing is arranged properly. I can watch videos. However when I go to someone's profile or a playlist videos cannot play or show up. It says I need to update my Java player and it is already updated. It still happens when I uninstall and re install back. I was only able to fix this problem by uninstalling everything related to Firefox. I do not know how to solve this any other way. I don't like it when all my information is lost such as saved passwords and bookmarks. If there is any way to solve this thanks. I don't want to uninstall this again.

    Your above posted list of installed plugins doesn't show the Flash plugin for Firefox.<br />
    See [[Managing the Flash plugin]] and [[Installing the Flash plugin]]
    You can check the Adobe welcome and test page: http://www.adobe.com/software/flash/about/
    You can use this manual download link:
    *http://kb2.adobe.com/cps/191/tn_19166.html#main_ManualInstaller

  • The latest Firefox version won't expand to make text and images more visible on my 32" screen, although I have tried to adjust the advanced Windows appearance settings in the same way that has worked in previous versions of Firefox.

    Normally I have had to go to Control Panel; Appearances and Themes; Display; Settings; Advanced; Custom; and then I adjust the Customize Setting to 155% (149 dpi). I have hit on this setting through trial and error; larger and icons like the cursor get big and fuzzy. Smaller than 155% and text and images are tiny on the 32" wide screen. This time that procedure doesn't seem to work. The text and images remain too small regardless of setting, although the cursor icon gets big. I can manually zoom the pages, but that is clumsy and has to be redone. Does anyone know of an easy setting fix? I am not too smart about this stuff--mostly trial and error, but I do want to be able to enjoy my wide screen. Thanks!

    Normally I have had to go to Control Panel; Appearances and Themes; Display; Settings; Advanced; Custom; and then I adjust the Customize Setting to 155% (149 dpi). I have hit on this setting through trial and error; larger and icons like the cursor get big and fuzzy. Smaller than 155% and text and images are tiny on the 32" wide screen. This time that procedure doesn't seem to work. The text and images remain too small regardless of setting, although the cursor icon gets big. I can manually zoom the pages, but that is clumsy and has to be redone. Does anyone know of an easy setting fix? I am not too smart about this stuff--mostly trial and error, but I do want to be able to enjoy my wide screen. Thanks!

Maybe you are looking for

  • Error that password was entered wrong when trying to update or install apps

    ever since updating my first generation ipod touch to 3.0, I have been having so many problems downloading app updates. I keep getting the message that I entered my iTunes password wrong and to enter it again. But i'm typing it correctly. When I sync

  • Score editor: bug?

    Bug#1: when using command+r (repeat); If the original material to be repeated contains a tuplet, the tuplet doesn't appear in the copies. Bug#2: when inserting the tuplet: in the tuplet window> hitting enter (ok) doesn't work

  • I just download music to my iPad but I want to sync it to my iPod, how?

    I Just download some music to my iPad how do I sync this to my iPod?

  • Prevent app launching on startup

    Running Yosemite, I now suddenly have an app that launches itself automatically on startup.  However, I don't want this. I've tried the following: 1. Checked in System Preferences > Users and Groups > Login items.  It's not listed there and never has

  • FINDER Does not work on Macintosh HD

    Well, I would like to think I'm not an idiot. But the finder will not find anything on the main "Macintosh HD" Volume. It will quickly find things on a DVD, CD, External Hard Drive. But on the main HD it will come up as 0 items found. Even when i put