Skip navigation
nathanlukewong
Currently Being Moderated

Website template created in PS not displaying correctly in Internet Explorer. Any ideas?

Dec 31, 2012 3:27 AM

Tags: #photoshop #website #html #template #dreamweaver

Hi there

I was wondering if anyone could help me with creating templates in photoshop.

 

I have cut up my site, centred the table it produces in Dreamweaver and added a background and made the banners rotate but the site does not load correctly in Internet Explorer (even before I did all this stuff). The cells are not correctly aligned.

 

I have also tired validating the code but it says it is not valid HTML.

 

Has anyone else had this problem?

 

My website can be viewed at: https://dl.dropbox.com/u/4966582/intranet/index.html

 

Thanks in advance

 
Replies
  • Currently Being Moderated
    Dec 31, 2012 11:35 AM   in reply to nathanlukewong

    Hi there! This question is probably better suited for the Dreaweaver General forum, so I've moved it there for you. If you have any further questions relating specifically to Photoshop, please don't hesitate to post again in the Photoshop Beginners forum.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 31, 2012 11:43 AM   in reply to Kendall Plant

    Photoshop is great for creating images and it's decent for making a mock-up of a page for client review, but I would recommend staying away from attempting to get PS to build your site template. The html it produces is, as you've found out, not very good and will cause many, many issues as you try to change content from page to page in any kind of template structure.

     

    It's much better to create your imagry in PS, then use DW to create the html for your template.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 31, 2012 11:49 AM   in reply to nathanlukewong

    Photoshop is for images only.  Don't attempt to use the exported code on real web sites.  It won't work in the wild.  Why?  Because the code isn't good & the tables are too rigid to hold anything other than the image slices.  When you attempt to edit this layout in DW or any HTML editor, the whole thing falls apart and produces unsightly gaps between slices. 

     

    The reason it doesn't look right in IE is because the code lacks a valid document type declaration on the first line.  This causes IE to render the page in Quirks Mode.

     

    The export HTML feature in Photoshop is really only for quick comps to show a client before you begin building the actual web site with HTML and CSS code.

     

    Although written for Fireworks, the 3-part tutorial below describes the procedure for bringing your design comp into a CSS Layout in DW.  If you get stuck on anything, feel free to post specific questions in the DW general discussion forum.

     

    Part 1 - Initial Design

    http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html

     

    Part 2 - Markup preparation

    http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt2.html

     

    Part 3 - Layout and CSS

    http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt3.html

     

    Have fun!

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points