3 Replies Latest reply on Jan 9, 2013 7:50 PM by groove25

    Out of alignment web content created in FW CS6

    Eadig Level 1

      Hello everyone

       

      I have designed an entire web page in Fireworks CS6, sliced up individual components of the page and exported them as HTML and image. The page displays in Chrome and Firefox beautifully but not in IE9. In IE9, some web content appears out of alingment exposing light blue spacers as below:

       

      misaligned webcontent.JPG

      Here is a copy of the sourcecode. I am also wondering how you could export a file in HTML5 because it always deafults to XHTML1.0. Any advice would be appreciated.

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      <!-- saved from url=(0014)about:internet -->

      <html xmlns="http://www.w3.org/1999/xhtml">

      <head>

      <title></title>

      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

      <!--Fireworks CS6 Dreamweaver CS6 target.  Created Wed Jan 09 10:39:47 GMT+0900 2013-->

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

      </head>

      <body bgcolor="#99ccff">

      <table width="800" border="0" cellpadding="0" cellspacing="0" bgcolor="#99ccff" style="display: inline-table;" >

      <!-- fwtable fwsrc="euronet.jp.fw.png" fwpage="Home" fwbase="index.jpg" fwstyle="Dreamweaver" fwdocid = "1679326314" fwnested="0" -->

        <tr>

         <td><img src="images/index/spacer.gif" width="50" height="1" alt=""></td>

         <td><img src="images/index/spacer.gif" width="99" height="1" alt=""></td>

         <td><img src="images/index/spacer.gif" width="100" height="1" alt=""></td>

         <td><img src="images/index/spacer.gif" width="34" height="1" alt=""></td>

         <td><img src="images/index/spacer.gif" width="2" height="1" alt=""></td>

         <td><img src="images/index/spacer.gif" width="31" height="1" alt=""></td>

         <td><img src="images/index/spacer.gif" width="32" height="1" alt=""></td>

         <td><img src="images/index/spacer.gif" width="101" height="1" alt=""></td>

         <td><img src="images/index/spacer.gif" width="68" height="1" alt=""></td>

         <td><img src="images/index/spacer.gif" width="1" height="1" alt=""></td>

         <td><img src="images/index/spacer.gif" width="31" height="1" alt=""></td>

         <td><img src="images/index/spacer.gif" width="71" height="1" alt=""></td>

         <td><img src="images/index/spacer.gif" width="29" height="1" alt=""></td>

         <td><img src="images/index/spacer.gif" width="97" height="1" alt=""></td>

         <td><img src="images/index/spacer.gif" width="3" height="1" alt=""></td>

         <td><img src="images/index/spacer.gif" width="1" height="1" alt=""></td>

         <td><img src="images/index/spacer.gif" width="1" height="1" alt=""></td>

         <td><img src="images/index/spacer.gif" width="49" height="1" alt=""></td>

         <td><img src="images/index/spacer.gif" width="1" height="1" alt=""></td>

        </tr>

       

       

        <tr>

         <td colspan="18"><img name="body" src="images/index/body.jpg" width="800" height="15" alt=""></td>

         <td><img src="images/index/spacer.gif" width="1" height="15" alt=""></td>

        </tr>

        <tr>

         <td rowspan="12"><img name="index_r2_c1" src="images/index/index_r2_c1.jpg" width="50" height="1040" alt=""></td>

         <td rowspan="3" colspan="5"><img name="index_r2_c2" src="images/index/index_r2_c2.jpg" width="266" height="146" alt=""></td>

         <td colspan="12"><img name="index_r2_c7" src="images/index/index_r2_c7.jpg" width="484" height="5" alt=""></td>

         <td><img src="images/index/spacer.gif" width="1" height="5" alt=""></td>

        </tr>

        <tr>

         <td rowspan="3" colspan="6"><img name="index_r3_c7" src="images/index/index_r3_c7.jpg" width="304" height="149" alt=""></td>

         <td colspan="2"><img name="index_r3_c13" src="images/index/index_r3_c13.jpg" width="126" height="17" alt=""></td>

         <td rowspan="3" colspan="4"><img name="index_r3_c15" src="images/index/index_r3_c15.jpg" width="54" height="149" alt=""></td>

         <td><img src="images/index/spacer.gif" width="1" height="17" alt=""></td>

        </tr>

        <tr>

         <td rowspan="2" colspan="2"><img name="index_r4_c13" src="images/index/index_r4_c13.jpg" width="126" height="132" alt=""></td>

         <td><img src="images/index/spacer.gif" width="1" height="124" alt=""></td>

        </tr>

        <tr>

         <td colspan="5"><img name="index_r5_c2" src="images/index/index_r5_c2.jpg" width="266" height="8" alt=""></td>

         <td><img src="images/index/spacer.gif" width="1" height="8" alt=""></td>

        </tr>

        <tr>

         <td><a href="index.html" alt="Home"><img name="homebutton" src="images/index/home-button.jpg" width="99" height="29" alt="link to Home"></a></td>

         <td><a href="profile.html" alt="Who We Are"><img name="index_r6_c3" src="images/index/index_r6_c3.jpg" width="100" height="29" alt="link to Who We Are"></a></td>

         <td colspan="4"><a href="vision.html" "Our Vision"><img name="index_r6_c4" src="images/index/index_r6_c4.jpg" width="99" height="29" alt="link to Our Vision"></a></td>

         <td><a href="services.html" alt="link to Our Vision"><img name="index_r6_c8" src="images/index/index_r6_c8.jpg" width="101" height="29" alt="Our Services"></a></td>

         <td colspan="3"><a href="faq.html" alt="FAQ"><img name="index_r6_c9" src="images/index/index_r6_c9.jpg" width="100" height="29" alt="link to FAQ"></a></td>

         <td colspan="2"><a href="contact.html" alt="Contact Us"><img name="index_r6_c12" src="images/index/index_r6_c12.jpg" width="100" height="29" alt="link to contact us"></a></td>

         <td colspan="2"><a href="quote.html"><img name="index_r6_c14" src="images/index/index_r6_c14.jpg" width="100" height="29" alt="link to Get a Quote"></td>

         <td rowspan="4" colspan="3"><img name="index_r6_c16" src="images/index/index_r6_c16.jpg" width="51" height="374" alt=""></td>

         <td><img src="images/index/spacer.gif" width="1" height="29" alt=""></td>

        </tr>

        <tr>

         <td colspan="14"><img name="index_r7_c2" src="images/index/index_r7_c2.jpg" width="699" height="8" alt=""></td>

         <td><img src="images/index/spacer.gif" width="1" height="8" alt=""></td>

        </tr>

        <tr>

         <td colspan="10"><img name="index_r8_c2" src="images/index/index_r8_c2.jpg" width="499" height="321" alt=""></td>

         <td colspan="4"><img name="index_r8_c12" src="images/index/index_r8_c12.jpg" width="200" height="321" alt=""></td>

         <td><img src="images/index/spacer.gif" width="1" height="321" alt=""></td>

        </tr>

        <tr>

         <td colspan="14"><img name="index_r9_c2" src="images/index/index_r9_c2.jpg" width="699" height="16" alt=""></td>

         <td><img src="images/index/spacer.gif" width="1" height="16" alt=""></td>

        </tr>

        <tr>

         <td colspan="3"><img name="index_r10_c2" src="images/index/index_r10_c2.jpg" width="233" height="249" alt=""></td>

         <td colspan="5"><img name="index_r10_c5" src="images/index/index_r10_c5.jpg" width="234" height="249" alt=""></td>

         <td rowspan="4"><img name="index_r10_c10" src="images/index/index_r10_c10.jpg" width="1" height="512" alt=""></td>

         <td colspan="6"><img name="index_r10_c11" src="images/index/index_r10_c11.jpg" width="232" height="249" alt=""></td>

         <td rowspan="2" colspan="2"><img name="index_r10_c17" src="images/index/index_r10_c17.jpg" width="50" height="250" alt=""></td>

         <td><img src="images/index/spacer.gif" width="1" height="249" alt=""></td>

        </tr>

        <tr>

         <td colspan="8"><img name="index_r11_c2" src="images/index/index_r11_c2.jpg" width="467" height="1" alt=""></td>

         <td colspan="6"><img name="index_r11_c11" src="images/index/index_r11_c11.jpg" width="232" height="1" alt=""></td>

         <td><img src="images/index/spacer.gif" width="1" height="1" alt=""></td>

        </tr>

        <tr>

         <td colspan="3"><img name="index_r12_c2" src="images/index/index_r12_c2.jpg" width="233" height="249" alt=""></td>

         <td rowspan="2"><img name="index_r12_c5" src="images/index/index_r12_c5.jpg" width="2" height="262" alt=""></td>

         <td colspan="4"><img name="index_r12_c6" src="images/index/index_r12_c6.jpg" width="232" height="249" alt=""></td>misaligned webcontent.JPG

         <td colspan="7"><img name="index_r12_c11" src="images/index/index_r12_c11.jpg" width="233" height="249" alt=""></td>

         <td rowspan="2"><img name="index_r12_c18" src="images/index/index_r12_c18.jpg" width="49" height="262" alt=""></td>

         <td><img src="images/index/spacer.gif" width="1" height="249" alt=""></td>

        </tr>

        <tr>

         <td colspan="3"><img name="index_r13_c2" src="images/index/index_r13_c2.jpg" width="233" height="13" alt=""></td>

         <td colspan="4"><img name="index_r13_c6" src="images/index/index_r13_c6.jpg" width="232" height="13" alt=""></td>

         <td colspan="7"><img name="index_r13_c11" src="images/index/index_r13_c11.jpg" width="233" height="13" alt=""></td>

         <td><img src="images/index/spacer.gif" width="1" height="13" alt=""></td>

        </tr>

        <tr>

         <td colspan="18"><img name="index_r14_c1" src="images/index/index_r14_c1.jpg" width="800" height="145" alt=""></td>

         <td><img src="images/index/spacer.gif" width="1" height="145" alt=""></td>

        </tr>

      </table>

       

       

      </body>

      </html>

       

       

       

      Thank you,

       

      Ead

        • 1. Re: Out of alignment web content created in FW CS6
          groove25 Level 4

          Welcome to the world of front-end web development! When you create (or generate) HTML and CSS, you're creating instructions for a design, not the design itself. It's up to the browser to interpret the instructions and complete the process. Unfortunately, browsers routinely interpret things slightly differently; this is par for the course. Rather than fill your discussion with a mass of code, it would be preferable to post the HTML file to a server and provide a link/URL in your discussion. That way, the page could be experienced and understood as a page or layout first. It's easy enough to view the code beneath the page within a browser using ‘View Source’ or a similar command. That said, it can be challenging to suss out what's gone wrong.

           

          Within Fireworks, I'd suggest going to File > HTML Setup… and trying some different settings. In particular, under HTML Style, I'd try the Generic style of XHTML or HTML instead of the Dreamweaver style, and see if the results are any better. No guarantees, just an idea.

          1 person found this helpful
          • 2. Re: Out of alignment web content created in FW CS6
            Eadig Level 1

            Thanks for the reply and sorry about laying out the lengthy sourcode - will make make sure to paste in URLs from next time.

             

            I have found out that IE creates a 1px border around a link object by default, so I disabled this setting by inserting the property below into the CSS file:

             

            a, img {

                border:none;

            }

             

            Problem solved and everything is correctly aligned now, but settiing HTML Style to Generic HTML in Fw CS6 did not change the doctype to HTML5, so further suggestion from anyone would be appreciated.

            • 3. Re: Out of alignment web content created in FW CS6
              groove25 Level 4

              Excellent. The use of ‘border: none’ in the CSS is a good solution and has been recommended previously in this forum.

               

              As far as HTML5, it isn't natively supported in Fireworks CS6. You could easily replace the DOCTYPE or other metadata within the head of the document by hand, after exporting the HTML; on the other hand, I'm not sure the body of the document really merits it—it's pretty ‘old school’ and possibly contains deprecated features.

               

              This reminds of a thread where a user wanted to edit the HTML Export template:

               

              http://forums.adobe.com/message/4733175

               

              I don't know if they followed through with this or not. It'd be fun to experiment with, but not without backing up all the relevant application files first.

               

              It might instructive for you to try building Fireworks files to be exported as HTML and CSS (choosing ‘CSS and Images’ in the Export dialog), instead of using table-based layouts. This seems possibly more significant than the use of an HTML5 doctype.

               

              http://www.adobe.com/devnet/fireworks/articles/export_css_images.html