10 Replies Latest reply on Apr 17, 2009 11:32 AM by pixlor

    Pop-up menu cellspacing in IE but not Firefox

      I created a website a while back using Dreamweaver and managed to install the header I created in Fireworks CS3 with no problem, however I am redesigning the site and when I place my header in, there appears to be cellspacing in my pop-up menu, but only with Internet Explorer and not with Firefox.  When I went to export the header, since I wasn't using Dreamweaver to write it in, I chose the style as "generic html", and made sure there was no Cell spacing. I'd appreciate any feedback I can get.

        • 2. Re: Pop-up menu cellspacing in IE but not Firefox
          pixlor Level 4

          Do you have a link to the site or can you post the code?


          If you can do that, also note what you changed.

          • 4. Re: Pop-up menu cellspacing in IE but not Firefox
            Nadia-P Level 5

            You may not like what I have to say, but I'd strongly advice against using these menus:




            and this:  http://apptools.com/rants/menus.php



            Also, you shouldn't let a graphics program write your html for you.  It's always better to export all your images and then implement them into the design.

            This type of page is very fragile and breaks very easily I'm afraid.

            • 5. Re: Pop-up menu cellspacing in IE but not Firefox
              pixlor Level 4

              ZMystico wrote:


              Thank you

              Well, I'll give it a look, anyway, if you can post links to your stuff. (What about a couple of temporary pages: before and after?) Maybe there's something simple we can do to get you going again. Also, what version of IE were you using that you noticed the spacing?


              I do agree with Nadia, however. The FW menus are pain points for many people and there are better options.

              • 6. Re: Pop-up menu cellspacing in IE but not Firefox
                Level 1

                http://zmbclouisville.net84.net/ <--- link to my "test site", the pop-up's are for "news, church staff, and services"


                http://zmbclouisville.net84.net/images/headermenu.html <--- link to my "headermenu"


                http://zmbclouisville.net84.net/images/headermenu.css <--- link to stylesheet fireworks created for my header menu


                I am using Fireworks 3.1b3 & Internet Explorer 7.0.6001.18000


                My page layouts is basically 2  <div>'s, one for the  header "Wrapper" and one for the body "panel"


                you can IM me on yahoo messenger at "anthony_mross"


                Thank you all for your feedback thus far, I'm still learning Html & CSS.

                • 7. Re: Pop-up menu cellspacing in IE but not Firefox
                  pixlor Level 4

                  Hi again!


                  I copied your files locally and I'll dig into them later. I see what you mean, though. The header by itself is fine in IE 7, but once inserted into the page the spacing goes wonky. This makes me think there is a conflicting CSS declaration somewhere: that a later declaration adds the space and overrides what is in the header by itself. (That's the C - Cascade - in CSS, what comes later in the load order, or is more specific takes precedence.)


                  Going forward, one thing you want to do is make sure you give meaningful names to all your slices. Double-click on "Slice" in the Web layer and type in something else. Then, when you export your images (and HTML) you'll have the benefits of knowing which image is which in your folders and be better able to see what's what in your code.


                  Back later!

                  • 8. Re: Pop-up menu cellspacing in IE but not Firefox
                    pixlor Level 4

                    Well, you have a number of errors that you'll need to address.


                    • You have two body tags, and you can only have one. This may be the problem.
                    • You have a <script language="JavaScript"> declaration and it should be <script type="text/javascript">
                    • You have <center> tags inside <a href...></a> elements and that is not correct.
                    • You have a <valign="top"> tag, and that is an attibute, not a tag.
                    • Where you have <h1 style="font-family:Times New Roman; color:#6F0101; font-size:26;"> won't work, because font names that have spaces in them must be enclosed in quotation marks. You would be better off defining a class for your h1s.


                    There's a nifty add-on for Firefox that really helps to show you some things in your code. It's called Firebug. Search for it with Google and it's easy to install. I also have the HTML Tidy add-on. HTML Tidy shows me warnings and errors. Firebug shows the structure of the code and also the inheritance of the CSS. In this case, I think you may be inheriting some padding or margin from your default.css once you insert your header into the body.


                    Here's what I recommend you do:

                    1) Fix up your Fireworks file to name all your images. For example, the images in your menu that have "Home" written in them should be home.gif and home-ov.gif, (or similar, with "ov" indicating "over") not headermenu_r2_c1.gif and headermenu_r2_c1_f2.gif. Likewise, in the code it should have a name of "home." It will make your code so much easier to read and maintain.


                    2) Install the HTML Tidy and Firebug add-ons to Firefox. Or, you can use the W3C code validator. Fix the errors in your code.


                    3) Clean up your CSS and put all your CSS in one file. Rename those awful Fireworks names to something more memorable. Make sure you know exactly what is what and where everything is. That way, you'll see where attributes might be being inherited.


                    If you want a good book for HTML and CSS, I like Elizabeth Castro's HTML for the World Wide Web. It's in the 6th edition, now. I recently picked up HTML Utopia: Designing Without Tables Using CSS and I find that it is a nice lead-in to designing layouts with CSS.


                    All that said, Nadia is right and the Fireworks menus are not so great. They aren't really very robust and (as you've experienced) they're difficult to maintain and troubleshoot. Here are two sites that have professional menu plug-ins for Dreamweaver (not Fireworks):

                    Pluginlab Limited
                    Project Seven
                    The Project Seven menus are regularly recommended, but I have no personal experience with either of them. Either one will give you a better experience with less frustration. While they are not free, they'll save you quite a bit of time.


                    Good luck!

                    • 9. Re: Pop-up menu cellspacing in IE but not Firefox
                      Level 1

                      Thanks, like I said, I'm still learning, I started creating the website using Dreamweaver cause I was a novice and it's "drag and drop" option made things seems easier.  Then I wanted to spruce the site up some and had someone introduce me to CSS, so I started using that and I think I'm getting a good grasp of it, but looking back I see mistakes I've been making. Thanks again for all your help.

                      • 10. Re: Pop-up menu cellspacing in IE but not Firefox
                        pixlor Level 4

                        There's always something new to learn!


                        I'm dragging myself (/trying to drag myself), kicking and screaming, into pure CSS layout. I'm also learning jQuery, which is a JavaScript libary, and it's turning out to be a whole lot of fun (jQuery for Absolute Beginners Video Series).


                        Again, good luck!