Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 25
  1. #1
    New Coder
    Join Date
    Dec 2009
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Spry menu not dropping down in PC Firefox or Safari!!

    I was hoping someone could help me before my brain explodes. I've been trying for three days to create a clean drop-down menu that is cross browser compatible. I thought I'd found the solution with the spry feature in dreamweaver, but when I tested it in different browsers the drop-downs don't work in PC Firefox or Safari, though they look beautiful in IE.

    Here is the link: http://www.bravada-cci.com/strongpoint/index.html

    The link to my css is in the source of this page if you need it. ANY suggestions would be wonderful and greatly appreciated.

    Thanks in advance!

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Looks like the problem is caused by:

    Code:
    ul.MenuBarHorizontal li
    {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	font-size: 100%;
    	position: relative;
    	text-align: left;
    	cursor: pointer;
    	width: auto;
    	float: left;
    	left: 42;
    	overflow: hidden;
    }
    Remove overflow:hidden and it's OK, in FF and Chrome at least.

  • #3
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Quote Originally Posted by jennybear1978 View Post
    when I tested it in different browsers the drop-downs don't work in PC Firefox or Safari, though they look beautiful in IE.
    This is the first indication of incorrect markup. Never, ever trust IE to do anything right.

  • #4
    New Coder
    Join Date
    Dec 2009
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank so much, both of you. Three days of frustration before I decided to post, which obviously I should have done earlier.

    I'm trying to slowly understand the coding language, and it's been an uphill battle. Thank goodness for good resources online!!!

    Thanks again. I'll remember in the future to test in Firefox and Safari more.

  • #5
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Quote Originally Posted by jennybear1978 View Post
    I'll remember in the future to test in Firefox and Safari more.
    Not just more. One of those two browsers should be your FIRST test. IE should be your LAST.

  • #6
    New Coder
    Join Date
    Dec 2009
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Okay, one final problem and I think I have this menu figured out. Thanks again for all the previous advice. I can't say I'm a programmer, though I have been trying to understand the coding and not make too much of a mess of it.

    SO... here it is.

    I've added an image below my navigation menu and a new problem has appeared. In IE the drop down menus appear with a solid white background when I'd like them to be transparent. I've tried adding "background-color: transparent;" to the ul.MenuBarHorizontal ul and ul li styling, as well as trying to add them to the IE crack at the bottom of the page, all to no avail. At one point I had it added to EVERY single style, trying to get this to work. If you look at the code now, I've gone back to my previous.

    Any ideas of where I need to add this in to get it to work?

    http://www.bravada-cci.com/strongpoint/index.html

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello jennybear1978,
    The white background is not coming from any CSS. It is your images. See

    To make the dropdowns transparent you will need new menu button images.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    The problem is your drop downs are images so that is covering up the background.

  • #9
    New Coder
    Join Date
    Dec 2009
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi Guys,
    I don't mind that the background of the actual menu is white (where the images are). But I had to assign a width of 190 px to both the ul.MenuBarHorizontal ul and li styles to contain the images. I wanted to do width:auto; to make the dropdowns size to the size of the buttons, but that made the button images flow horizontally. This 190px container extends beyond the width of the actual images in the menu, and that is the part that I want to be transparent - the container, not the actual buttons themselves. Does this make sense?

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    It does make sense but it sure looks like you're already doing that. In Firefox anyway.
    To test, change it to a color and see what happens -
    Code:
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    {
    	display: block;
    	cursor: pointer;
    	background-color: #f00;
    	padding: none;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    New Coder
    Join Date
    Dec 2009
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Also, again, this problem is only in viewing with IE. In firefox and safari it works beautifully!

  • #12
    New Coder
    Join Date
    Dec 2009
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Okay, VERY odd. When I changed that tag it made the background red. BUT when I changed it back to "background-color:transparent;" it just made the background WHITE again!!!! AAAAAAHHHH!

  • #13
    New Coder
    Join Date
    Dec 2009
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Could it have to do with this coding?

    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
    {
    position: absolute;
    z-index: 1010;
    }
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
    {
    ul.MenuBarHorizontal li.MenuBarItemIE
    {
    display: inline;
    f/loat: left;
    background-color:transparent;
    }
    }

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I think this is a case of invalid code. Check the links about validation in my sig below. If changing <div id=whatever> to <div id="whatever"> doesn't fix it we can have another look.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #15
    New Coder
    Join Date
    Dec 2009
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts
    You have been so patient in helping untrained me with my problems. Thanks! SO, the errors I have all seem to be the same. I'm new in working with the <div> tag, so if you would mind telling me what needs changing, then I know for the future. The two main errors are:

    Error Line 44, Column 8: XML Parsing Error: AttValue: " or ' expected
    <div id=container style="text-align:center; top:0;">

    Error Line 103, Column 11: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified

    <div id=mainimage style="position:relative; width:750px; height:340px; padding


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •