Skip navigation
Prodigy9
Prodigy9
Currently Being Moderated

Quirky little thing...

May 2, 2012 10:13 PM

I have CS5.5 installed and as I'm building my website using Dreamweaver and I'm in "Design View" the main content area drops below the sidebar.  However, when I launch it into ANY browser it appears as it should...  Is this a problem on my part? Or just how Dreamweaver handles displaying the page in "Design View"?  Maybe, I have an extra pixel on a border or padding somewhere?!?!

607 Views   7 Replies   Latest reply: martcol, May 3, 2012 4:54 AM
 
Replies
  • martcol
    Currently Being Moderated
    1. martcol,
    May 2, 2012 10:53 PM   in reply to Prodigy9
    Report

    In my view this could be a minor code problem or possibly something called float drop.  You have several options:

     

    Google float drop and see if that applies

    Validate your code

    Post your code here or

    Give a link to your page

     

    Martin

     

    The final option is preferred.

     
    |
    Mark as:
  • Prodigy9
    Currently Being Moderated
    2. Prodigy9,
    May 2, 2012 11:17 PM   in reply to martcol
    Report

    How can I validate my code?

     

     

    Here's the link...  (Nothing great and the code is a bit sloppy as I'm not the best web designer yet nor did I have a chance to clean it up).

     

    http://www.alt-end.net/guarantee.html

     
    |
    Mark as:
  • Prodigy9
    Currently Being Moderated
    3. Prodigy9,
    May 3, 2012 12:18 AM   in reply to Prodigy9
    Report

    Just thinking...  Would placing the "paragraph content" or "text" into it's own separate <div> work?  The image should be fine I would think since it's smaller than the main content area.  But the <p>aragraph text might not be wrapping properly.  If I take the "padding-left" and set it to 0;  The page displays perfectly in Dreamweaver.  But If I try to put a little bit of separation between the sidebar and the content it drops the content below the sidebar.  Although, it displays in all the browsers I've tested so far completely fine...  Dreamweaver doesn't display it properly and since I'm on a Mac I haven't yet tried to view it in IE (any version).

     

    Just a thought maybe I'll try it.

     
    |
    Mark as:
  • martcol
    Currently Being Moderated
    4. martcol,
    May 3, 2012 12:19 AM   in reply to Prodigy9
    Report

    You should not have a style element in your page.  I should go in the head of the page between the <head> </head> tags

     

    <style>

      /* refresh The p class display */

      p {

    padding-top: 10px;

        padding-right: 12px;

    padding-left: 12px;

    color: #000;

    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

      }

    </style>

     

    And the opening tag should be <style type="text/css">

     

    And I wonder if you really need to float the <h1> element in the content?

     

    Martin

     

    http://validator.w3.org/

     
    |
    Mark as:
  • martcol
    Currently Being Moderated
    5. martcol,
    May 3, 2012 12:25 AM   in reply to martcol
    Report

    You can get a quick and dirty look at your page in IE by using this:

     

    http://netrenderer.com/

     

    It has its limitations but it does help.  I just had a look at IE6 in netrenderer and the page appears to hold up.

     

    Martin

     
    |
    Mark as:
  • Prodigy9
    Currently Being Moderated
    6. Prodigy9,
    May 3, 2012 12:47 AM   in reply to martcol
    Report

    Thanks for the information but I was able to fix it by creating an additional <div> for the text content within the "content" <div>.  It now displays both in dreamweaver and the browsers correctly.

     

    Thanks much for validator link and the renderer link too.  They can certainly help...  I gave you a few points for your assistance.

     

    Thanks!

     
    |
    Mark as:
  • martcol
    Currently Being Moderated
    7. martcol,
    May 3, 2012 4:54 AM   in reply to Prodigy9
    Report

    Glad you got it sorted.

     

    Sent from my iPhone

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points