SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Spry submenus behind page content in IE

    My sub menus in IE are going behind the page content on my wordpress blog page.
    I'm not sure if this is a spry or wordpress problem, but I had this problem on a few other (non wordpress) pages and fixed it by adding "z-index:10000;" under "#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */".

    In wordpress I have a plug in called "custom headers and footers" where I can put in html code for the menu.
    In this I've added "z-index:100000000;" under the following menus :

    #MenuBar, .nav

    and

    #MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */

    The background area of the menu is also about twice the height it should be in IE, this isn't as big a problem, but I would like to fix that too.

    I think I found out a while ago that it's not possible to make the menus shiny in IE as they are in every other browser.
    I'm mostly concerned that IE visitors to the blog page will not know that there are 3 gallerys.

    Also in firefox when I'm on the blog page and I hover over the "Strawberry switchblade" menu it makes the text in all the menus go darker.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    What versions of IE have you tested this in? And in which ones does the problem occur?

  3. #3
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE9 and IE9 64bit.
    I'm sure it used to be fine in IE7 or 8 when I first built the site.

  4. #4
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Same problem in IE8 too.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Looks like the filter on the menuBar/nav is causing problems, as they usually do. A tip: unless you really, really hate yourself and are deeply into masochistic rituals and self harm, avoid IE filters. They cause no end of misery and are utterly useless.

  6. #6
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph thanks for the info, I'm not an expert on html I'm just self taught, can you explain what I have to do to fix the filter?
    Cheers

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    To keep it simple, my suggestion would be to remove the filter altogether and just use a solid background color or a background image. The gradients etc. don't seem to be working anyway. How was this set up in the first place? Did you write the code, or are you trying to modify someone else's?

  8. #8
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph
    How do I remove the filter, is it just the extra code specifically for IE?
    The whole site works fine in all browsers apart from IE, so I'm reluctant to make the site design suffer just because IE is so picky.
    Can I make the menu use a solid colour or background image just in IE?

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Waigy View Post
    How do I remove the filter?
    You need to find it in your style sheet and just delete it. It's just one line. If you are happy to do away with the gradient in IE, just set the nav to background-color: black before all your gradient rules. The alternative (a good alternative for all browsers) would be to create a background image instead that repeats across the page to create that background effect.

  10. #10
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph I am already using a 1px gradient image that repeats across the page.
    That one line that I have to delete, what style sheet is it in and what will it say?

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    It's in the head of your document:

    Code:
    #MenuBar, .nav {
    	background-color:#000000;	
    	font-family: MonaKoRegular, Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
    												MenuItem, and MenuItemLabel
    												at a given level all use same definition for ems.
    												Note that this means the size is also inherited to child submenus, 
    												so use caution in using relative sizes other than
    												100% on submenu fonts. */
    	font-weight: normal;
    	font-size: 18px;
    	font-style: normal;
    	padding:0;	
    
    	background: #c8c8c8; /* Old browsers */
    	background: -moz-linear-gradient(top, #c8c8c8 0%, #4f5151 50%, #0a0e0a 51%, #0a0809 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c8c8c8), color-stop(50%,#4f5151), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top, #c8c8c8 0%,#4f5151 50%,#0a0e0a 51%,#0a0809 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top, #c8c8c8 0%,#4f5151 50%,#0a0e0a 51%,#0a0809 100%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(top, #c8c8c8 0%,#4f5151 50%,#0a0e0a 51%,#0a0809 100%); /* IE10+ */
    	background: linear-gradient(top, #c8c8c8 0%,#4f5151 50%,#0a0e0a 51%,#0a0809 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8c8c8', endColorstr='#0a0809',GradientType=0 ); /* IE6-9 */
    z-index: 100000000;
    }

  12. #12
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow deleting that line has worked.
    Thanks for that.
    Can I make the menu background black in IE only without affecting how it looks in firefox (shiny gradient)?

    Also do you know what can be causing the text to go darker when hovering over the Strawberry switchblade menu in firefox.
    It only happens when I'm in the blog page.

  13. #13
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've sussed out how to change it to black for IE only using your suggestion of making the background black before the gradient rules and deleting the IE filters for everything submenus, hovers etc.
    I'm going to do the same for all the other pages.

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Waigy View Post
    Can I make the menu background black in IE only without affecting how it looks in firefox (shiny gradient)?
    Yes indeed, though I see you've achieved than now.

    Also do you know what can be causing the text to go darker when hovering over the Strawberry switchblade menu in firefox.
    It only happens when I'm in the blog page.
    Hm, I don't see that in Firefox. Could you post a screen shot of what you are seeing?

  15. #15
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph
    I was just going to give you a screen shot of the text going darker and it isn't happening anymore.
    In IE8 the drop down menus were still not working but it was ok in IE9.
    The last thing I did was added "z-index: 10000000000;" after every menu category.
    I'm not sure if that was a good thing to do or not, but it now seems to work fine apart from in IE8 the menu doesn't stay at the top of the page when scrolling, but that's not a big problem.

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    O well, if it works, then great. z-indexes won't do any harm, but there is certainly an art to them. Regarding the change in firefox, sometimes the browser "caches" old versions of the style sheet until you refresh the browser or clear the cache. That may have been the problem.

    So are you all good now, or are there unresolved issues?

  17. #17
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think that's it all fixed now though I haven't tried it yet in other browsers opera/chrome etc.
    Thanks very much for the help.
    Some forums have a "give thanks" button, but you'll just have to make do with a jam doughnut.
    jam-doughnut_1603342c.jpg

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Thanks

    It looks fine in Chrome (same as in FF). Chrome is my go-to browser now.


Bookmarks

Posting Permissions

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