Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS css doing weird things in IE9

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #38699
    ianhaney
    Member

    Hi

    I have a CSS3 drop down menu in my website http://www.irhtoys.co.uk and works perfect in chrome and firefox but in IE9, it seem to not fit and the contact us tab keeps moving along the menu when hovering over other tabs and also when hover over the main tabs such as home or Baby toys tab, it goes square where as it should be rounded

    I can paste the css in here if need be

    Please help

    Kind regards

    Ian

    #105060
    ianhaney
    Member

    hI kgscott284

    I did the coding relating to the first issue and works perfect now

    The second issue, I went to the link and downloaded the pie-1.0.0 files, do I just upload them to the root of the website, is that right?

    Thanks

    Ian

    #105061
    ianhaney
    Member

    Hi kgscott284

    it means quite a bit as the drop down menu looks bit rubbish when I hover the main items and the menu drops down, hover over childrens toys for example in IE9 and its got square edges but rounded corners, that make sense

    I think that is what it is doing for the main menu items as well as when I hover baby toys, I can see a rounded corner but the edges are square

    #105064
    ianhaney
    Member

    Ok cool

    I uploaded the pie.htc to my css folder on the webserver and then added the behavior: url(PIE.htc); to my css3 properties that are not working and still doing the same thing

    Can I paste the css3 menu styles on here to quickly look at

    #105065
    ianhaney
    Member

    Hi kgscott284

    Below is the css3 styles in my stylesheet.css that the css3 drop down menu is using

    #nav {
    margin: 0;
    padding: 7px 6px 0;
    line-height: 100%;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    background: #8b8b8b; /* for non-css3 browsers */
    background-color: #18D418;
    border: solid 1px #6d6d6d;
    behavior: url(PIE.htc);
    }
    #nav li {
    margin: 0 4px;
    margin-left: 25px;
    padding: 0 0 8px;
    float: left;
    position: relative;
    list-style: none;
    behavior: url(PIE.htc);
    }
    /* main level link */
    #nav a {
    border-radius: 2em;
    -moz-border-radius: 2em;
    font-weight: bold;
    color: #000000;
    text-decoration: none;
    display: block;
    padding: 8px 20px;
    margin: 0;
    text-shadow: 0 0px 0px rgba(0, 0, 0, .3);
    background-color: #F6A828;
    behavior: url(PIE.htc);
    }
    /* main level link hover */
    #nav .current a, #nav li:hover > a {
    background: #d1d1d1; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#a1a1a1'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#a1a1a1)); /* for webkit browsers */
    background: -moz-linear-gradient(top, #ebebeb, #a1a1a1); /* for firefox 3.6+ */
    color: #FFFFFF;
    border-top: solid 1px #f8f8f8;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    text-shadow: 0 0px 0 rgba(255, 255, 255, .8);
    behavior: url(PIE.htc);
    }
    /* sub levels link hover */
    #nav ul li:hover a, #nav li:hover li a {
    background: none;
    border: none;
    color: #666;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    behavior: url(PIE.htc);
    }
    #nav ul a:hover {
    background: #0399d4 !important; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#04acec', endColorstr='#0186ba'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)) !important; /* for webkit browsers */
    background: -moz-linear-gradient(top, #04acec, #0186ba) !important; /* for firefox 3.6+ */

    color: #fff !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    behavior: url(PIE.htc);
    }
    /* level 2 list */
    #nav ul {
    border-radius: 2em;
    -moz-border-radius: 2em;
    background: #ddd; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cfcfcf'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cfcfcf)); /* for webkit browsers */
    background: -moz-linear-gradient(top, #fff, #cfcfcf); /* for firefox 3.6+ */

    display: none;
    margin: 0;
    padding: 0;
    width: 185px;
    position: absolute;
    top: 35px;
    left: 0;
    border: solid 1px #b4b4b4;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    z-index: 1000;
    behavior: url(PIE.htc);
    }
    /* dropdown */
    #nav li:hover > ul {
    display: block;
    }
    #nav ul li {
    float: none;
    margin: 0;
    padding: 0;
    behavior: url(PIE.htc);
    }
    #nav ul a {
    font-weight: normal;
    text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
    behavior: url(PIE.htc);
    }
    /* level 3+ list */
    #nav ul ul {
    left: 181px;
    top: -3px;
    }
    /* rounded corners for first and last child */
    #nav ul li:first-child > a {
    -webkit-border-top-left-radius: 9px;
    -moz-border-radius-topleft: 9px;
    -webkit-border-top-right-radius: 9px;
    -moz-border-radius-topright: 9px;
    position: relative;
    }
    #nav ul li:last-child > a {
    -webkit-border-bottom-left-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomright: 9px;
    }
    /* clearfix */
    #nav:after {
    content: ".";
    display: block;
    clear: both;
    visibility: visible;
    line-height: 0;
    height: 0;
    }
    #nav {
    display: inline-block;
    behavior: url(PIE.htc);

    }
    html[xmlns] #nav {
    display: block;
    behavior: url(PIE.htc);
    }
    * html #nav {
    height: 1%;
    behavior: url(PIE.htc);
    }
    #105067
    ianhaney
    Member

    Got another problem in IE9

    if hover over toys and then mattel toys, another menu should fly out from that, it looks as though it flies out but is cut off, its like the width or something, I don’t know

    Any ideas

    #105069
    ianhaney
    Member

    sorry where abouts in the .htaccess file do I add AddType text/x-component .htc

    will that fix the latest problem as well in IE9 in regards to when hover over toys and mattel toys, the menu being cut off

    I really appreciate you helping out

    #105071
    ianhaney
    Member

    Ok will do

    suprised your up at the time, at that time here I am fast asleep haha

    yeah will do a new topic if no one else posts about it on here, thank you so much for the help and for helping again if its not fixed

    will do, have a good sleep

    #105072
    ianhaney
    Member

    I added it to the bottom of the .htaccess file and didnt work still so will live with it for now

    Just worried about the menu being cut off now, I will post a new topic about that now

    #105074
    ianhaney
    Member

    Hello

    I have fixed it

    I had the following in my stylesheet.css, I just removed it, it was preventing the third multi level fly out from appearing, apparently is is coding to hide the fly out menu or something and I also have rounded corners out where I had squares so all fixed

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ebebeb’, endColorstr=’#a1a1a1′); /* for IE */

Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.