SELFPHP Produktempfehlung
Windows Server 2008	SQL Server 2008	Microsoft Expression

Using the DOM Tree View in SuperPreview and Expression Web
You’ll now continue to use SuperPreview’s DOM tree view to identify the elements creating the Layout problems. You’ll then use this information in Expression Web 3 and locate then fix the problematic CSS rules.

1. In the IE6 view within SuperPreview click the second paragraph (beginning with the line “It’s the float model problem”). In addition to the visual highlighting, you will now have expanded the DOM view and it has identified the selected element with the class named “bodyarea” and more specifically a paragraph with a class named “dofloat”.
   
   
   
   
   Now that you have identified the name of the element and class that is defining the appearance of this paragraph, you’ll go investigate the code in Expression Web 3.
2. Alt-tab back to Expression Web and click the Code view found at the bottom of the window for the default.html page. Scroll to the top if necessary and locate line 7 which is pointing to the external stylesheet. Ctrl+click the underlined value ‘styles.css’ to open this stylesheet in a new tab.
3. Because we identified the name of the problematic element as bodyarea we can do a quick search for it in Expression Web rather than scrolling through the document. Press Ctrl+F to open the Find and Replace window and in the Find What section type bodyarea, then click Find Next. You will be sent immediately to this line in your CSS code and it is highlighted in grey.
   
   
   
   
   
4. Close the Find and Replace window. Now you’ll test whether or not the rule div.bodyarea is truly responsible for the layout problem.
   The easy thing to do would be to delete the rule ‘height:100%’ and see what happens. However, this can be dangerous because it may end up not being the rule responsible for the problem and now you have potentially created another problem if you don’t restore this rule. But are you sure you can remember the exact rule after it’s deleted? A better solution would be to turn off the rule temporarily and then you always have the option to restore it. You can do this using a comment.
5. You can see a comment immediately to the right of the rule ‘height:100%’ it’s the grey text to the right. Any text which is commented in CSS is ignored by the browser; traditionally comments are used as notes for the author or other people working on the project, but can be used to disable rules as well.
   Delete the /* characters before the word trigger and notice that the text becomes activated. Click once before the rule ‘height:100%’ and type /* and now the entire line turns grey again.
   
   
   
   
   
6. Choose File > Save All and then Alt-Tab back to SuperPreview. Press Ctrl+R to refresh the views and then locate the paragraph in IE6. The text is wrapping which indicates success!
   It’s probably clear that debugging browser issues is not particularly fun, but with SuperPreview and Expression Web 3, the process is simplified and precious time can now be spent doing other things for your website.

Downloads

• Prototypen erstellen mit Hilfe von SketchFlow in Expression Blend 3 – Einführung
  http://go.microsoft.com/?linkid=9690582
  
  
• Browsergame mit Hilfe von Behaviors in Expression Blend 3 erstellen
  http://go.microsoft.com/?linkid=9690583
  
  
• Funktionen von SuperPreview in Expression Web 3 – Einführung
  http://go.microsoft.com/?linkid=9690584
  
  
• Silverlight Unterstützung in Expression Web 3
  http://go.microsoft.com/?linkid=9690585

Copyright © 2010 Microsoft Deutschland GmbH Alle Rechte vorbehalten.