Skip navigation
Currently Being Moderated

Out of alignment web content created in FW CS6

Jan 8, 2013 10:31 PM

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

 
Replies
  • Currently Being Moderated
    Jan 9, 2013 3:25 PM   in reply to Eadig

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 9, 2013 7:50 PM   in reply to Eadig

    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

     
    |
    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