Grow your CSS skills. Land your dream job.

Drop down menu off to the right in IE7, colors off in Safari

  • # June 25, 2009 at 11:40 am

    Hey guys,
    Two questions about drop-down menus.

    First: Drop down menu slightly off to the right:
    link: http://www.erindevers.net/uuccpf/index.html

    I used the Spry Horizontal Menu function in Dreamweaver to help me with getting a drop-down menu to work in IE (I’m pretty new to CSS, still learning a bunch – I code in Coda whenever possible, but sometimes still need a bit of help :) ). But, it STILL doesn’t work properly. Everything looks fine in Firefox, Opera and Safari, but in IE7, the drop downs come down slightly to the right.

    I would copy/paste code, but I worry I would do too much/too little. Like I said, I’m still learning!

    Any ideas on why this is happening, or any tips involving cross-compatibility with drop down menus in general, would be fantastic. It’s been such a pain!

    Second: Colors off in Safari
    The red of the drop-down menu doesn’t perfectly match the red of the red "all are welcome here" box, and I can’t figure out why. Any ideas?

    Thanks in advance, guys!

    # June 25, 2009 at 3:23 pm

    Erin,

    Not sure i can help you with the first issue. I was going to say check to see if you had set margin to the same side as you floated your li elements, as IE doubles margin applied in that manner. However, you have no margin set, so i have no clue on that one! The issue could also be caused by the Spry js itself. Really, I don’ t know.

    As for your second issue, PNG images such as your welcome bg image ALWAYS seem to appear lighter than their corresponding hex value applied using CSS. Here’s a web page that may help you:

    http://freaksgfx.blogspot.com/2007/10/p … y-fix.html

    I came across this issue for myself long ago… it’s one of the quirk/challenges of being a web designer that requires patience, a willingness to learn, and thinking outside of the box!

    # June 25, 2009 at 3:42 pm

    Thank you! Awesome. That article helped a ton. I played around with the color profiles and got it to match up, and it works in Safari now. I appreciate the attempt at the drop-down menu issue, too…I’m completely lost on it.

    # June 25, 2009 at 4:31 pm

    Go google and download a program called "Tweak PNG" – has saved me loads of headaches when it comes to using PNGs in my designs.

    You can just drag PNG files into it and there is a GAMA value that you can delete, and re-save the file. The colors will now match up like it was a JPG.

    As for the first issue – what happens when you start messing with the padding? It’s the only thing I can think of looking at the CSS that IE may be having a hard time figuring out how to render. Other than that I’m at a loss :P

    # June 25, 2009 at 5:02 pm

    Ah, and now the menu is showing up behind the text I placed. Wonderful!

    Playing with the z-index and positioning with that now, but if anyone has any suggestions on either that or the off-center issue…

    I really appreciate the help!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".