none
Simple problem with DWT in Exp web 4. RRS feed

  • Question

  • How do I LOCK the left side navigation table I put in my site so when I have LONG TEXT in the editable region to the right of it the table does not move down to the center of the side.  I would like it to stay in the upper left.


    I am sure it is a very easy fix but I just can not figure out how to make the question for the search?  Thanks

    • Edited by tedwagner64 Wednesday, December 8, 2010 6:59 AM messed up
    Monday, November 1, 2010 11:04 PM

Answers

  • What Kathy said, and if you really do want to learn how to do this right, you should hold off on your site for the time being and view Cheryl's "Build a Basic Web Site" video tutorial at http://by-expression.com/post/2009/09/22/Basic-Website-Tutorial.aspx .

    That will give you a good introduction to using EW to construct a standards-compliant site with HTML and CSS, instead of dragging things around and wondering why things don't look the way you expect. The Web, and both standards and browsers, have changed a lot in the eight years since FP's last release. You really need to learn something about what you are doing if you intend to go forward with this.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    • Marked as answer by tedwagner64 Thursday, November 4, 2010 8:09 AM
    Tuesday, November 2, 2010 4:45 PM
  • Ted,

    Relying on a program that uses 15 year old web mark-up (FP even 2003 uses a combination of HTML 3.2 and HTML 4.01) means you are way, way behind in how browsers currently work. I have been creating standards compliant web designs using xhtml 1.0 since 2000 and not even the oldes page on the net has any problems in rendering with modern browsers. You can't say that of most FP sites.

    Have you looked at your site in Firefox or IE 8 (not in compatibility mode)? If so you'll see that text overlaps because you have specified heights where you shouldn't. I can't even read the bottom section of the  page.

    Learning what you need to know aobut standards based mark-up isn't web editor specific. I used the same type of mark-up with FrontPage 2002-2003, Dreamweaver 4-CS 5 (that's 9 versions due to changes in naming convention) and every version of Expression Web.

    I took a look at the source code for the page you posted and I see so many issues I can tell you will have cross browser problems. Even the first line is wrong and that I'm willing to bet came from FrontPage. Doctype always must be first and the HTML tag must follow it not the other way around which means the doctype will be ignored by most browsers throwing you into quirks mode to start.

    Next I see a whole lot of .styleX classes which tells me you are using the buttons on the toolbar instead of thinking ahead and using meaningful names and I'll bet you never though of inheritance. Changing:

     body { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left:
    0px; padding:0px; }

    To:

    body {
     margin: 0;
     padding: 0;
     font: small Arial, Helvetica, sans-serif;
     color: #0066cc;
    }

    Eliminates the need for almost half of your styles. You have mixed pt & px neither of which should be used on the web because in the case of px they don't scale in IE and in the case of pt can mean very different things from one browser to another, especially if the visitior is using any dpi setting other than straight Windows default.

    Plus points are for print where they have a fixed size relative to the "inch" which browsers don't have. Browsers have "resoution" and a physical size. That means depdening on the monitor I'm looking at 10pt type can vary from the equivilent of 6pt on paper to 16pt on paper depending on the resolution to physical size and Windows settings on the computers in my office.

    To add to it I also see you have Word mark-up in there which does its own thing in attempting to make a page on the web look/behave like paper. You do not need and in fact should not ever use a class on every line of text, nor should you be using so many divs is you are using a table based layout.

     <TR bgColor=#FFFFFF>
          <TD height=25 colSpan=5><div align="left">
            <table width="921" border="0">

    Which brings me to the next issue - you have an xhtml doctype which requires all elements to be lowercase.

    Don't center all the text, especially when you use bullet points - that makes it so much harder to read. The FP counter is also tacky and leaves the impression that the site & business is not serious. Use web stats like those that come from your hosting company or Google Analytics if you want to know about visitors.

    Don't use all caps - it is much harder too read as is too many items in bold. Plus it is rude to shout at people which is what bold all caps is doing. You also need to use real headers instead of fake ones. I'd also rethink the animations - they distract people trying to read the text. Look how much easier it is to maintainsomething like: http://wizerways.net/subzero/index.html

    Learning just a tool is when you run into problems but when you learn the underlying technology changing tools isn't that much of a learning curve. Fortunately for you there are a lot of resources for migrating from FrontPage to Expression Web set out in the learning resources section of the Before Posting sticky.


    MS MVP Expression Tutorials & Help http://by-expression.com & Expression Web forums
    • Proposed as answer by Cheryl D Wise Wednesday, November 3, 2010 5:15 AM
    • Marked as answer by tedwagner64 Thursday, November 4, 2010 8:16 AM
    Tuesday, November 2, 2010 4:56 PM
  • Thats to funny.  AFGANISTAN.  LOL.  It was a very rough start with that by my friend and I said the same exact thing about the country. 

    I will rethink the hover over red text on this, that was my idea. Actually as of right now I am thinking about restarting over in a couple of days.  I need to find a good free tutorial or cheap book that helps me along (Expression for Dummys maybe)?  Thanks and I think I saw some good learing videos on Microsofts site.

     Im liking the comment above  to go to Cheryl's "Build a Basic Web Site" video tutorial at http://by-expression.com/post/2009/09/22/Basic-Website-Tutorial.aspx .

    At this stage in your development, downloading and viewing that tutorial, along with the resource files in the associated zip file so that you can then work along through it, would probably be the single most eye-opening and instructing step you could take. Once you see how easy it can be to create pages using EW and fully standards-compliant markup and CSS, there will be no reason for you to want to lean on kludgy crutches like tables for layout.

    That will introduce you to the effective use of EW and to HTML and CSS principles. After that will come the core learning you'll need, and that you get from the free HTML and CSS courses at w3schools.com. See the list of learning resources in the BEFORE POSTING sticky thread for a good list of others, but I would recommend these as a start, and as a minimum.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    • Marked as answer by tedwagner64 Thursday, November 4, 2010 8:10 AM
    Wednesday, November 3, 2010 3:27 PM

All replies

  • Sorry, but I don't even attempt to troubleshoot table-based layouts. That is, or should be, a simple, straightforward fixed-width, two-column, with header and footer layout. It could be implemented in a basic semantic format with a few divs and a single float.

    Others who have used layout tables more recently than a decade ago may wish to take the time to try to find what is causing the drop. All I can do is recommend that you re-implement the design using semantic, standards compliant markup and CSS. Sorry, and good luck. I do hope you can get your issue resolved.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    Monday, November 1, 2010 11:29 PM
  • First, get rid of the extraneous </form> tag right after the <body> tag.

    Unless you specify otherwise, the content in a table cell will be centered top-to-bottom.  On the page with more content in the left cell, the content in the right cell is further down because it's centered in a taller row.

    If you want to put the content at the top of the cell, <td valign="top">

    ...I'll second Scott's point that divs would be easier.

    Monday, November 1, 2010 11:54 PM
  • In my reply, I said the </form> tag had nothing to do with your problem, but shouldn't be there, so of course removing it didn't change your display.

    I also told you what to do to get the text to go to the top, adding valign="top" to that <td>.

    What you did was simply put enough content in that table cell to take up almost as much space as the cell next to it, so that it is close to the same position when centered.  It will drop right back down to the center if you don't have that much content.

    It seems to me that you are working exclusively in Design View and not looking in Code View. You really, really must learn more if you want to design a site.  Adding valign="top" to the <td> tag, in Code View, takes seconds.  Work in Split View and learn what you are actually asking EW to do by watching the Code window.

    See the Before Posting post, and look down at the Resources section.  You will find several links that will help you learn what you need.

     

    Tuesday, November 2, 2010 2:52 PM
  • What Kathy said, and if you really do want to learn how to do this right, you should hold off on your site for the time being and view Cheryl's "Build a Basic Web Site" video tutorial at http://by-expression.com/post/2009/09/22/Basic-Website-Tutorial.aspx .

    That will give you a good introduction to using EW to construct a standards-compliant site with HTML and CSS, instead of dragging things around and wondering why things don't look the way you expect. The Web, and both standards and browsers, have changed a lot in the eight years since FP's last release. You really need to learn something about what you are doing if you intend to go forward with this.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    • Marked as answer by tedwagner64 Thursday, November 4, 2010 8:09 AM
    Tuesday, November 2, 2010 4:45 PM
  • Ted,

    Relying on a program that uses 15 year old web mark-up (FP even 2003 uses a combination of HTML 3.2 and HTML 4.01) means you are way, way behind in how browsers currently work. I have been creating standards compliant web designs using xhtml 1.0 since 2000 and not even the oldes page on the net has any problems in rendering with modern browsers. You can't say that of most FP sites.

    Have you looked at your site in Firefox or IE 8 (not in compatibility mode)? If so you'll see that text overlaps because you have specified heights where you shouldn't. I can't even read the bottom section of the  page.

    Learning what you need to know aobut standards based mark-up isn't web editor specific. I used the same type of mark-up with FrontPage 2002-2003, Dreamweaver 4-CS 5 (that's 9 versions due to changes in naming convention) and every version of Expression Web.

    I took a look at the source code for the page you posted and I see so many issues I can tell you will have cross browser problems. Even the first line is wrong and that I'm willing to bet came from FrontPage. Doctype always must be first and the HTML tag must follow it not the other way around which means the doctype will be ignored by most browsers throwing you into quirks mode to start.

    Next I see a whole lot of .styleX classes which tells me you are using the buttons on the toolbar instead of thinking ahead and using meaningful names and I'll bet you never though of inheritance. Changing:

     body { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left:
    0px; padding:0px; }

    To:

    body {
     margin: 0;
     padding: 0;
     font: small Arial, Helvetica, sans-serif;
     color: #0066cc;
    }

    Eliminates the need for almost half of your styles. You have mixed pt & px neither of which should be used on the web because in the case of px they don't scale in IE and in the case of pt can mean very different things from one browser to another, especially if the visitior is using any dpi setting other than straight Windows default.

    Plus points are for print where they have a fixed size relative to the "inch" which browsers don't have. Browsers have "resoution" and a physical size. That means depdening on the monitor I'm looking at 10pt type can vary from the equivilent of 6pt on paper to 16pt on paper depending on the resolution to physical size and Windows settings on the computers in my office.

    To add to it I also see you have Word mark-up in there which does its own thing in attempting to make a page on the web look/behave like paper. You do not need and in fact should not ever use a class on every line of text, nor should you be using so many divs is you are using a table based layout.

     <TR bgColor=#FFFFFF>
          <TD height=25 colSpan=5><div align="left">
            <table width="921" border="0">

    Which brings me to the next issue - you have an xhtml doctype which requires all elements to be lowercase.

    Don't center all the text, especially when you use bullet points - that makes it so much harder to read. The FP counter is also tacky and leaves the impression that the site & business is not serious. Use web stats like those that come from your hosting company or Google Analytics if you want to know about visitors.

    Don't use all caps - it is much harder too read as is too many items in bold. Plus it is rude to shout at people which is what bold all caps is doing. You also need to use real headers instead of fake ones. I'd also rethink the animations - they distract people trying to read the text. Look how much easier it is to maintainsomething like: http://wizerways.net/subzero/index.html

    Learning just a tool is when you run into problems but when you learn the underlying technology changing tools isn't that much of a learning curve. Fortunately for you there are a lot of resources for migrating from FrontPage to Expression Web set out in the learning resources section of the Before Posting sticky.


    MS MVP Expression Tutorials & Help http://by-expression.com & Expression Web forums
    • Proposed as answer by Cheryl D Wise Wednesday, November 3, 2010 5:15 AM
    • Marked as answer by tedwagner64 Thursday, November 4, 2010 8:16 AM
    Tuesday, November 2, 2010 4:56 PM
  • OK I opened it in Front Page, Clicked on the box around the table until it let me do something with it and I dragged it up to the top of the table on this page.  http://www.sub-zero-refrigeration.com/serviceagreements.html  SEEMS like it worked.  Just do not have any idea what happened.  I couldnt do it in Expression Web at all?

    It only seemed to work and doesn't in IE 8 & Firefox.
    MS MVP Expression Tutorials & Help http://by-expression.com & Expression Web forums
    Tuesday, November 2, 2010 4:58 PM
  • "It only seemed to work and doesn't in IE 8 & Firefox."

    It does work in IE8 and Firefox - if text is set to the default, which I assume is not the case for Cheryl.

    That opens a whole 'nother can of worms that you need to learn: folks can resize text in their browser, and your design must accomodate that without breaking.

    If the text is larger, the right side expands more than the left, since the right has more text while the left has more images. The result: the left side is now considerably shorter than the right, and still, of course, centered in the cell, so once again you'd see it dropped down.

    Tuesday, November 2, 2010 7:51 PM
  • Wow! That's a lot of markup for a simple menu. Here's a suggestion: In EW, create a New Site from Template, and choose Small Business 4, 5, or 6.

    Look at those menus; see how simple the code is? Just an Unordered List styled simply in CSS. It's a piece of cake. No tables with a bajillion rows, each one styled individually. You get all the functionality and a cleaner look with none of the detritus of using a table. Heck, even if you kept yours as is, you don't need a separate cell for each link. Nor a separate style. One style, applied to the table or, better, the DIV, does all the work.

    I must say also, that the menu hopping around as I hover over text that gets larger and red in very disconcerting. People aren't used to that, and it looks like a mistake. Look at other professional sites and see how their menus act. They don't dance around when people hover.

    From a strictly usability standpoint, I have to wonder why there is a drop down on the form to indicate what country people live in. Why make them go through that hoo-hah to choose United States? Do you ever even go outside of Illinois? Maybe to Gary, IN? That looks silly. On the other hand, if you do service Antigua and Barbuda, or Lichtenstein, or Kyrgyzstan, maybe I'd rather work for your company...

     


    Silence is Golden. Duct tape is Silver.
    Tuesday, November 2, 2010 9:26 PM
  • Ted,

    Did you look of any of the links in this thread? Use the learning resources section in the Before Posting sticky and compare what you have with the alterative in my post above. True I used state images instead of Flash but that is a design choice since animation and all caps make a site harder to use thus less effective in getting the visitor to actually read the content.


    MS MVP Expression Tutorials & Help http://by-expression.com & Expression Web forums
    Wednesday, November 3, 2010 1:45 PM
  • Thats to funny.  AFGANISTAN.  LOL.  It was a very rough start with that by my friend and I said the same exact thing about the country. 

    I will rethink the hover over red text on this, that was my idea. Actually as of right now I am thinking about restarting over in a couple of days.  I need to find a good free tutorial or cheap book that helps me along (Expression for Dummys maybe)?  Thanks and I think I saw some good learing videos on Microsofts site.

     Im liking the comment above  to go to Cheryl's "Build a Basic Web Site" video tutorial at http://by-expression.com/post/2009/09/22/Basic-Website-Tutorial.aspx .

    At this stage in your development, downloading and viewing that tutorial, along with the resource files in the associated zip file so that you can then work along through it, would probably be the single most eye-opening and instructing step you could take. Once you see how easy it can be to create pages using EW and fully standards-compliant markup and CSS, there will be no reason for you to want to lean on kludgy crutches like tables for layout.

    That will introduce you to the effective use of EW and to HTML and CSS principles. After that will come the core learning you'll need, and that you get from the free HTML and CSS courses at w3schools.com. See the list of learning resources in the BEFORE POSTING sticky thread for a good list of others, but I would recommend these as a start, and as a minimum.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    • Marked as answer by tedwagner64 Thursday, November 4, 2010 8:10 AM
    Wednesday, November 3, 2010 3:27 PM
  • Ted,

    Please don't quote so much. It is hard to follow in this forum especially since I can't use thread view and still be able to tell what topics have new posts.

    This forum kept throwing "unexpected error" so after three attempts to post here I am posting my reply at http://expressionwebforum.com/index.php/topic,70.new.html#new 


    MS MVP Expression Tutorials & Help http://by-expression.com & Expression Web forums
    Thursday, November 4, 2010 3:25 PM
  • This says several differnet sizes?  I guess you would say?  Cheryl in her vid says you should stay with the same thing (and she uses "em") other than the top photo of her demo for Houston.  Is that because this or the photo image on the top of her demo is a image and the (em) is talking about text?  Does that make sense?  If I look at the code below it goes frome .95em the container at 950px or so.  What am I not seeing here?  And why is the padding 1px if everything else is in (em)?  Am I confused or is this a test?

    She was right, you should be consistent in your units of measure, but that is within measurement type . For example, you would measure sugar using cups and tablespoons, not feet and inches, and football yardage using yards and inches, not pounds and pennyweights.

    For text, you would want to use a measure which is universally scalable, as ems are in all browsers. Pixels for fixed font sizes do not scale in IE, making the page inaccessible.

    Similarly, because you are after predictability when you are sizing fixed-width elements, and em dimensions vary by the current font size, you would use pixels for area dimensions, heights and widths.

    Generally speaking, you have several layout types. Fixed-width is just what it sounds like, having a fixed width measured in fixed units. A liquid layout uses percentages of the viewport width, so that the presentation of the page increases in width with a wider viewport. This can cause readability issues if there is a lot of text, because it is more difficult to scan long lines of text when reading.

    There are various combinations of the two, generally referred to as semi-liquid. For example, one or two fixed-width columns or sidebars, with a variable-width main copy area column that can change width within a range as the viewport is resized, and other combinations of fixed/variable width.

    There is also a layout type called elastic, which varies according to the font sizing chosen by the viewer, rather than percentages. In these layouts, all measurements are in ems, including dimensional measurements. These may also have combinations of fixed and variable sections, which is good, because a fully elastic site would cause issues when the text is increased, widening the presentation until the user has to scroll back and forth horizontally to read text.

    Any of these can be combined into what is often called a hybrid layout. It is advisable, while learning and getting a handle on HTML and CSS, to stick with the simpler, more straightforward approaches, and that would mean a fixed-width, or perhaps a single-column-liquid hybrid layout. Anything fancier can lead to layout issues if you don't know what you are doing.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    Thursday, November 4, 2010 4:46 PM
  • " So I guess what I am questioning is what exactly was wrong with my http://www.sub-zero-refrigeration.com/ if it passed the W3C thing?"

    Don't confuse passing W3C CSS validation as having a page with no problems.  That page only tells you if your CSS follows the rules for writing CSS and if it might have some usability issues. It is telling you nothing about your HTML. (There's a different validator for that.)

    You can write a horrible, incomprehensible book that no one can understand, and that few can read because the typeset is too small and that will fall apart because the binding is brittle - and yet do it with perfect spelling.  That book will pass a spellcheck with flying colors, but that doesn't mean there was nothing wrong with it.

    You can have a page pass W3C CSS that won't expand when text is expanded in a browser, that uses inconsistent measurement units, etc., etc.  These are bad design practices, but they can be done with correct CSS (and, for that matter, with correct HTML).

    Now, about HTML:  The page that passed the CSS validation has 44 errors in the HTML validation: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.sub-zero-refrigeration.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 

    Saturday, November 6, 2010 2:13 AM