none
Layout lines up in Chrome but not in Internet Explorer 11 RRS feed

  • Question

  • Hi .. I have been using Exp Web for last 6 years on our website: aworkinprogress.com.au.  Upgrades to IE 11 mean that over time the print page preview doesn't line up properly.  It is important that people can print the page properly and have checked it layout on internet café computers etc.  The website layout view is fine in IE and Chrome and also layout and to print in Chrome is okay and lines up but problem is in code and how it relates to IE.  (Fine in Exp 6 but that is not current) I have looked at alternative of using Dreamweaver (am subscribed to Adobe package and use InDesign for eBook just published) to see if loading into Dreamweaver would resolve the compatibility issues but I don't really like the package and know that Exp Web is now well out of date.  I downloaded the free Exp Web 4 today but issue still remains.  I have been reading on absolute position and inline etc but can't see why it is throwing the print page layout onto the next page.  I am confused as to what to do next and realise it is a code issue.  I am thinking even if I get Visual Studio now it will still be a problem as the coding needs fixing.  I expect someone has had a similar issue and is expert in this and is it possible to get your advice?  Having brain fog issues on what I have read so far and tried and know it is simple to fix code - if you know how!!  Thank you.  Bev D
    Sunday, December 29, 2013 4:04 AM

Answers

  • Your home page has problems that will break it (overlapping text) when people don't use the same browser text settings as you have.  This problem is not browser-specific.

    In IE, go to View -> Text Size -> Largest.  In Firefox, pick "View -> Zoom -> check "Zoom Text Only", and then zoom in a few times (hit Ctrl+ a few times).

    People will use a different text size when their eyes are not as good as yours, or because they have a high resolution, but small screen.  In fact many computers with small but high resolution screens ship with the browsers set that way.

    Use print preview and you'll see the problem is not an IE11 problem.   Using the "shrink to fit" option to try to get the whole page width in the page, and it shows problems in both IE and Firefox, just different problems. (Look beyond the first page.)

    You are using positioning that you should not be using.  You are using top, bottom, left, right, and fixed heights  rather than simply letting divs do what they do naturally: they follow one another on the next line, and take the full width of their container, or a width you specify, and are as high as they need to be to contain their contents (with the exception of floated contents, which need special care, with an easy solution being a non-floated element with clear:both styling as the last thing inside the div).  When you constrain your div positions the way you have, you are guaranteed to have problems.  Remove those constraints.  For spacing between elements or from borders, use margins and padding.  You can design the entire page without a single right/left/top/bottom, or height.  (The exception: feel free to tell the browser the height and width of your images.  That doesn't change with text resizing.)

    I suspect you'll find printing far more consistent if you do.  You have a lot of room for confusion to a printer, the way you've done things.  (What is "bottom: -3776px" to a printer page, for example?)

    • Marked as answer by Bev D Monday, December 30, 2013 4:58 AM
    Sunday, December 29, 2013 10:47 AM
  • And you've also got a lot of places where you have used line breaks ("<br />") and non-breaking spaces ("&nbsp;") for positioning and alignment. These are uncalled for, and are rendered inconsistently from font to font, browser to browser, and, no doubt, from printer to printer.

    As Kathy said, you should never have to use positional attributes (left, right, top, etc.) for a properly constructed Web page, nor should you ever restrict the height of any container which contains text. By doing so, you remove the ability of the content to naturally reflow for different text sizes, and to adapt for varying output devices (desktop/laptop browsers, smartphones, tablets, phablets, and printers). Your pages are fragile, and break easily in all circumstances where text is rendered differently than it is on your local machine.

    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 Bev D Monday, December 30, 2013 5:02 AM
    Sunday, December 29, 2013 10:29 PM
  • Yes, setting up a CSS style sheet properly is the best way to go. But you then peppered it with bad code and made mistakes because you didn't have a proper fooring in HTML and CSS.

    Expression Web is a professional website design program. It assumes that you know when--and when not--to use certain things. You've misused some. Absolute positioning (layers) is something you should strip out of your site completely. It is unnecessary and dangerous, with unpredictable results if you don't know the pitfalls. It's uses are so limited, that I have used it only once, for one effect, in the past 6 years, and that was on a site I inherited for maintenance and updating.

    Sizing text is another problem. You may not care about Safari, or that the footers aren't really important, but your visitors may differ with you--to them it looks like a big mistake--because they never see it happening on other sites--and it hurts your site's credibility. Your site is being compared to every other site they are used to. And I use the Safari problem to make a corrolary point to what Kathy and Scott have said. Never set fixed heights on a Div that contains text. If the visitor has a high-resolution laptop or tablet, it will come from the factory with the text set to 125% of normal in order to adjust for the higher pixel density. Your visitors may not even know that; all they'll know is that they can't read the overlapping text on your site. They will see what you see if you do as Kathy said in zooming text only (and lots of people use that feature on their own). Conversely, if you set the page up correctly, there would never be a gap at the end because the Div would automatically shrink in Safari (or whatever) if it needed to.

    All of your divs use absolute positioning, but that may have been something you didn't intend. If you dragged the borders of divs in the Design Pane with your mouse, EW had to make them absoultely positioned (with fixed heights). It's the only way to do it graphically, and you'll find the same thing happening in other web design programs.

    When I suggested using % for sizing, I meant for text sizing only, not div sizing. Even then, I'd recommend ems--it's easier. Hester was wrong in saying to use px for text sizing. You can do it, but it has its own problems.

    The first two points in web design are (and you'll see these mention in numerous posts here):

    1. Never ever, ever, ever, ever, ever use absolute positioning. Really, ever.

    2. Never ever, ever, ever, set the height on any Div that contains text. Ever.

    There is some stuff in EW that is simply to provide some backward compatability with old FrontPage sites (but they removed some with each new version of EW). You need to know when to stay away from them.

    There is nothing right or wrong about using templates. There is a LOT of dreck out there. But EW comes with templates that are set up correctly, using DWTs for master pages, with external style sheets and everything set for you to run with it. Pick one, change the widths to suit your needs, and start building a site on a solid foundation.

    I just did a search of this forum and found Nolan Hester mentioned only once--over 5 years ago. And the reviews on Amazon are not very good. He's not a web developer; he seems to be a freelance writer who'll take on any project and crank out a product. And Peachpit Press? Doesn't sound like a name that fills me with confidence.

    So--look in the Forum's FAQ and take advantage of the Learning Resources--especially the HTML and CSS tutorials at w3schools.com. You need a grounding in both of them.

    Then--look around the web and see what other sites look like--what works and what doesn't; take notes. What are people using for colors, menus, design elements, fonts, etc. (Pink-on-white, neon green-on-white, lavender-on-white: really hard to read; that's why you rarely see them used.)


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

    • Marked as answer by Bev D Monday, December 30, 2013 4:57 AM
    Monday, December 30, 2013 3:43 AM

All replies

  • If I understand you, you are saying that everything is copacetic when the site is viewed in a browser, any browser, and is also fine when "File|Print Preview" is selected in anything but IE11, but that IE11, only, displays the previewed page incorrectly. Is that the case?

    If so, then forget about which editor you're using. The editor which creates the markup has nothing to do with the way the browser renders the markup. That is a characteristic of the browser, whether rendering a standard page or a Print Preview page. Internet Explorer, unfortunately, has always been idiosyncratic in the way it renders, both across competing browsers and within the various versions of IE itself.

    When rendering your page for print purposes, the browser knows to look for your print stylesheet. You can specify a print-only stylesheet by linking it with a media descriptor in the <head>, like so:

    <link rel="stylesheet" href="print.css" type="text/css" media="print" />

    That 'media="print"' tells the browser to ignore it when rendering to the screen, but to use it when rendering to a printer (or a print preview). In this stylesheet, you would set elements such as your menu bar and navigation footer, both completely useless on a printed page, along with probably the header and sidebars if they're not needed, to "display : none." You would also want to hide any video or music players (again, useless in print) or anything else unneeded. That may be all you need to do, or you may wish to layout the page differently in the printed version, and you may do so here.

    In any event, you currently have no print stylesheet, so you will want to address that first. You may find then that IE11 previews the same as the others. For an excellent guide to setting up your print stylesheet, see this reference: http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml.

    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 Bev D Sunday, December 29, 2013 5:17 AM
    • Unmarked as answer by Bev D Sunday, December 29, 2013 6:11 AM
    Sunday, December 29, 2013 4:54 AM
  • Hi Scott

    Thank you for your quick response.  Makes perfect sense to me now - to cater for various browsers with a print stylesheet.  Thank you also for the link - I have had a quick read of same after reading your response and will proceed on that basis.  I have had a check in the Nolan Hester book where I learnt how to do CSS when Exp Web first came out and had to self-teach myself what to do and at that time - obviously back in mid 2007 - this wasn't an issue with browsers so nothing in the book specifically for print.css but easy to pick up on creating same from link you have provided plus testing same on the actual page to ensure it works before finalising into the print.css.  I will work on my dummy copy until I get it sorted but thank you so much.  I feel my brain fog has definitely lifted and much easier than trying to work it out from the editor - which - as you said - has nothing to do with it - OH YES!!  Thank you.  Have a good day/week/New Year, Cheers from Bev D

    Sunday, December 29, 2013 5:27 AM
  • Hi again,

    I have tried with the print stylesheet and putting detail into the top of page on the dummy and still have the same problem.  I have also noted - sorry - missed that you asked the question if it only does this in IE 11 and the answer is no, it also does it in Firefox and Netscape.  Still looking for an answer.  I have tried recreating the span which is floating down onto the middle of the next page and overwriting other boxes and this still doesn't fix it.  Thinking it is in the code still?  Thank you for your help.  I really appreciate it.  I am still missing the answer?  Thank you, Bev D

    Sunday, December 29, 2013 6:17 AM
  • Your home page has problems that will break it (overlapping text) when people don't use the same browser text settings as you have.  This problem is not browser-specific.

    In IE, go to View -> Text Size -> Largest.  In Firefox, pick "View -> Zoom -> check "Zoom Text Only", and then zoom in a few times (hit Ctrl+ a few times).

    People will use a different text size when their eyes are not as good as yours, or because they have a high resolution, but small screen.  In fact many computers with small but high resolution screens ship with the browsers set that way.

    Use print preview and you'll see the problem is not an IE11 problem.   Using the "shrink to fit" option to try to get the whole page width in the page, and it shows problems in both IE and Firefox, just different problems. (Look beyond the first page.)

    You are using positioning that you should not be using.  You are using top, bottom, left, right, and fixed heights  rather than simply letting divs do what they do naturally: they follow one another on the next line, and take the full width of their container, or a width you specify, and are as high as they need to be to contain their contents (with the exception of floated contents, which need special care, with an easy solution being a non-floated element with clear:both styling as the last thing inside the div).  When you constrain your div positions the way you have, you are guaranteed to have problems.  Remove those constraints.  For spacing between elements or from borders, use margins and padding.  You can design the entire page without a single right/left/top/bottom, or height.  (The exception: feel free to tell the browser the height and width of your images.  That doesn't change with text resizing.)

    I suspect you'll find printing far more consistent if you do.  You have a lot of room for confusion to a printer, the way you've done things.  (What is "bottom: -3776px" to a printer page, for example?)

    • Marked as answer by Bev D Monday, December 30, 2013 4:58 AM
    Sunday, December 29, 2013 10:47 AM
  • And you've also got a lot of places where you have used line breaks ("<br />") and non-breaking spaces ("&nbsp;") for positioning and alignment. These are uncalled for, and are rendered inconsistently from font to font, browser to browser, and, no doubt, from printer to printer.

    As Kathy said, you should never have to use positional attributes (left, right, top, etc.) for a properly constructed Web page, nor should you ever restrict the height of any container which contains text. By doing so, you remove the ability of the content to naturally reflow for different text sizes, and to adapt for varying output devices (desktop/laptop browsers, smartphones, tablets, phablets, and printers). Your pages are fragile, and break easily in all circumstances where text is rendered differently than it is on your local machine.

    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 Bev D Monday, December 30, 2013 5:02 AM
    Sunday, December 29, 2013 10:29 PM
  • Hi Scott -

    Thank you for your quick response.  I have to say I am really confused.  I don’t understand as I thought the point of having cascading style sheets was to set styles up for a format firstly but that when arranging a web page I can move the size of it and also where a span is located within a div tag - container to achieve layout.  The sizing at the top left right top etc moves according to how I manually size the container - sometimes because of the font size I oversize at the end on the span and div so that it flows correctly.  Not sure why I can't use a line break.  Isn’t it normal in a web page to have paragraphs?  In the case where I cannot use tabs as is the case in web language why can’t I use spaces? - that’s not a biggie so can do that.  I know there are some errors in what has occurred with the web page as I uploaded it into Dreamweaver and there were some things like the end of the div went to a minus (see where bottom is (-882px) but am I supposed to take out all of the sizing Left, Top, Right Bottom on every div tag, span etc - I am not sure what you are telling me I am doing wrong.  Sorry to bother you but I have based what I have done on book Expression Web Visual Quickstart Guide over 6 years ago and never had a problem with rendering until over the last year with browser issues with Internet Explorer.  Everything else renders correctly in IE 11 on my web pages even the layout on divs for what follows the h1 and 1 x spans which are the only 2 x areas which render on print preview to half way down on page 3 and this is the same h1 and 1 x span doing the same thing on the other 6 pages but all else after them renders correctly down the page on the print preview.  I have tried using relative/static position on the h1 and can move it to the correct place which I can do for the h1 but goes weird on the span.  This is really a coding issue as I see it and relates to the position tag plus cleaning up the ( ) and (-) layout issues after moving it into and then back out of Dreamweaver.  Adobe had advised me it was a simple import into Dreamweaver as am subscribed to use it so got scrambled in layouts there.  Sorry to ask but I don’t understand what you are telling me I should do - I might look like a dummy to you like why did you do that but it is okay if you have actually gone to some sort of hands on training but not easy when there have been no classes available here in Australia in Exp Web on the Gold Coast as everyone has used Dreamweaver in the past and paid thousands of dollars to purchase or use in-house in the companies they worked for.  So whatever I have got wrong no problems I can fix just need someone like yourself with expertise to advise me if that’s possible?  Thank you for your help.  Bev D

    • Marked as answer by Bev D Monday, December 30, 2013 4:57 AM
    • Unmarked as answer by Bev D Monday, December 30, 2013 5:01 AM
    Sunday, December 29, 2013 11:22 PM
  • Further, you have set your text by descriptors (large, xx-small, etc.). Different browsers interpret those descriptors differently. In the Safari browser, for example, the text is about 30% smaller than in IE 9. That's how Safari interprets "small"--differently than IE does (and Firefox, and Opera, and Chrome, and...). You can never depend on how your site will look if you use descriptors.

    So, not only is the text smaller in Safari, but because you set the text container to a fixed height, there is a completely blank screen when the content ends and only if people keep scrolling down to they discover the footer--950 pixels off the bottom of the screen. Whoopsie!

    Use ems or % for fonts, pixels for graphics, points for your print style sheet (points mean nothing to a browser).

    Also, you have used the same Div ID more than once on a page "container". Can't do that; Web Standards limit you to one use of a Div ID name per page.

    These are problems (and there are many others) that are not the fault of the editor program. Any editor will create what you tell it to; you'd have the exact same problems in Dreamweaver or Notepad.

    Here's what the pages look like, side by side--IE on the left, Safari on the right. The footers are lined up to show the difference (I edited screen shots to show the full height problem; in reality, the white space on the right is approx. 950 pixels)...


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


    Monday, December 30, 2013 12:18 AM
  • Hi Bill

    Thank you for your response.  I have to say I am now seriously not getting what everyone is saying.  In the book Microsoft Expression Web Visual Quickstart Guide - the only guide I have for Exp Web from when I started out - Nolan Hester advised me to set up CCS properly was the best way to go rather than use template based web pages that someone else sets up for you.  Using Contextual Selectors is specifically about setting up combinations of div tags and ID-based styles to create styles p154 where you choose the font-family, font size in px and weight etc specifically for paragraph text across your web page to create similar text/layout patterns etc - to use these and size the boxes yourself etc.  Noted that he also says to watch out for absolutely positioned elements inside parent boxes as absolute positioning does not automatically expand to hold the content.  Which is why I expand the boxes sizes at the end to cover the print showing in the print preview.  I get what you are saying about Safari as far as the gap but the footers in this case are not a big issue as the content is pretty generic anyway.  I think your advice of adjusting the size to percent is a good way to go so will try that out so that it is more user friendly for iPad etc which I think is what you are saying?  Thank you for your advice.  Bev D

    • Marked as answer by Bev D Monday, December 30, 2013 4:57 AM
    • Unmarked as answer by Bev D Monday, December 30, 2013 5:02 AM
    Monday, December 30, 2013 12:58 AM
  • Yes, setting up a CSS style sheet properly is the best way to go. But you then peppered it with bad code and made mistakes because you didn't have a proper fooring in HTML and CSS.

    Expression Web is a professional website design program. It assumes that you know when--and when not--to use certain things. You've misused some. Absolute positioning (layers) is something you should strip out of your site completely. It is unnecessary and dangerous, with unpredictable results if you don't know the pitfalls. It's uses are so limited, that I have used it only once, for one effect, in the past 6 years, and that was on a site I inherited for maintenance and updating.

    Sizing text is another problem. You may not care about Safari, or that the footers aren't really important, but your visitors may differ with you--to them it looks like a big mistake--because they never see it happening on other sites--and it hurts your site's credibility. Your site is being compared to every other site they are used to. And I use the Safari problem to make a corrolary point to what Kathy and Scott have said. Never set fixed heights on a Div that contains text. If the visitor has a high-resolution laptop or tablet, it will come from the factory with the text set to 125% of normal in order to adjust for the higher pixel density. Your visitors may not even know that; all they'll know is that they can't read the overlapping text on your site. They will see what you see if you do as Kathy said in zooming text only (and lots of people use that feature on their own). Conversely, if you set the page up correctly, there would never be a gap at the end because the Div would automatically shrink in Safari (or whatever) if it needed to.

    All of your divs use absolute positioning, but that may have been something you didn't intend. If you dragged the borders of divs in the Design Pane with your mouse, EW had to make them absoultely positioned (with fixed heights). It's the only way to do it graphically, and you'll find the same thing happening in other web design programs.

    When I suggested using % for sizing, I meant for text sizing only, not div sizing. Even then, I'd recommend ems--it's easier. Hester was wrong in saying to use px for text sizing. You can do it, but it has its own problems.

    The first two points in web design are (and you'll see these mention in numerous posts here):

    1. Never ever, ever, ever, ever, ever use absolute positioning. Really, ever.

    2. Never ever, ever, ever, set the height on any Div that contains text. Ever.

    There is some stuff in EW that is simply to provide some backward compatability with old FrontPage sites (but they removed some with each new version of EW). You need to know when to stay away from them.

    There is nothing right or wrong about using templates. There is a LOT of dreck out there. But EW comes with templates that are set up correctly, using DWTs for master pages, with external style sheets and everything set for you to run with it. Pick one, change the widths to suit your needs, and start building a site on a solid foundation.

    I just did a search of this forum and found Nolan Hester mentioned only once--over 5 years ago. And the reviews on Amazon are not very good. He's not a web developer; he seems to be a freelance writer who'll take on any project and crank out a product. And Peachpit Press? Doesn't sound like a name that fills me with confidence.

    So--look in the Forum's FAQ and take advantage of the Learning Resources--especially the HTML and CSS tutorials at w3schools.com. You need a grounding in both of them.

    Then--look around the web and see what other sites look like--what works and what doesn't; take notes. What are people using for colors, menus, design elements, fonts, etc. (Pink-on-white, neon green-on-white, lavender-on-white: really hard to read; that's why you rarely see them used.)


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

    • Marked as answer by Bev D Monday, December 30, 2013 4:57 AM
    Monday, December 30, 2013 3:43 AM
  • Hi Bill

    Thank you for your response.  I appreciate all of you, Kathy, Scott and yourself taking the time and putting the effort in to assist.  Thank you also for the reference to w3schools.com.  I definitely could have used some grounding in CSS back 6 years ago other than trying to learn from a textbook which was all that was available to me at the time.  You are right.  Now we have so many tutorials of packages online which will take me step by step through the learning curve on CSS so I am looking forward to stepping up and learning more.  I appreciate all your advices.  Thank you.  Happy New Year.  Bev D

    Monday, December 30, 2013 4:57 AM