Skip navigation
Currently Being Moderated

Layout keeps changing depending on the computer setting

Apr 5, 2012 9:13 AM

I have created a very simple beginners webpage with a simple spry menu bar.  It works great, but when I open the page on a larger screen than the standard, it keeps changing my layout.  My Spry menu bar on my screen is 4 columns.  When my CFO opens it, it pushes the last column below the first one.  Is there a way to lock columns so this doesn't happen?

 
Replies
  • Currently Being Moderated
    Apr 5, 2012 9:31 AM   in reply to appchick21

    Please post a link to the page in question.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 5, 2012 10:38 AM   in reply to appchick21

    This page  http://www.loricaequity.com/  has no HTML document type.  No valid doc type puts your page into Quirks Mode which is geek speak for browsers don't know how to render the page. Before you we can help you with layout issues, you need to fix your code errors.  See details below.

    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.loricaequ ity.com%2F

     

     


    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     


     
    |
    Mark as:
  • Currently Being Moderated
    Apr 5, 2012 11:06 AM   in reply to appchick21

    http://www.w3schools.com/tags/tag_doctype.asp

     

    Try that.  After you have added a doc type, go back to the validator and see what other problems your page might have.

     

    Martin

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 5, 2012 1:45 PM   in reply to Nancy O.

    This page  http://www.loricaequity.com/  has no HTML document type.

     

    Perhaps the page has now been updated because I see a HTML5 doctype on line 1

     

    <!DOCTYPE HTML>

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 5, 2012 2:11 PM   in reply to John Waller
    Perhaps the page has now been updated because I see a HTML5 doctype on line 1

     

    <!DOCTYPE HTML>

     

    Some progress is being made. However the <style> and <script> tags are incorrectly nested outside the </head> tag.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 5, 2012 2:22 PM   in reply to appchick21

    Ok. Change all this:

     

    </head>
    
    
    <style type="text/css">
    h1 {
     color: #FFF;
    }
    </style>
    
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    body,td,th {
     font-size: 14px;
     font-family: Verdana, Geneva, sans-serif;
    }
    a:link {
     color: #666;
     text-decoration: none;
    }
    a:visited {
     text-decoration: none;
    }
    a:hover {
     text-decoration: none;
     color: #000;
    }
    a:active {
     text-decoration: none;
    }
    h1,h2,h3,h4,h5,h6 {
     font-family: Georgia, "Times New Roman", Times, serif;
    }
    h1 {
     font-size: 45px;
     color: #FFF;
     text-align: center;
    }
    h2 {
     font-size: 24px;
     color: #000;
    }
    h3 {
     font-size: 18px;
     color: #000;
    }
    h4 {
     font-size: 14px;
     color: #000;
    }
    </style>

     

     

    To this:

     

    
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    
    
    <style type="text/css">
    body,td,th {
     font-size: 14px;
     font-family: Verdana, Geneva, sans-serif;
    }
    a:link {
     color: #666;
     text-decoration: none;
    }
    a:visited {
     text-decoration: none;
    }
    a:hover {
     text-decoration: none;
     color: #000;
    }
    a:active {
     text-decoration: none;
    }
    h1,h2,h3,h4,h5,h6 {
     font-family: Georgia, "Times New Roman", Times, serif;
    }
    h1 {
     font-size: 45px;
     color: #FFF;
     text-align: center;
    }
    
    h2 {
     font-size: 24px;
     color: #000;
    }
    h3 {
     font-size: 18px;
     color: #000;
    }
    h4 {
     font-size: 14px;
     color: #000;
    }
    </style>
    
    
    </head>
    
    

     

    And you should be good to go.

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 5, 2012 2:48 PM   in reply to appchick21

    I'll have to figure out what you did.

    I simply helped you get everything into correct HTML sequence. 

     

    <html>

    <head>

         <title></title.

         <script></script>

         <style></style>

    </head>

     

    <body>

    your page content...

    </body>

     

    </html>

     

     

    I definitely appreciate it!

    You're welcome. Glad to be of help. 

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 7, 2012 1:56 PM   in reply to appchick21

    For best help with layout issues, you'll need to post a link to the problem page on your remote server. 

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     
    |
    Mark as:

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