[css-d] Horizontal navigation menu problem in Firefox
I've got a problem with a css horizontal navigation menu. Although I'm still quite new to css I've spent many hours getting this dropdown menu to work. It's now great in IE but... it looks awful in Firefox - the alignment is all wrong like there's too much padding to the left. I've tried everything I can think of but can't get it fixed. I copied code from a few sites to get it to work in the first place so maybe there's some incompatibility there. I'd be very grateful for any suggestions. You can see the navigation menu here: http://www.aberdeenhq.com/csstest and the css is here http://www.aberdeenhq.com/csstest/css/dropdown2.css Thanks in advance for any suggestions. Anne __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horizontal navigation menu problem in Firefox
I've got a problem with a css horizontal navigation menu. Although I'm still quite new to css I've spent many hours getting this dropdown menu to work. It's now great in IE but... it looks awful in Firefox - the alignment is all wrong like there's too much padding to the left. I've tried everything I can think of but can't get it fixed. I copied code from a few sites to get it to work in the first place so maybe there's some incompatibility there. I'd be very grateful for any suggestions. You can see the navigation menu here: http://www.aberdeenhq.com/csstest and the css is here http://www.aberdeenhq.com/csstest/css/dropdown2.css Thanks in advance for any suggestions. Hi Anne First thing that strikes me is that you have padding and/or margin in your menuh divs along with 100% widths. The math doesn't add up. For good drop downs I would visit Stu Nicholl's site at: http://www.cssplay.co.uk/menus/drop_examples.html or Tedd's at: http://sperling.com/examples/menuh/ Follow these closely and you cannot go far wrong. Design so that they work in Firefox first then check with IE 6 etc Regards Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.430 / Virus Database: 268.14.12/545 - Release Date: 21/11/2006 22:36 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horizontal navigation menu problem in Firefox
I've redone my navigation menu, based on the Sperling example as suggested (thanks Ian). It's much better now but I still have some problems. The main problem is that I have many navigation items to fit in, and, using the Sperling style, they are currently all the same width, which is wasted on navigation items which are short, eg 'the process' 'your move' and 'general' whereas 'temporary accommodation', 'communications' and 'entertainment' need an extra pixel or two to give enough width. Is there an easy way to change the width of these items so that some are short and some are longer? I've put over my latest attempt at http://www.aberdeenhq.com/csstest2/ and the css is at http://www.aberdeenhq.com/csstest2/css/dropdown4.css In IE you'll notice that the final element in the navigation menu 'general' wraps to below the 'education' button, so I'll need to fix that too. Thanks again for any help or suggestions. Anne - Original Message - From: Ian Young [EMAIL PROTECTED] To: Anne Davies [EMAIL PROTECTED]; css-d@lists.css-discuss.org Sent: Wednesday, November 22, 2006 10:17 AM Subject: Re: [css-d] Horizontal navigation menu problem in Firefox I've got a problem with a css horizontal navigation menu. Although I'm still quite new to css I've spent many hours getting this dropdown menu to work. It's now great in IE but... it looks awful in Firefox - the alignment is all wrong like there's too much padding to the left. I've tried everything I can think of but can't get it fixed. I copied code from a few sites to get it to work in the first place so maybe there's some incompatibility there. I'd be very grateful for any suggestions. You can see the navigation menu here: http://www.aberdeenhq.com/csstest and the css is here http://www.aberdeenhq.com/csstest/css/dropdown2.css Thanks in advance for any suggestions. Hi Anne First thing that strikes me is that you have padding and/or margin in your menuh divs along with 100% widths. The math doesn't add up. For good drop downs I would visit Stu Nicholl's site at: http://www.cssplay.co.uk/menus/drop_examples.html or Tedd's at: http://sperling.com/examples/menuh/ Follow these closely and you cannot go far wrong. Design so that they work in Firefox first then check with IE 6 etc Regards Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.430 / Virus Database: 268.14.12/545 - Release Date: 21/11/2006 22:36 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ Email has been scanned by www.aberdeen-internet.com for viruses and spam __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Horizontal navigation menu
From: Vicki Stebbins (Skinner) The drop down navigation menu at http://www.rosellaorchids.com.au/about.php is quirky! CSS is at http://www.rosellaorchids.com.au/styles/rosella.css I want the home link to be in line with the other links when showing in a 800px browser... to do this I shortened the width of the #nav a to 6em and it works in IE but then FF shows the word 'catalogues' with the 's' cut off... I put it back to 8em and still the 's' is cut off and in IE the 'home' link shows underneath. Tried using About us Contact Gallery etc instead of all caps? You are so close that it will only need a nudge to get it to fit. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Horizontal navigation menu
At 11:25 AM 25/08/2005, Peter Williams wrote: From: Vicki Stebbins (Skinner) The drop down navigation menu at http://www.rosellaorchids.com.au/about.php is quirky! CSS is at http://www.rosellaorchids.com.au/styles/rosella.css I want the home link to be in line with the other links when showing in a 800px browser... to do this I shortened the width of the #nav a to 6em and it works in IE but then FF shows the word 'catalogues' with the 's' cut off... I put it back to 8em and still the 's' is cut off and in IE the 'home' link shows underneath. Tried using About us Contact Gallery etc instead of all caps? You are so close that it will only need a nudge to get it to fit. -- Peter Williams Hi Peter, Just tried it (on our webserver) and nope, didn't work... Thanks Vicki __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horizontal navigation menu
From: Vicki Stebbins (Skinner) [EMAIL PROTECTED] The drop down navigation menu at http://www.rosellaorchids.com.au/about.php is quirky! CSS is at http://www.rosellaorchids.com.au/styles/rosella.css Since your a is set to a width of 8em and also has 4px padding, you cannot set the LI to 8em (which is what you have done). You might want to change the padding method on the a. Top and bottom can remain in pixels, but left and right should be in ems so you can do the math accurately for the box. Al Sparber PVII http://www.projectseven.com Designing with CSS is sometimes like barreling down a crumbling mountain road at 90 miles per hour secure in the knowledge that repairs are scheduled for next Tuesday. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horizontal navigation menu
From: Vicki Stebbins (Skinner) [EMAIL PROTECTED] Hi Al, Many thanks. I changed the ems to pixels (I understand pixels better) and so now have: width: 80px; padding: 4px 2px 4px 2px; But now FF is cutting off the word catalogues halfway through the E... any suggestions? Leave things the way they were and just increase the width set on the LI from 8em to 8.3em. 80px is way too narrow. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horizontal navigation menu
At 02:12 PM 25/08/2005, Al Sparber wrote: From: Vicki Stebbins (Skinner) [EMAIL PROTECTED] Hi Al, Many thanks. I changed the ems to pixels (I understand pixels better) and so now have: width: 80px; padding: 4px 2px 4px 2px; But now FF is cutting off the word catalogues halfway through the E... any suggestions? Leave things the way they were and just increase the width set on the LI from 8em to 8.3em. 80px is way too narrow. Hi Al, I did that and FF is right but now the 'home' is wrapping again? I don't want to drive you as nuts with this... Regards Vicki __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
