Grow your CSS skills. Land your dream job.

rounded corner menus doesnt show up in ie

  • # March 30, 2009 at 7:21 am

    hi….please help me out of thie problem…..

    the problem is that i created a rounded corner menu.. it works on Firefox but the round corners doesn’t show up in IE
    please check http://www.innov8.in for the problem page……

    Code:
    html
    —————–

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




    ——————–

    CSS
    ——————–
    * {margin:0; padding:0;}
    ul#menu
    {
    margin-top:-145px;
    padding-left:250px;

    }
    ul#menu li
    {
    list-style:none;
    display:inline;
    }
    ul#menu li a
    {
    color:#FFFFFF;
    text-decoration:none;
    font-size:14px;
    padding:12px;
    height:100px;
    font-weight:bold;
    }
    ul#menu li a:hover
    {
    background-image:url(images/over_gad.jpg);
    background-position:top;
    background-repeat:no-repeat;
    width:100px;
    height:12px;

    }
    ul#menu li a.active
    {
    background-image:url(images/over/back_middle.png);
    background-repeat:repeat-x;
    font-style:italic;

    }
    span.active_right
    {
    background-image:url(images/over/back_right.png);
    background-position:right;
    background-repeat:no-repeat;
    padding-left:10px;
    padding-top:14px;
    padding-bottom:10px;

    }
    span.active_left
    {
    background-image:url(images/over/back_left.png);
    background-repeat:no-repeat;
    background-position:left;
    padding-left:10px;
    padding-top:14px;
    padding-bottom:10px;

    }

    div#footer
    {
    background-image:url(images/footer_back.jpg);
    background-repeat:no-repeat;
    width:1000px;
    height:121px;
    }
    div#logo
    {
    background-image:url(images/logo.jpg);
    background-repeat:no-repeat;
    width:173px;
    height:103px;
    position:absolute;
    margin-top:-66px;
    }
    div#content
    {
    background-image:url(images/main_body.jpg);
    background-repeat:no-repeat;
    width:1000px;
    height:379px;
    margin-top:56px;
    }
    body {
    font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
    background-color:#16a2d0;
    }
    div#wrapper
    {
    margin:0 auto;
    width:1000px;
    }
    div#top_banner_back
    {
    background-image:url(images/header_back.jpg);
    background-repeat:no-repeat;
    width:1000px;
    height:250px;

    }

    ——————-

    Thakns in advance

    Nidhin

    Rob
    # March 30, 2009 at 8:23 am

    Firstly, thats gonna be a sweet design :)

    Ok – dude – your code is destroying itself… I just had a good 10 mins plaiyng with it and you are using margin and padding for positioning – which is always bad, especially in IE.

    Ok what I would do is start with your wrapper div, give it a position:relative;

    Next move onto your header, give it a height of 182px, thats the height of the image… dont worry about how it looks yet.

    remove the div that wraps your UL nav bar, its not doing anything :)

    from the #menu remove the padding and margin thats positioning it, just physically delete the margin-top and padding-left values. Now add

    Code:
    #menu {

    height:36px;
    position:absolute;
    top:94px;
    left:245px; /*you can make this to what you need obviously – tweek afterwards*/

    }

    Now remove the padding and margin from your li and span styling and time to start again :D

    for the span, do this:

    Code:
    background:url(whatyourbgis.jpg) no-repeat;
    display:inline-block;
    float:left;
    width:10px;
    height:36px;

    now for your li do this

    Code:
    display:inline-block;
    float:left;
    height:36px;
    line-height:36px; /* this centres your text vertically*/
    margin:0 10px; /*spaces out the LIs left and right at 10px*/
    padding:0 5px; /*adds internal blue spacing if you want it left and right at 5px… */

    next take the width value off your li.active:hover no need for that…

    remove the margin from your content div – and you should see it fit back nicely to the header :)

    Ok if you can see what I am doing there, you will notice your site start to form back into something more standard. The float:left is for IE who seems to think that display:inline-block means block lol…

    If you use positioning for your elements instead of padding/margin you will find it works. The reason I added position:relative to your wrapper is that for all the elements you position inside that wrapper will now work out their position from the wrapper. Example – the #menu is:

    position:absolute;
    top:94px; <– this means from the top of the wrapper
    left:245px; <– this is from the side of the wrapper

    If you did not have the wrapper with a pasive position it would get its positioning from the main window – then whenever you resized your website would go mental :)

    I hope that has helped – little tricks like setting your line-height to the same height as your nav (36px) is really useful for vertical centre…

    Thats it – im sure you can work out the rest :D

    # March 31, 2009 at 1:04 am

    thanks for the reply..surely learned some great tricks…

    please take a look @ the page now http://www.innov8.in ….two problems i couldn’t solve,may be because i m new to css…

    1. the mouse over is not working fine….i did not use the margin top which i usually used to, as per your guidelines
    2. the active background effect is not seen fully …

    what do u think….y a beginner makes such mistakes…
    please guide as i can avoid the errors in further designs…

    and i am so happy that u commented on my design thanksss……

    Rob
    # March 31, 2009 at 4:01 am

    Firstly well done! its looking much better code wise :) We all have to start somewhere, so don’t worry about being new to CSS… :)

    Ok questions:

    1. the mouse over is not working fine….i did not use the margin top which i usually used to, as per your guidelines

    your <a> tag element by defualt is classed as an "inline" element, you need to display it as a "block" so that you can set a height to it :) So, what you need to do there is add:

    Code:
    display:inline-block;
    height:36px;
    float:left;

    to your ul#menu li a.active styling.

    Now you might see it all go a little wrong when you do that, this is because you need to set some float to your SPAN’s, so add:

    Code:
    float:left;

    to your span.active_left and span.active_right :)

    That should sort that problem.

    2. the active background effect is not seen fully …

    I think you mean the background effect/image of the menu hover? If so again its because the <a> is classed as inline, and you need it to be a block reaching the full height of your menu. So find your ul#menu li a:hover and set:

    Code:
    display:block;
    height:36px;

    and I think that should pretty much do it :)

    # March 31, 2009 at 8:29 am

    ok thanks buddy…now the css is working fine…..

    please take a look at the site…

    i used the "moving boxes" from css- tricks in this page…its ok in ie but doeant show up in firefox…..

    Rob
    # March 31, 2009 at 9:36 am

    sorry dude – im having serious net connection problems atm lol So im not much help right now, will be ok on friday :D

    # March 31, 2009 at 10:05 am

    I think you either need to update the page that your link points to or provide a new link.

    # March 31, 2009 at 10:27 am

    Thanks for the display: inline-block; thing. I didn’t know that.

    # March 31, 2009 at 12:45 pm

    sorryy…..i forgot to update the page..now i have done it…please check now… :)

    # March 31, 2009 at 1:12 pm

    Your moving boxes aren’t appearing in Firefox because you have them commented out.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".