Expression > Forums - Accueil > Expression Web and SuperPreview > Design tab rendering is all over the place
Poser une questionPoser une question
 

QuestionDesign tab rendering is all over the place

  • mercredi 4 novembre 2009 00:47Kevin12853 Médailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateur
     
    Hi
    I have just started using the trial version of EW3. I have created a simple page layout using Divs. The page contains a header; top nav; left nav and page content. The page is fine in a browser (IE8) but in the design tab of EW the content is on left of the screen and the header and nav panes are on the right. Is this some bug or am I losing the plot here?
    The web page at www.t-investments.co.uk shows what it should look like. I have put a picture of what it looks like in EW at  www.t-investments.co.uk/pic1.png and the css file is at www.t-investments.co.uk/main.txt

    Any help would be greatly appreciated.

    Incidentally the page doesn't look right in DW CS4 either, The content is some distance vertically down the page but correctly positioned horizontally.

    XP SP3, EW3; IE8

    Many Thanks

    Kev T

Toutes les réponses

  • mercredi 4 novembre 2009 02:31KathyW2 Médailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateur
     
    Look at your site in IE7 (or IE7 compatibility mode in IE8).  It looks like your Design View.

    This is a case where SuperPreview can help you see where things are being intepreted differently between the two browsers.  Since I assume you want to support IE7, you'll need to make a change.

    Then, and of secondary importance, Design View isn't any particular browser, and doesn't always match a browser view.  If you think the view is very different from it should display, you can put a bug report in on the Connect site.
  • mercredi 4 novembre 2009 03:29Bill Pearson Médailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateur
     
    One thing that would help is if you put everything in an outer wrapper DIV--a DIV that contained/restrained all the other DIVs.

    Right now, your 155px left margin on the page div is referencing the left side of the viewport instead of the div it should be floated next to. If it were working properly (constrained in a wrapper with all the others), that 155px wouldn't be needed; the div would nestle right up next to the left nav, as you want it to.

    Open an EW website template and see how those are laid out, look at the CSS sheet, etc.
  • mercredi 4 novembre 2009 03:48KathyW2 Médailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateur
     
    Adding:

    While I don't think this is the best way to lay out a page, just addressing one issue with the way you've done it and explaining the IE7 view:

    You have #left_nav with position fixed, but no indication of left placement.  IE7 assumes it's to the right of the floated left #page.  Simply adding left:0px will move it over to the correct side.  Ditto for #topcontainer, and it also has no indication of a top setting.  Put both left and top to 0px.
  • mercredi 4 novembre 2009 23:49Kevin12853 Médailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateur
     
    Thanks everyone. I think we're sorted now.
    Incidentally I dont get a compatability button with file based web pages, is that correct?
  • jeudi 5 novembre 2009 02:21Cheryl D WiseMVPMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateur
     

    I get one with local preview but I have EW set to use the preview server for all web pages not just asp.net and php pages. Site > Site Settings > Publishing tab.


    MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes