locked
Header Alignment problem RRS feed

  • Question

  • I am working on some things for my dad's website since they got rid of their original web designer - I have the corrections I need to make pretty much finished except for alignment issues with the header. His former designer used Expression and I am having a problem figuring out all of the "auto-styles" and what I need to change - I'm not very good at this stuff. Take a look at the pages:

    Main page, the header appears aligned in some browsers/resolutions but not in others: http://allergyatlanta.com/Allison/test2.html

    One column subpage layout, the image appears misaligned and also slides when the page is expanded/contracted: http://allergyatlanta.com/Allison/test4.html

    Because the coding is kind of a mess from the previous designer (template + Expression changes + random HTML) I cannot figure out for the life of me what I need to change to fix these issues. Help would be appreciated! :) Thank you

    Friday, April 20, 2012 3:36 AM

All replies

  • "...kind of a mess..."?! You're kidding, right? Have you looked at the source code?

    Hmm... this "designer" they got rid of was clearly not someone trained and experienced in Web development, with knowledge of HTML and CSS, which is required in order to use Expression Web? (See Prerequisites for Using Microsoft Expression Web)

    The source code for that page is a disaster. He's got editable regions declared in a page which is not attached to a template. He's got a <style> block (for PureCSSMenu) declared within the <body> element (hint: Style blocks belong in the <head> section. hint#2: That menu relies upon using the :hover pseudo-class on arbitrary elements, and will NOT work in older browsers.). He's got umpty-thump auto-style# classes, both in the embedded style block and that one in the body, many duplicating the same functionality. The text is sized in fixed units, pixels, which cannot be resized in Internet Explorer, so the site is legally inaccessible under the ADA for fully 50% of the browsers in use (consider the implications for the business site of health care professionals... right). He's got a script that supposedly cyles through five header images, but actually only displays two variants.

    And speaking of those images, do you know how long your pages take to load on a 3G connection? Let's just say it's measured in minutes, not seconds! Part of the reason is those images—316 kB each, and he's got a preload script. Why in the name of all the gods he was using five images that size just to change the text in that lower left corner is beyond understanding. There are much more efficient ways to handle that, which would ameliorate the effect on your load time.

    Not tremendously, though, since your total page weight is 1071 KB (recommended size is 100 KB to 200KB, tops). You've got a lot of optimization potential there.

    I could go on, but here's the point I'm trying to make, based upon this statement: "I have the corrections I need to make pretty much finished..." —Do you feel that you are a Web development professional? Can you address these issues, and the others not yet mentioned? That statement clearly indicates that, at the time that you made it, you believed it to be true, and as stated above, the corrections that need to be made are in fact far from "pretty much finished." Are you aware of the financial liability that non-compliance with the accessibility requirements of the ADA will expose this business to? (Target Stores had to settle with the National Federation for the Blind for $6 million because their site was inacessible to the visually impaired.) You may not have pockets as deep as Target, but I'm guessing that a business representing the practice of three physicians, with the profile this one seems to have, would be more than enough to attract the attention of a lawyer looking to litigate a class action on behalf of visually impaired clients, and who would be able to reasonably present a prima facie argument that such a practice could certainly afford to hire competent developers to have avoided the issue of inaccessibility in their online Web presence.

    No offense, Allison(?), but I think that, unless you actually are a qualified developer, you might want to consider engaging a professional developer, or firm, as well as employing the legal professionals your practice no doubt has on retainer, to assist you in drawing up a development contract. Yes, it may cost you a nickel or two, but not nearly as much as it will potentially save you.

    While it may be true, unfortunately, that "anyone can do a Web site," it is NOT true that anyone can do a Web site right. It is not simply "desktop publishing for the Web," as so many novices seem to believe, erroneously. Web development requires knowledge and experience to do correctly. Having the tool is not enough—an experienced developer can create an entire site with a plain text editor like Notepad. He won't be as productive as if he used an advanced tool, but what is required is knowledge and experience; the tool simply makes it easier for him to apply those factors.

    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.


    • Edited by paladyn Friday, April 20, 2012 7:34 PM
    Friday, April 20, 2012 5:33 AM
  • While Scott was a bit over the top his basic premise that you have to know or spend tme learning basic HTML & CSS.

    Yes, that page is a real mess not only from a code perspective but because it it forces a horizontal scrollbar at 1024 for no good reason. The containers don't line up and the code is rediculously bloated.

    Frankly, I'd take the content and start over. That design if pretty simple but made insanely complex because the person who created it as it now stands went clicky, clicky, clicky on the formatting toolbar without having the slightest clue what they were doing. It also looks like they were trying to make a pixel perfect placement using margins (which is better than absolute positioning but overkill). The use of px for font sizes is what triggered Scott's comments on accessibility. They won't scale in IE and while 16px is adequate for most people those with really high resolution screens or who are using large fonts for legibility will have problems.

    First thing I'd do is recreate the basic page using properly optimized images. Get rid of the Word generated styles - anytime you see

    <span style = " mso-spacerun:yes">&nbsp;</span><o:p></o:p>

    There will be a probelm with display in most browsers. Also, by starting over you won't have all the auto generated styles and can creat only the styles you actually need to use with meaningful names in an external stylesheet for consistency.

    If you aren't understanding what you see, what Scott said or what I have posted you really need to spend time with the learning resources section of the FAQ and make sure you read that Prerequisites for EW document Scott linked to.

    None of what we have said is Expression Web specific since you must learn HTML, CSS and probably some javascript to successfully create a web page. Expression is just a tool like a hammer and nails are tools.

    One last comment on the current site - I'd ditch the animation in the head section. The text is blurry and the movement distracts people who are trying to read the services you provide.


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

    Friday, April 20, 2012 1:58 PM
  • While Scott was a bit over the top his basic premise that you have to know or spend tme learning basic HTML & CSS.

    Yeah, I'll grant you that. I actually had intended to edit that post, and had already edited the third paragraph, changing everywhere that it previously said "you've got..." to "he's got...", since she apparently was not the source of that garbage markup. Unfortunately, it was after midnight, I had already received my meds before retiring, and I was beyond the point of being lucid, so I didn't finish my edits. I have now edited the second paragraph to more accurately represent the actual source of the poor markup in the existing page.

    OTOH, she did make a statement, ""I have the corrections I need to make pretty much finished...", which indicated that she clearly did not have the skills required to make the necessary changes. Therefore, although I edited other portions of my post as well, I stand by the suggestion that she/they hire competent people to make the necessary corrections. That, or engage in some serous training before attempting to make the necessary changes herself, as you indicated here:

    None of what we have said is Expression Web specific since you must learn HTML, CSS and probably some javascript to successfully create a web page. Expression is just a tool like a hammer and nails are tools.

    I suggested engaging a professional instead of the training route, which, as you know, I usually do, because I got the impression that she took on the job of "...working on some things for my dad's website..." when they "...got rid of their original web designer..." without realizing what she was getting into, or the need to actually have to learn Web development technologies in order to attain her objectives. I could be wrong about that, and she might be quite willing to undertake the necessary training, in which case, fine, she can have at it, with our encouragement and enthusiastic help whenever she comes here with questions! ;-)

    However, I don't feel that I was at all over the top in expressing the liability to litigation of the site. Unlike some of the sites for which we suggest that possibility, this site is for a PA firm with big enough pockets to be attractive to the kind of "ambulance chaser" personal injury attorneys I see advertising on daytime TV all day long since I've been hospitalized, a firm who would face a lose/lose situation in either having to settle a suit or fight an expensive litigation, even if they won in the end, which is far from certain, since the site as currently constituted IS in fact inaccessible. I would agree with you, where you have...

    Frankly, I'd take the content and start over.  
    [and] 
    ...by starting over you won't have all the auto generated styles and can creat only the styles you actually need to use with meaningful names in an external stylesheet for consistency.

    If you aren't understanding what you see, what Scott said or what I have posted you really need to spend time with the learning resources section of the FAQ and make sure you read that Prerequisites for EW document Scott linked to.

    Somehow, I don't reconcile "I am working on some things for my dad's website since they got rid of their original web designer - I have the corrections I need to make pretty much finished... " with "I am prepared to undertake extensive training to become qualified to completely rebuild this site correctly and in compliance with the law." As I said, I could be wrong about that, but if I'm not, the advice to engage a competent professional or firm in these particular circumstances is not "over the top," n'est-ce pas?  ;-)

    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.

    Friday, April 20, 2012 8:37 PM
  • The changes I needed to make were all educational content to be added, nothing to do with the actual site or design itself...I just happened to notice the other issues with the alignment and was going to see if I could help fix them, but obviously based on what you guys said, it is nowhere near something I could handle. I'm not a design professional and never claimed to be. I appreciate the advice.
    Saturday, April 21, 2012 12:41 AM
  • AJ,

    Sadly what you see is a common symptom of someone thinking "anyone" can create a website. Which to some extent is true but it doesn't mean they can create a usable website that accomplishes the goals of the site owner. Your dad's site has serious display issues cross browser. Out of curiosity I looked at your pages in Safari on my Mac and they are just as discombobulated in it as in IE 9. You really do need to have someone go through and fix the site since it gives a poor impression of the business.


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

    Saturday, April 21, 2012 1:25 AM