menu wrap

  • John McCubbin

    #30135

    here is the code for the menu and menu wrap when it breaks as I would prefer to leave the code out of the live one as i dont want the menu broke as the site has to be viewable at all time.

    #header-menu {
    background: #1e5799; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #1e5799 0%, #0b479d 47%, #2989d8 56%, #9cc1f7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#1e5799), color-stop(47%,#0b479d), color-stop(56%,#2989d8), color-stop(100%,#9cc1f7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* IE10+ */
    background: linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#9cc1f7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    !important;
    }
    #header-menu-wrap {
    background: #1e5799; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #1e5799 0%, #0b479d 47%, #2989d8 56%, #9cc1f7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#1e5799), color-stop(47%,#0b479d), color-stop(56%,#2989d8), color-stop(100%,#9cc1f7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* IE10+ */
    background: linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#9cc1f7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    !important;
    }

    Anonymous

    #30136

    You are adding the !important incorrectly for the filter declaration… which is probably why it’s not working properly in IE.

    Try this instead:

    #header-menu {
    background: #1e5799; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #1e5799 0%, #0b479d 47%, #2989d8 56%, #9cc1f7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#1e5799), color-stop(47%,#0b479d), color-stop(56%,#2989d8), color-stop(100%,#9cc1f7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* IE10+ */
    background: linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#9cc1f7',GradientType=1 ) !important;
    }
    #header-menu-wrap {
    background: #1e5799; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #1e5799 0%, #0b479d 47%, #2989d8 56%, #9cc1f7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#1e5799), color-stop(47%,#0b479d), color-stop(56%,#2989d8), color-stop(100%,#9cc1f7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* IE10+ */
    background: linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#9cc1f7',GradientType=1 ) !important;
    }

    John McCubbin

    #30137

    No still got the same problem

    Anonymous

    #30138

    Did you refresh everything? Page, browser, site caches?

    ronangelo

    #30139
    Quote:
    The main part of the menu the gradient works fine but when you go to any drop down part it shows that part white.

    you’re talking about the sub-menu. you can either add it like this

    #header-menu ul li {
    background: #1e5799; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #1e5799 0%, #0b479d 47%, #2989d8 56%, #9cc1f7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#1e5799), color-stop(47%,#0b479d), color-stop(56%,#2989d8), color-stop(100%,#9cc1f7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* IE10+ */
    background: linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#9cc1f7',GradientType=1 ) !important;
    }

    or

    .sub-menu {
    background: #1e5799; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #1e5799 0%, #0b479d 47%, #2989d8 56%, #9cc1f7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#1e5799), color-stop(47%,#0b479d), color-stop(56%,#2989d8), color-stop(100%,#9cc1f7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* IE10+ */
    background: linear-gradient(-45deg, #1e5799 0%,#0b479d 47%,#2989d8 56%,#9cc1f7 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#9cc1f7',GradientType=1 ) !important;
    }
    #header-menu ul li {
    background: none !important;
    }

    Anonymous

    #30140

    Thanks ronangelo. I missed that part. Which is why I prefer having a link for a visual representation.

    John McCubbin

    #30141

    Yes I did refresh everything

    @ronangelo No the sub-menu colour is fine and it shows when the menu-wrap is a solid colour but when I add the gradient it blankens out not even giving the options just a blank space with a border on the submenu but no clickable options as well. and when you move down the menu automatically closes

    ronangelo

    #30142

    like josh said, maybe you can post here a link to your website.

    John McCubbin

    #30143

    I would prefer not to have the menu set like this on the live site till i fix it as people wont be able to work the menus. I understand this limits how you can help me but if you use the code I supplied on your graphene website you should see the same.

    ronangelo

    #30144

    hmm you’re right this part causes the trouble on IE.

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38d8d3', endColorstr='#0010a5',GradientType=1 );
Viewing 10 posts - 11 through 20 (of 33 total)
  • You must be logged in to reply to this topic.
Do NOT follow this link or you will be banned from the site!