none
Formatting problems: Alignment, Fonts, Table Borders & Background RRS feed

  • Question

  • Expression Web 4 Issues

    I have the following problems with the index file of www.EvergladesEden.org.

    Following the “We will succeed with your help” text I have a 1200 px table divided into 4 columns (200px-250px-500px-250px)

    #1. Images and text will not center

    #2. Text should be 36 pt, Lucida Handwriting, green (“We will succeed with your help”) but is 12 pt, Times Roman, black.

    #3. Table background color will not change from background color of the page

    #4. Table borders do not display. For example, 250 px table with “Please Help” image has a 3 px. green border.

    Many thanks for your help.

    Saturday, March 23, 2013 6:10 PM

All replies

  • The only thing from the list that I see is that the let us tell the cat story image and text are not centered.
    And the reason is that it has no CSS style class assigned to it.
    Everything else is as you say it should be, including the green text and font.

    Try clearing your temporary internet files and then reload the page.

    Expression Web MVP






    Saturday, March 23, 2013 7:59 PM
  • There are few general things wrong:

    You have markup that puts some styles as comments (conditional comment for "mso" - old FrontPage stuff) which means you need to either remove the conditional comments or the remove those styles entirely (are you using them?).  You are using pt on the web.  That's for print, and isn't understood sensibly by browsers.  (For print CSS, fine, but not for your page on the web.)  You have references to VML graphics (again, old FrontPage/Office stuff) which should be removed from  your pages.

    The "love bonds strongly" cat picture is not centered because you told it not to be: you have an inline style "float:left" styling applied to it, which negates any of your attempts to center it.

    As to what else you are seeing (or not seeing): what browser are you using?  I see centered items, borders, etc.  I also see an incredible mess of auto-styling, which will make it difficult for you to maintain/change this.  If you want all table cell content to be centered, you need  just one simple style for the entire page, not individual styles applied to each table cell.  If you want some table cells to have a green border, you need one class, applied to the table cells you want, not individual styles created for each one.  And so on....  Taking some time to learn more about CSS will very much simplify your efforts.


    • Edited by KathyW2 Saturday, March 23, 2013 8:35 PM
    Saturday, March 23, 2013 8:34 PM
  • Keep 4 other things in mind too.

    1. Many of your fonts will not display on many computers (Lucida Handwriting, Bodoni MT, Poor Richard, etc.). They are not web-safe fonts and you haven't decla\lred a font-family for computers that don't have those fonts installed. Any font you specify has to be already installed on the visitor's computer; otherwise, that computer will use its default browser font, and you have no idea what that is or how it looks (people can set their own preferred default font).

    2. The site is too wide to display properly on many small screens (including iPads) without the visitor having to scroll back and forth sideways. People hate that.

    3. The page loads very slowly because the graphics are too big. You're forcing the visitor to download huge graphics files and then telling the browser to shrink them to 10% of the size that was just downloaded. Bad practice. It's your job to size them correctly first.

    4. Can you read the white scroll on the right top? I can't.


    Things Liberal Arts graduates never like to hear:
    “…which means you are going first in Double Jeopardy.”

    Saturday, March 23, 2013 11:35 PM
  • www.EvergladesEden.org migrated through all stages of FrontPage and then converted from FP2003 to Expression Web 4. My programming knowledge at the code level is skimpy and I work in design mode. My default browser is Google, but I also use Firefox and IE with Windows 7 and XP.

    I just redid the index file (all done in design view) by moving all content to a temporary file, then deleting all index file content, and then reinserting all content one table at a time with copy/paste. I was hoping to clear out all unnecessary FrontPage code. Apparently that did not help in creating a clean EW4 page.

    #1: How can I start with a clean index file and then rebuild it?

    #2: Can I reinsert all text and tables in the temporary file, some of which was created originally with FrontPage, into the index file or do I need to create all text and tables from scratch to avoid infesting the index file again with idiosyncrasies of FrontPage?

    Saturday, March 30, 2013 9:34 PM
  • www.EvergladesEden.org migrated through all stages of FrontPage and then converted from FP2003 to Expression Web 4. My programming knowledge at the code level is skimpy and I work in design mode. My default browser is Google, but I also use Firefox and IE with Windows 7 and XP.

    I just redid the index file (all done in design view) by moving all content to a temporary file, then deleting all index file content, and then reinserting all content one table at a time with copy/paste. I was hoping to clear out all unnecessary FrontPage code. Apparently that did not help in creating a clean EW4 page.

    #1: How can I start with a clean index file and then rebuild it?

    #2: Can I reinsert all text and tables in the temporary file, some of which was created originally with FrontPage, into the index file or do I need to create all text and tables from scratch to avoid infesting the index file again with idiosyncrasies of FrontPage?

    Saturday, March 30, 2013 9:35 PM
  • You don't need to post twice; we can all see everything.

    If you reinsert the old stuff, you'll reinsert the garbage along with it. Don't do that.

    You can't use EW4 without understanding the basics of HTML and CSS. You can't use EW as a drag and drop site builder; you'll get garbage.

    The home page has remnants of 206 autostyles (!). Quick--What does autostyle 192 do and what parts of the page (if any) is it applied to? Yeah--that's why you need to not use drag and drop.

    Take a deep breath. Look in the Forum FAQ at the top and in the Learning Resources section, go through Cheryl's EW tutorial--watch it first, then download the materials and work along through it again. Great orientation. Then go to w3schools site and take the short tutorials on HTML and CSS.

    Then...Look at other websites. See what works (and what doesn't). Look at professional sites for groups like yours--professional sites, not hobbyist. Your site is old and it looks like it (which is probably why you are updating it--good for you). It's also a mad jumble of styles and sizes and colors and fonts. Simplify. A lot. Get rid of all the crap that people don't need and get rid of all those fuzzy thumbnails. Prioritize--make room for what's important. Look how it looks on the screen--most of your important content is down off the bottom of the screen (below the fold in newspaper speak). Get it right up where people don't have to work to see it.

    Draw the new layout on paper. Then, pick an EW website template that suits your layout (ignore the content of them). If you use an EW site template, most of the heavy lifting of laying out the site (and the external style sheet) has been done for you. Then, copy the content of the old site that you want to keep into Notepad; that will strip off ALL the old FrontPage garbage and leave you with clean text that you can paste in without a problem.

    Have fun.


    Things Liberal Arts graduates never like to hear:
    “…which means you are going first in Double Jeopardy.”

    Saturday, March 30, 2013 10:25 PM
  • Expression Web is not FrontPage and you need to learn basics of HTML & CSS or you will have nothing but trouble in the future. As Kathy mentioned you are using print measurements and terms which have no real equivalent on the web. Points will be interpreted differently depending on the browser and operating system. For example on a default plain vanilla install on a desktop with a 20" 1280x800 monitor the default for Windows text is 12 point mapped to 16px. By default on one of my Win 7 tablets the default 12pt text is mapped to 20px.  IE will scale text based on my OS mapping of 20px for 12pt text but Firefox does not. It will always be based on 16px=12pt. This is one of the reasons that you do not use points for websites. By the same token inches, cm and other print measurements mean nothing to the screen. Save them for print stylesheets.

    Most of your problems are most likely caused by not understanding CSS and inheritance and because you used the format toolbar without any forethought and planning resulting in more styles than you can keep track of, particularly when you used no naming convention that would allow you to easily reuse styles. I also see vml - Office proprietary mark-up that is not understood by any non-Microsoft browser and that isn't working well in the newer versions of IE either. BTW. much of your text is extremely uncomfortable to read even on my 24" monitor at MS default settings.

    You've got additional problems with spaces in your image names and using the browser to resize your images. You'd be better of with something simpler and easier to maintain like http://wizerways.net/wizerways/everglades/ 


    Free Expression Web Tutorials
    For an Expression Web forum without the posting issues try expressionwebforum.com

    Sunday, March 31, 2013 3:58 AM
  • You also need to be aware that browsers make truly execrable graphics editors. Although the HTML standard allows you to specify display sizes for images which are different from their natural dimensions, that does not mean that browsers do a good job of converting (they don't), or have built-in sophisticated resizing algorithms like graphics programs do. You should always process your images in a graphics editor first, resizing the image to the size you intend to use, and optimizing for file size, before you save it to use in the page. That gives you an optimally sized image that does not require resizing by the target browser.

    Another thing—even graphics editors have a hard time with upsizing. The problem is that you are trying to add image information which does not exist in the original image. In your page, you have a "humanimal code" scroll image with four elements. It is a 100 x 125 pixel image resized in the browser to 190 x 240 pixels. Very bad idea. Here's why...

    The original image has 12,500 pixels (100 x 125), while the expanded image needs 45,600 pixels (190 x 240). That's 33,100 pixels that didn't exist in the original image (almost three times as many as the original image itself!). Where do those pixels come from? Why, from thin air, of course. Basically, the browser (in this case) has to make its best guess at what color to make each of those added pixels. Typically, they would use a quick and not very accurate algorithm such as Nearest Neighbor. In the end, you end up with an ugly and quite unreadable mess such as what you are showing there.

    Frankly, even Photoshop, with its sophisticated bicubic smoother algorithm, could not salvage that mess, with its four-to-one pixel ratio between the original and the target. In a case like that, simply recreate it. There are two ways to go there. One, you can go to a source of public domain clipart, such as http://www.wpclipart.com/, and grab a scroll image, then add the text yourself, like this:

    Or, you can bring the original into a graphics editor, get rid of that horrible, fuzzy, anti-aliased text, resize just the scroll image, then fill it with actual size text appropriate to the size of the graphic, like this:

    Either method will work, and either is about as easy as the other. And both look better than what you currently have on the page. BTW, you can have either of those images above, presuming that you had the rights to the second to begin with. I created the first, starting with a PD image, and you are hereby granted permission to use it. The second is technically a derivative work, so your rights to it will depend upon its ownership status to begin with.

    Anyway, the point of all this is that the quality of your site is in many eyes reflective of the quality of your graphics. Slacking off and not taking the time to maximize graphic quality reflects upon you, your site, and your cause. Just sayin'...  ;-)

    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.

    Sunday, March 31, 2013 10:19 PM
  • Thank you, Bill, for your helpful response.

    Will the following approach to creating a clean homepage that causes none of the major browsers a problem work: (1) Save all present content of the index file; (2) Start with a completely empty index file (How do I do that?); (3) Insert the Everglades Eden logo and Humanimal Code images followed by 1 line of text ("We will succeed with your help") all centered horizontally on the page; (4) Now insert a 3-column, fixed width (800 pxs) table centered on the page; (5) Insert tables into the 3 columns; (6) Now insert un-formatted text and images into the tables which are inside the 3 columns; (7) Now format the text.

    Will this create a clean homepage?

    Perhaps my baby Forum status prevents me from finding Cheryl's EW tutorial. I wind up in wiki and there's no Cheryl in sight.

    The same with templates. Where do I peruse them?

    Thursday, April 4, 2013 3:48 PM
  • This is the location for Chery'l Basic Website Video Tutorials

    http://by-expression.com/page/EW-Video-Basic-Website-tutorial

    On her site if you select the Templates button, you can see the ones she offers.

    pat


    Pat Geary - Microsoft MVP

    Expression  Web Tutorials & Templates | Expression Web Blog | Migrating from FrontPage to Expression
     - Free EW Community Toolbar - Free Site Templates

    Thursday, April 4, 2013 4:00 PM
  • Many thanks, Cheryl, for your helpful advise.

    My use of the phrase pt (points) perhaps is triggered by EW's use of pt when displaying font sizes.

    Your observation re the format toolbar is 100%; I continue shooting from the hips being led astray by my heavy use of MS Word. The 500-page book on my desk and article tips here and there have not yet pushed me onto the right track. Hopefully, your tutorial will shine the bright light as soon as I find it.

    Thursday, April 4, 2013 4:01 PM
  • Thank you very much, Scott, for your help and a special thank you for the Humanimal Code image. We love what you created and, of course, are using it.

    You woke me up and showed me with your image that my approach using MS Word to create the image produces poor results.

    My handling of images has been the easy approach: load a large image and then it is easy to size and re-size when necessary.

    I do like to use thumbnails. That, of course, re-sizes the large image and displays the thumbnail with the large image waiting in the wings.

    Thursday, April 4, 2013 4:13 PM
  • "is triggered by EW's use of pt when displaying font sizes"

    It is not telling you to use pt.  It is displaying approximations for the keyword font sizes (small, x-large, etc.) which are actually what the styles created using that dropdown use, not pt.  And, like pt, those are not consistent in browsers and should be avoided.  As you now know, using that style menu is not the way to go and can create a mess.  Think of it as training wheels for those who don't yet know what they are doing - and not where you want to be for your site.  :)

    Thursday, April 4, 2013 5:26 PM
  • Thank you very much, Scott, for your help and a special thank you for the Humanimal Code image. We love what you created and, of course, are using it.

    You woke me up and showed me with your image that my approach using MS Word to create the image produces poor results.

    My handling of images has been the easy approach: load a large image and then it is easy to size and re-size when necessary.

    I do like to use thumbnails. That, of course, re-sizes the large image and displays the thumbnail with the large image waiting in the wings.

    You're welcome. As for MS Word as an image editor... it makes a fine ashtray. It sucks as an image editor. The phrase "Word Art" is an oxymoron.

    As for resizing images, I hope that my explanation of what happens when an image is resized, especially when upsized, has disabused you of that notion. Any time that pixels must be created that did not exist in the original image, guesswork is involved, and accuracy suffers. Some very minor browser resizing is probably OK, but beyond that, you need to use a dedicated graphics editor.

    And even then, upsizing an image is a very dicey proposition, involving as it does the generation of "imaginary" pixels based upon what is in the original image. And if text is involved, which is usually anti-aliased, even more fuzziness is introduced. Not a good idea. You're usually better off recreating what you need than you are upsizing an image more than 25%–30% (even less if it contains text), even if you're working in a sophisticated graphics editor.

    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, April 4, 2013 7:40 PM
  • Your observation re the format toolbar is 100%; I continue shooting from the hips being led astray by my heavy use of MS Word.

    Word is a fine word processor, and a not too bad page layout program. It is a terrible Web development app. Word is designed for output to fixed media, to print. It is woefully inadequate for targeting mutable media like the browsers in use for the Web, which may be constrained to phones of 320px width or displayed on monitors up to 2560px or greater.

    Any time that you are taking copy from a Word document to a Web page, you should use "Edit|Paste text..." and choose "Normal paragraphs with line breaks." That will bring in only the text, which you can then use CSS to style as you wish. You will see this done in Cheryl's "Build a Basic Web Site" video tutorial, at http://by-expression.com/page/EW-Video-Basic-Website-tutorial.

    Download the tutorial and the "urban-houston.zip" assets file, then view it all the way through once. Then, stopping and starting, use the assets in the zip file to work through the tutorial along with her. When you have done so, you will have a much better idea of what you need to do, and how to use EW to do it.

    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, April 4, 2013 7:56 PM
  • Will the following approach to creating a clean homepage that causes none of the major browsers a problem work: (1) Save all present content of the index file; (2) Start with a completely empty index file (How do I do that?); (3) Insert the Everglades Eden logo and Humanimal Code images followed by 1 line of text ("We will succeed with your help") all centered horizontally on the page; (4) Now insert a 3-column, fixed width (800 pxs) table centered on the page; (5) Insert tables into the 3 columns; (6) Now insert un-formatted text and images into the tables which are inside the 3 columns; (7) Now format the text.

    Will this create a clean homepage?

    No. You are using tables for a purpose for which they are not intended. Tables are meant for tabular (naturally row/column-oriented) information, not for general purpose page layout, which is what you are proposing. You should use semantic structures (paragraphs, lists, headings, etc.) and semantics-free containers (divs, spans) to create your page. Once again, view and work through Cheryl's tutorial, and you'll see how it is done.

    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, April 4, 2013 8:05 PM