12 Replies Latest reply on Dec 17, 2009 10:09 AM by pixlor

    1 pixel off

    LArtJunky Level 1

      When creating a set of boxes with a top, middle (repeat bacground) and bottom graphic, the top and the bottom are 1 pixel larger than the background in the css. It's easy enough to chang css after it's output but I'd like to know why it does this ands is there a fix?

        • 1. Re: 1 pixel off
          LArtJunky Level 1

          Anyone? Perhaps I need to be more clear.


          I'm creating a rounded corner box with text in the middle section. I've sliced the box up into 3 web slices with the middle section being a narrow graphic that I've selected as the background image.


          When I export all of this, it saves the html, the css and the graphics. This all works great except it's off by 1 pixel in the middle; it's too narrow. This is also where the background is applied.


          By pushing this area out 1 pixel, it looks fine and I don't have a big problem fixing this. After all, using this is a huge time saver so having to make one minor change to the css is nothing... I'd just like to know if there is something I am doing wrong on the design side of it? Is there a hack?


          Hope this makes my question a little clearer.



          • 2. Re: 1 pixel off
            LArtJunky Level 1

            Here's the sample graphic. On the left is the value that I change from 229 to 230px.

            • 3. Re: 1 pixel off
              LArtJunky Level 1

              Does anyone know the answer to this or is this forum so void of users?

              • 4. Re: 1 pixel off
                pixlor Level 4

                Maybe post your Fireworks document?


                What version of FW are you using? and on what OS? If you're using CS4, have you applied the most recent patch?

                • 5. Re: 1 pixel off
                  LArtJunky Level 1

                  I'm running CS4 - Fireworks ver and it doesn't appear that there are any m ore updates for it. Windows


                  I've attached the file

                  • 6. Re: 1 pixel off
                    LArtJunky Level 1

                    file C:\Program Files (x86)\Adobe\Adobe Fireworks CS4\Configuration\HTML Code\CSSLayers.htt,
                    line 1401, error: test for equality (==) mistyped as assignment (=)?
                    Assuming equality test


                    I also noticed when I preview this and hit export, it gives me the error above.


                    I don't get a javascript error when I just export to css/images

                    • 7. Re: 1 pixel off
                      LArtJunky Level 1

                      Also, when watching the tv.adobe.com video:



                      It does the same thing. He had to go back into the code to fix it. So, perhaps it's a common thing?

                      • 8. Re: 1 pixel off
                        pixlor Level 4

                        Well, if the Adobe TV tutorial shows the same problem and you get an error, then it sounds like there's probably a bug in the code.


                        I build my HTML and CSS in Dreamweaver, not from Fireworks, so I've never used Fireworks' exported code. (Also, I stuck with CS3, so don't have the feature you're using; it was new with CS4.) Anyway, Fireworks's code is intended for mockups, it isn't intended to be used for live sites. Whatever you get from Fireworks you should check and re-work to produce a robust end-product.

                        1 person found this helpful
                        • 9. Re: 1 pixel off
                          LArtJunky Level 1

                          Anyone else use CS4 Fireworks?


                          Thanks Pixlor,


                          Since I'm so new to Fireworks, I was thinking there might be a work-around or an update. A lot of those videos were done for the beta realease of CS4 so they can be outdated.


                          As far as doing CSS and such, I normally work the same way but started looking at Fireworks after watching the Videos online. It actually produces pretty good css/html and from what I've seen so far, it's really slick; it has the potential to save me a lot of time when setting up rounded corner boxes and other design features. When I'm doing design work and I need a quick set of boxes for a site, I needed a technique that allowed me to focus on the design rather than spending so much time tweaking css.


                          You may want to look at the extension on the Adobe Exchange site. From what I've heard, it does the same thing. Since I use CS4, exporting is built in.


                          I'd recommend upgrading to CS4. I keep finding helpful improvements to it.

                          • 10. Re: 1 pixel off
                            pixlor Level 4

                            Well...I'm happy with CS3 for now. The major change in CS4 was to replace the Macromedia text engine with the Photoshop text engine, to start bringing FW and PS into greater compatibility. Unfortunately, that caused a number of problems. Most of them were fixed with the update, but there are still fonts that PS can use and FW cannot. If such a font is installed, FW won't run. (And if it's the same text engine...why?!?) I tend to use FW very basically and - for me - the new features weren't worth the upgrade price.


                            I don't like to let programs think for me. I understand the appeal, but I want to understand what I'm doing. Plus, they never think the way *I* do, so when I want to tweak something, it never makes sense to me!  I'm also not a fan of rounded corners (other than on buttons, maybe). I'm just not a fan of floating boxes in general. I tend to prefer cleaner designs, although not not necessarily spare...


                            So...sorry I couldn't help you!

                            • 11. Re: 1 pixel off
                              LArtJunky Level 1

                              pixlor wrote:


                              but I want to understand what I'm doing.

                              I'm sure you understand your code  but if you look at the CSS that Fireworks puts out, there's really not much to be mess it up. You create your design, slice up a few items, specify some text and bam, you got a design that works. I don't really see a problem with that. Now, it's conceivable that you will want to make things more efficient. For example, if I had three boxes floating side by side, I'd want to use the same top, background and bottom image for all three instead of using three different graphics for each of them. However, the CSS is clean and within a few minutes, I can design and output everything I need. I think that's a pretty handy tool to have.


                              I'm a one man shop running a site with 5000 products. Most Programmers/Designers get sales asking: "can you do this like how Amazon.com does it?" I "love" that question... Needless to say I have a divide my time between programming, database design, graphic design and web design. When the sales department comes down asking for special sale with graphics, my first thought is how can I program this special sale. By the time I'm done doing the programming, I have very little time to spend on the graphics; if they want a box and you need to get something up quickly, I compromise because I want something that looks good without spending a lot of time tweaking things. I think Fireworks is worth a look here.

                              • 12. Re: 1 pixel off
                                pixlor Level 4

                                The Fireworks code may work, but it isn't semantic. I've been on this board long enough to have looked at others' autogenerated code. It is devoid of meaning, and that is not Good Code. I've coded long enough (programming, not just HTML) to know how how important good variable names are for debugging and maintenance. But, if it works for you, then it works for you. (It doesn't work for everybody, though: http://forums.adobe.com/thread/538062?tstart=0)


                                I am absolutely with you on using Fireworks for Web graphics. It's fast and flexible. I use FW for all kinds of things, because it's so versatile. There are times I need a feature that is unwieldy or absent in FW. For example, if I want a more complex shape, or I'm using a font that has alternate glyphs that I want to use, I'll use Illustrator. What little photo editing I do, I'll do in PS.


                                It's only that, for my use, the cost and risk weighed more heavily than the benefit for the CS3 to CS4 upgrade. I'm a casual freelancer and most of my work is pro bono. The upgrade would have had to have improved my efficiency tremendously or had extremely compelling new features. From what I saw, the bugs would have hampered me and I wouldn't have made much use of the new features. So...maybe CS5.