none
simplest code to bring down Design View RRS feed

  • General discussion

  • My post has been stripped of "" phrases. How, why????!!! Now I try to put them back:

    Design view is unable to correctly display "" elements with x-coordinate expressed as %. These elements are placed too far left and overlap other elements, etc, leading to total mess on page. Apparently Design View has different idea of default page width than browsers do.

    I have been using EW 2 and had to live with this bug for years. Now I bought EW 4 just to see it again! This bug effectively prohibits visual editing when relative positioning is in use - and isn't EW all about visual editing?

    The offending HTML/CSS below is perfectly legal and rendered correctly on IE and Firefox. I wonder how such a simple thing can bring Design View down and remain unnoticed for 6 years.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Example</title>
    </head>
    
    <body>
    
    	<div style="; left:40%; width:60%; background-color:lime">
    		This DIV should start at 40% of page width and extend to the right edge (width is 60%).
    	</div>
    
    </body>
    
    
    </html>


    Thursday, November 29, 2012 12:26 PM

All replies

  • "and isn't EW all about visual editing?"
     
    No it is not. And never has been.
    <quote>
    Is Expression Web a What-You-See-Is-What-You-Get (WYSIWYG) tool?
    No. Expression Web does a good job of approximating what your page will look like in any particular browser. However, the Expression Web design surface does not fully support all code that you might
    be using. For example, CSS pseudo-element styles are not rendered in Design view in Expression Web.
     
    When you want to see exactly how a particular page will look in a browser, you should preview that page in the desired browser. Expression Web contains a robust feature-set for previewing in multiple
    browsers at the desired screen resolution.
    </quote>
     
    As for the code snippet provided: I would expect that div to render in IE with a width of 60% at the left margin.  Other browsers may render with a width of either 60% or 100%, but still starting at
    the left margin.
    The CSS is incomplete, and the leading ; may cause browsers to ignore it completely.
     
    And why use positioning anyway?  FLoats, margins and padding can be used in most cases much more reliably to get the same effect.
     

    Ron Symonds
    Microsoft MVP (Expression Web)

    www.rxs-enterprises.org/fp
    Thursday, November 29, 2012 1:10 PM
  • You are operating under a number of misconceptions:

    1. EW is NOT "all about visual editing". EW is a professional-level design tool, so you must know proper HTML and CSS. The Design Pane is a scratch pad view of your site that must also perform many functions that a browser can't.

    2. Nobobdy uses relative or absolute positioning any more; there is no reason for them except very, very, very limited uses, and certainly not for page layout. They cannot be depended on to display properly on the wide variety of monitor sizes in use. Use margins, padding, floats, and clears for positioning; that is the proper way to lay out a modern website so that it displays correctly in all browsers and all monitor sizes. If you use relative or absolute positioning you must also understand the very significant problems they can cause.

    3. The code you posted does NOT render correctly in IE or Firefox. I don't know what you are trying to do, but that code does not work.


    How many SEO experts does it take to change a lightbulb lightbulbs buy light bulbs neon lights sex porn.

    Thursday, November 29, 2012 1:22 PM
  • Again! I really don't know how to discuss this issue if the system does not allow me to type p o s i t i o n : r e l a t i v e phrase into post, including code sample. Anyway the semicolon you see in DIV style is the leftover of it.
    Thursday, November 29, 2012 2:17 PM
  • Thank you for your reply. I am very well aware of checking in real browser, but the problem is not in previewing the page but in editing. Usually I do the simple things in pure HTML tag soup. Now I have a lot of content to edit and I want to do it in Design View to have little comfort. Am I asking for something unusual?

    So finally, what is Design View all about?

    <quote>As for the code snippet provided: I would expect that div to render in IE with a width of 60% at the left margin.  Other browsers may render with a width of either 60% or 100%, but still starting at the left margin.

    The CSS is incomplete, and the leading ; may cause browsers to ignore it completely.

    </quote>

    You saw my snippet without p o s i t i o n : r e l a t i v e. According to CSS, left box coordinate should be 40% of parent width which, for <body> is whole page (behaves the same when nested in another DIV or whatever).

    <quote>And why use positioning anyway?  FLoats, margins and padding can be used in most cases much more reliably to get the same effect.</quote>

    I have read the whole EW manual carefully and didn't see this kind of advice. Or anything like "relative positioning forbidden!". Are you talking about your personal preferences or CSS spec?

    Thursday, November 29, 2012 2:45 PM
  • 1. "EW is a professional-level design tool, so you must know proper HTML and CSS" 

    I passed my CSS exam and then I inserted legal CSS statement in code expecting to see professional-level result in Design View. And it failed.

    2. This become a discussion about coding preferences, which I dont like and find irrelevant here. For the time being, CSS spec allows relative and absolute positioning and any sane HTML tool should obey them.

    3. I am sorry - I did my best in pasting but your system somehow dislikes p o s i t i o n : r e l a t i v e. You may put it back in place of first extra semicolon and try again to see what happens in Design View.

    Thursday, November 29, 2012 3:23 PM
  • This is not "our system". This is a user-to-user forum. We are not Microsoft employees.

    The EW manual didn't mention anything about relative positioning or margins or floats because the EW maunual is just about using EW; it's not about web design practices. 

    We never said that relative positioning is forbidden. What we said is that it has many, many display problems that most people are unaware of. It is perfectly valid (legal) for certain limited uses, but not for general use, and not for page layout. You must understand the problems before using it.

    In the past, when there were only 2 different sizes of monitors in common use (800x600 and 1024x768 pixels), the problems with positioning were less prevalent because there was less variation between what everyone saw--especially since most people browsed with the browser set to maximized. Now, with people viewing sites on screens from 800px wide to 1920pixels (or larger), and viewing in partial windows, relative and absolute positioning cause serious display problems when used incorrectly. That's why nobody uses them and nobody uses liquid layout (sizes set in %); there is just too much variation in displays to control a site that is set all in %.


    How many SEO experts does it take to change a lightbulb lightbulbs buy light bulbs neon lights sex porn.

    Thursday, November 29, 2012 3:45 PM
  • EW4 Design View is not a browser, and no, it doesn't have a default assumption of how wide a browser window will be. It can, however, know how wide the body will be if you specify the width, even if you do it in %.

    For example, this will show properly in Design View.  Note the specified width for the body:

    <body style="width: 100%">
    	<div style="left :40%; width:60%; background-color:lime">
    		This DIV should start at 40% of page width and extend to the right edge (width is 60%).
    	</div>
    </body>
    Mind you, the unnessary use of position, is still not a good idea - see everyone else's comments.


    • Edited by KathyW2 Thursday, November 29, 2012 7:25 PM
    Thursday, November 29, 2012 4:20 PM
  • Put a link to the actual page please. IF I understand what you are trying to do there is no need for in your code. Under inheritance it should always take its measurements from the container the div is in. There was a period of time when due to an IE 6 bug you would need to force the correct reference but that time is past. Even then it would have been best practices to put it in an IE specific conditional comment to avoid triggering unexpected behavior in more standards complaint browser.

    Tag soup has been discouraged in web design for a decade now. Without seeing your actual page my interpretation of what I would use for your code snippet would be:

    <div style="margin-left: 40%; background-color: lime;">
    Which would give me a div that takes up 60% of the page colored in an obnoxious green
    and a section to its left taking up the other 40% of the page with whatever the background color for its container is set to.
    </div>

    This is very much common practice for a basic 2 column layout that is used everywhere though I prefer to use a fixed column width for the smaller side. I also find it easier to maintain using an external stylesheet. Something like this http://wizerways.net/woj/index.html

    FYI, this was done using just the design section of split view, HTML panel for inserting divs and "new styles" though it isn't the I normally work. I would never work in design view only in order to be able to determine exactly what is selected when I am editing.


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

    Thursday, November 29, 2012 4:49 PM
  • EW4 Design View is not a browser, and no, it doesn't have a default assumption of how wide a browser window will be. It can, however, know how wide the body will be if you specify the width, even if you do it in %.

    For example, this will show properly in Design View.  Note the specified width for the body:

    <body style="width: 100%">
    	<div style="; left :40%; width:60%; background-color:lime">
    		This DIV should start at 40% of page width and extend to the right edge (width is 60%).
    	</div>
    </body>

    We are talking about left coordinate here. Pasted exactly as it is (assumed p o s i t i o n : s t a t i c), this displays OK in Design View. Lime DIV starts at left=0 coordinate because static positioning tells it to ignore left.

    Add  p o s i t i o n : a b s o l u t e  to lime-coloured DIV and it is OK: both Design View and browser place lime DIV at left=40% of page width. (which is kind of strange when you read all those posts banning absolute positioning - EW team should spoil it too)

    Change it to  p o s i t i o n : r e l a t i v e  and you will see WRONG display in Design View: lime DIV starts at left = about 50 pixels. In browser it is still at 40%.

    Design View does not need to have any assumption about browser's width. This would be ridiculous. It only has to react to it's own page width as you resize EW window, just like browsers do. And I will tell you more: it actually does, but only with respect to width. Try resizing EW and you will see. Why is left coordinate ignored - I cannot guess.

    On the contrary to what you write specifying the width for container (<body> in this case) does not change anything.

    Thursday, November 29, 2012 5:53 PM
  • Design view is not a browser and it is never intended to be anything more than an approximation of what a site would look like in a real browser. Read the FAQ and the associated link on what Expression Web is intended to be, not a WYSIWYG.

    Positioning is part of the spec but due to browser differences can create display issues cross browsers so it is discouraged and should only be used by people who know those issues inside out.

    Simple solution, don't depend on deign view to be a real browser display, If you want to use positioning either absolute or relative do so but you won't find people here agreeing that it is a bug, much less a major bug that design view isn't rendering like a web browser. I doubt MS will care either since browsers are a moving target. There have been what 5 versions of Firefox and 2 of IE since EW 4 was released. I don't know how many versions of Chrome and Opera not even counting mobile devices or other internet capable devices (game systems, smart TVs, Roku and others.)


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


    Thursday, November 29, 2012 6:53 PM
  • Cheryl, thank you for bringing some positive thinking to this thread.

    "don't depend on deign view to be a real browser display" - as I said before, I don't. I just want to comfortably edit my content without DIVs overlapping each other and pictures hiding my text. EW is not a freeware and I paid real $ twice to see the same problem. 4 years ago I just didn't dare to complain because everything was moving so quick and I thought - hang on, they will fix it soon.

    I cannot give a link to actual page, because I must have my work done and I gave up position-based layout. I wanted to show the problem clearly, that is why I only included "skeleton" page. There isn't anything else to show - the bug is there (except that the most important part of my demo was stripped off by forum engine).

    I started this topic to probe EW Team attitude towards this bug and I think I got an answer in 2nd post. It reads: there is no problem with us, it's YOU who's wrong (and perhaps CSS!)

    It was not my intention to start discussion about layout techniques, but let me have my vote too. I have been warned about tremendous dangers in position-based strategy. These should be rather directed to those who got acustomed to fixed-width layuot. It happens that from the very beginning (years ago) I favoured flexible-width layout, both as web designer and web user. This strategy is nowadays nicely complemented by max/min-width properties which can guard against extreme user screen/behaviour. So be sure, I am not scared about "too much variation in displays", but I am bewildered when I see it side by side with "Nobody uses liquid layout" statement. Perhaps not the lazy ones who got spoiled with CMS. Liquid layout is not to throw away - on the contrary it has it's chance again.

    Thursday, November 29, 2012 7:12 PM
  • "I started this topic to probe EW Team attitude"

    Basic wrong assumption here:  This is not a forum for MS developers.  This is for EW users.  You are not talking to the EW team.

    Thursday, November 29, 2012 7:28 PM
  • Cheryl said: "Design view is not a browser and it is never intended to be anything more than an approximation of what a site would look like in a real browser. Read the FAQ and the associated link on what Expression Web is intended to be, not a WYSIWYG."

    So many times we have read on this board: "we are not Microsoft", "we do not work for Microsoft", "we can not speak for Microsoft", or "please don't ask us what Microsoft is thinking".  So how is that we know what Design View was "intended to be"? I see nothing in the FAQ about Design View.

    Design view is a pretty pathetic product and it's apologizers like to say "oh but it was never intended to be good". That really doesn't help.

    • Edited by Time Bandit Thursday, November 29, 2012 9:11 PM
    Thursday, November 29, 2012 9:07 PM
  • TB,

    That would be because you did not, as Cheryl said to do, read the first link in the Forum FAQ post.   It clearly says Design View (the design surface) cannot display everything a browser does, and that to see what the page looks like, you should preview in actual browsers.

    The FAQ post itself clearly tells you how to give feedback to the development team  (via Connect), which would include, for example, anything you might expect Design View should be able to do that it doesn't.

    Just what "help", exactly, would you expect EW users to provide?  Perhaps you could provide it.

    Thursday, November 29, 2012 9:19 PM
  • I reported this bug (and another) to Connect.

    In my opinion, this forum is not only for getting immediate help. It may be useful for anyone trying to learn about product quality. Every problem reported here is a signal - think again before getting involved in ....

    Seeing bug report list at Connect is also instructive. 400 bug cases waiting for solution - impressive.

    Thursday, November 29, 2012 9:45 PM
  • I read the first link in the FAQ which was titled "Prerequisites for Using EW". Hardly on the topic of prerequisites but regarding Design View I found this statement:

    "Expression Web does a good job of approximating what your page will look like in any particular browser"

    with which you might agree with but I don't. It might have some implication of intent though even if the actual execution was poor.  

    By way of help to other users I would add that the only thing that I use Design View for is editing tables and specifically for applying changes to entire columns in a table. For that it does great and I'm not aware of any better tool for the purpose of fixing crappy html tables from Office Applications. If you want to drag around absolute-positioned elements to find their "ideal" position then you're already sliding towards disaster.   


    Thursday, November 29, 2012 10:20 PM
  • Dragging something in Design View ... no, I wouldn't even dare!

    To be fair, HTML/CSS logic is the biggest obstacle to visual editing. But this is something to consider when you start developing a software and not when you have 6-years old product. Oh - longer - I forgot FrontPage. Back then, these guys must have been convinced that visual WWW design would be as easy as dragging objects in graphics design software. So the promises started. Now they try to silently withdraw from promises.

    All of the sudden SuperPreview appeared. It is obvious that it was develped by other team, probably out of Microsoft. Otherwise why would anyone bother to make separate exe, spawned from main ExpressionWeb.exe process and without any connection to main program functionality? This is a signal that Design View isn't actively developed any more.

    Thursday, November 29, 2012 11:25 PM