Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Freshy Menu issue on IE

  1. infernostreetdance
    Member

    http://www.infernostreetdance.co.uk http://infernostreetdance.wordpress.com

    Might be useless to ask now, because I am waiting for Domain registration to go through so the site is going to a parking page.

    Firefox and Google Chrome works perfect.

    IE7 the menu bar in Freshy has the names of the items above the menu, I am pasting my customization changes:-

    body,html {
    font-size:90%;
    font-family:Tahoma, Verdana, Arial, Helvetica;
    margin:0;
    padding:0;
    }

    #title h1 a {
    color:white;
    display:block;
    text-decoration:none;
    }

    #content h2 {
    color:black;
    border:none;
    clear:both;
    margin:0;
    padding:0;
    }

    #content h2 a {
    color:black;
    text-decoration:none;
    border:none;
    }

    .description {
    color:red;
    }

    a {
    color:#000000;
    text-decoration:none;
    }

    a:link {
    color:#FF0000;
    text-decoration:underline;
    }

    a:active {
    color:#FF0000;
    text-decoration:underline;
    }

    a:visited {
    color:#FF0000;
    text-decoration:underline;
    }

    a:hover {
    color:#FF0000;
    text-decoration:none;
    }

    .menu li a {
    font-size:.8em;
    text-transform:uppercase;
    line-height:normal;
    display:table-cell;
    vertical-align:middle;
    height:80px;
    background:url('files/2009/06/menu_triple1.gif') top left transparent repeat-x;
    padding:0 10px;
    }

    .menu li a.first_menu {
    padding-left:35px;
    background-repeat:no-repeat;
    background-image:url('files/2009/06/menu_start_triple2.gif');
    color:white;
    }

    .menu li.current_page_item a {
    background-position:bottom left!important;
    color:black!important;
    }

    .menu li a.last_menu,.menu li a.last_menu_off {
    padding-right:35px;
    background-repeat:no-repeat;
    background-image:url('files/2009/06/menu_end_triple1.gif');
    background-position:top right;
    }

    #sidebar {
    font-size:.8em;
    background:white;
    color:black;
    }

    #sidebar h2 {
    background:black;
    color:white;
    font-size:1em;
    font-weight:normal;
    text-transform:uppercase;
    margin:7px 0;
    padding:7px;
    }

    #sidebar a:hover,#sidebar .current_page_item li a:hover,#sidebar .current-cat li a:hover {
    color:#FF0000;
    text-decoration:underline;
    }

    .date {
    color:red;
    float:right;
    line-height:2.3em;
    padding-left:5px;
    border-left:1px solid red;
    font-size:.8em;
    text-align:center;
    position:relative;
    right:0;
    margin:1.5em 0 5px 10px;
    }

    .date_month {
    display:block;
    font-size:2em;
    text-align:right;
    font-weight:bold;
    }

    I figure it has something to do with the menu stuff, anyone has any ideas or experienced the same?

    The blog I need help with is infernostreetdance.co.uk.

  2. infernostreetdance
    Member

    OK the site is live, you can have a look at the issue i mentioned via IE.

  3. infernostreetdance
    Member

    narrowed down to

    .menu li a {
    font-size:.8em;
    text-transform:uppercase;
    line-height:normal;
    display:table-cell;
    vertical-align:middle;
    height:80px;
    padding:0 10px 0 10px;
    background:url(images/menu/menu_triple.gif) top left transparent repeat-x;
    }

    If I alter the background line to original image it works fine.

    background:url(images/menu/menu_triple.gif) top left transparent repeat-x;

    I don't understand why though :-(

  4. thesacredpath
    Member

    First off, change all of your "relative" URL's to absolute. See what that does for you.

  5. infernostreetdance
    Member

    Done that and it helped a little if you see now the colours are working, but the text is still sitting above.

    Any more ideas?

  6. infernostreetdance
    Member

    I SOLVED IT. I cannot explain in words how painful this was. so from:-

    .menu li a {
    font-size:.8em;
    text-transform:uppercase;
    line-height:normal;
    display:table-cell;
    vertical-align:middle;
    height:80px;
    padding:0 10px 0 10px;
    background:url(images/menu/menu_triple.gif) top left transparent repeat-x;
    }

    I changed the url to full path http://...... AND the key change I removed line-height:normal; and it WORKS now. So the code looks like:-

    .menu li a {
    font-size:.8em;
    text-transform:uppercase;
    display:table-cell;
    vertical-align:middle;
    height:80px;
    background:url('http://infernostreetdance.files.wordpress.com/2009/06/menu_triple1.gif') top left transparent repeat-x;
    padding:0 10px;
    }

    Thanks god for that, I was really getting worked up, spend money and time on the colors if IE would not displa it which I guess alot of people still use for some reason, that would have been horrible.

  7. infernostreetdance
    Member

    Problem, I got it working so I thought but it was only for IE6, version 7 still has issue, so back to work again.

  8. thesacredpath
    Member

    My suggestion is to forget about IE6. It is over 9 years old, which in internet years means it was written on stone tablets. Everyone is starting to drop support for it from their designs and fewer and fewer people are using it. As of May 2009, less than 15% of the people browsing the internet were using IE6. http://www.w3schools.com/browsers/browsers_stats.asp

    Anyone using it really needs to be encouraged to upgrade. Microsoft is no longer supporting it or doing security updates, and it has so many security holes it looks like a screen door. It really is a dangerous browser to be using.

  9. jeegnesh
    Member

    sorry this is still me, but this is my account, I just realized I can be an admin of the infernostreetdance site but via my own account :-)

    Thanks for the IE6 info, I never use IE hence why my machine had IE6, I see even IE 8 is on release now.

    So I have fixed the problem on IE7, will test on IE8 now, but here is some amazing advice on custom CSS.

    DO NOT COPY AND PASTE THE WHOLE {....} JUST BECAUSE YOU ARE WANTING TO CHANGE 1,2,3... LINES. JUST MAKE THE ENTRY AND JUST HAVE THE LINES YOU WANTED TO UPDATE.

    So my code for the menu section now looks like:

    .menu li a {
    background:url('http://infernostreetdance.files.wordpress.com/2009/06/menu_triple1.gif') top left transparent repeat-x;
    font-weight:bold;
    }

    .menu li a.first_menu {
    background-image:url('http://infernostreetdance.files.wordpress.com/2009/06/menu_start_triple2.gif');
    color:white;
    font-weight:bold;
    }

    .menu li.current_page_item a {
    color:black!important;
    font-weight:bold;
    }

    .menu li a.last_menu,.menu li a.last_menu_off {
    background-image:url('http://infernostreetdance.files.wordpress.com/2009/06/menu_end_triple1.gif');
    font-weight:bold;
    }

    so just my new images, and cahnged to bold text and colour in some places.

    I wish I knew this before.

    OK testing IE8 now.

  10. thesacredpath
    Member

    I forget to mention that, but my suggestion is always to just past in the sections and the specific declarations you are going to change and check "add to existing...." That way it is easier to keep track of the changes you have made.

    If you are making massive changes, then doing the whole stylesheet and selecting "replace existing" is a better route.

  11. jeegnesh
    Member

    I did do this I only have the sections I updated, but even within the section you should only put your changes and not to repeat anything that your not changing in that section. I know it does not make sense but IE seemed to not like this, once I removed that it worked fine.

    You can see what I mean if you compare the last paste of code, compared to the same section in my first post.

    FYI - IE 8 works fine too. Happy now.

  12. thesacredpath
    Member

    You will always have issues if you have repeat stuff in the CSS and as you say, only put in the actual declarations that you are changing, nothing else.

    I'm glad you are up and running.

  13. infernostreetdance
    Member

    Thanks :-) all looking good for now, till the next set of changes.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags