SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS IE fix, please help

    Ok, the nav looks great in Firefox... as usual. But i can't figure out what to put as a fix for IE.

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

    Here is the html code:

    <div align="right">
    <ul class="nav">
    <li><strong>Home</strong></li>
    <li><strong>Portfolio</strong></li>
    <li><strong>Services</strong></li>
    <li><strong>Request a Quote</strong></li>
    <li><strong>Contact Us</strong></li>
    </ul>
    </div>


    Here is my css code:

    ul.nav{
    display: table;
    }

    ul.block{
    width: 100%;
    table-layout: fixed;
    }

    ul.nav>li{
    display: table-cell;
    position: relative;
    padding: 2px 20px;
    }

    /*
    ul.nav>li:hover{
    padding-right: 1px;
    }*/


    ul.nav li>ul{
    display: none;
    position: absolute;
    max-width: 40em;
    margin-left: -20px;
    margin-top: 2px;
    padding: 2px 5px;
    }

    ul.nav li:hover>ul{
    display : block;
    }

    .nav ul li a{
    display: block;
    padding: 2px 10px;
    }

    /*Menu styles*/

    ul.nav, .nav ul, .nav ul li a{
    background-color: #fff;
    color: #3C1E00;
    }

    ul.nav li:hover, .nav ul li a:hover{
    background-color: #fff;
    color: #3C1E00;
    text-decoration: underline;
    }

    ul.nav li:active,
    .nav ul li a:active{
    background-color: #A85400;
    color: #fff;
    }

    ul.nav,
    .nav ul{
    border: none;
    }

    .nav a{
    text-decoration: none;
    }

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't need those styles for the UL (display: table), the STRONG elements or the DIV. Just float the UL to the right, set the display of the links in the list items to bold, and then style normally.

    The reason why I say this is because display: table is meant to be used with tables - not other HTML elements. The fact that other people abuse this style property the way people did HTML back in "the old days" sickens me to no end.

    Now as it is, I'm not at home so I don't have access to my work computer - which way is this menu supposed to go - horizontally or vertically, and how tall and wide do you need each list item to be?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    IE doesn't understand display:table and IE6 and under don't understand the child selector so you will have to change a few things to get a similar display in iE.

    There is no equivalent of display:table for IE so you will just have to float the lists to the right or set them to display:inline.

    Rather than using the child selector you will need to class the lists in question.

    IE6 and under don't understand hover on anything except anchors so you can only target the anchor and not the list.

    It seems you have used all the things that don't work in IE so you will need to decide how you want this to look in IE. There is no equivalent to display:table so you won't get the same wrapping behavior .

    All you can do is the basics.

    Code:
    <!--[if IE ]>
    <style type="text/css">
    ul.nav li{
    display:inline;
    padding: 2px 20px;
    }
    </style>
    <![endif]-->

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And sometimes the basics are all that are needed - especially when they work the best, use the least amount of code, and work cross-browser without any hacks.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by dan
    display: table is meant to be used with tables
    That's not quite true Dan (although I understand what you mean) but the W3c states quite clearly.
    In a visual medium, CSS tables can also be used to achieve specific layouts. In this case, authors should not use table-related elements in the document language, but should apply the CSS to the relevant structural elements to achieve the desired layout.
    If you think about it there would be little need for display:table if the only use for it were for holding tabular data because a table is the most semantic element to do that and display:table would then be redundant.

    However its a moot point anyway because it isn't supported at all in IE and will in most cases only cause problems unless the design is well thought out and tested. So its best to avoid using it

  6. #6
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried the IE fix, but it didn't work. Here is the website I am working on:

    www.peekwebdesigns.com/portfolio.htm

    This is for a horizontal nav bar (I was going to have a dropdown menu in one the options, but decided against it.)

    It looks great in Forefox, but doesn't do what it is supposed to in IE 6 or 7.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    The conditional comments are supposed to go in the head of the document and not in the stylesheet In your external css file you can only have css and css comments. Nothing else - no style tags nor html comments, just css.

    As Dan said above "keep it simple".

    You don't need 90&#37; of that list code and all you need for all browers is this:

    Code:
    /*Nav bar styles*/
    ul.nav{
    margin: 0;
    padding: 0;
    list-style-type: none;
    background-color: #fff;
    color: #3C1E00;
    }
    ul.nav li{
        display: inline;
        position: relative;
        padding: 2px 20px;
    }
    .nav a{
     text-decoration: none;
        background-color: #fff;
        color: #3C1E00;
    }
    ul.nav li a:hover{
        background-color: #fff;
      color: #3C1E00;
        text-decoration: underline;
    }
    ul.nav li a:active{
    background-color: #A85400;
    color: #fff;
    }
    That replaces all your nav code completely so get rid of everything that applies your nav except for that code above.

    Hope that helps :

    PS - why are you still using tables for layout

  8. #8
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you soooo much.

    Yeah, I am still learning from the hillbilly way. I've had a couple of friends and family come to me to make website for them... very simple ones, they've encouraged me to make it a business. (They don't know the difference between the tables vs. tableless sites).

    Long story short, I am self teaching myself while being a full time mom

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Ok, just take your time and try to learn things the right way from the start and not get into any bad habits. There's a lot to take in at first but if you are methodical, validate your code regularly and check your page in a number of browsers during development you will find things work better.


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
  •