SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Thread: Newbie

  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Newbie

    Hi all, I am designing a very simple CSS site. I have just hit a very minor problem. Wer'e talking pixel perfection here but in IE the height is fine, in FF the height is 1 pixel short.

    The height of what?...

    The height of a simple CSS based menu, here is the CSS:

    Code:
    /* MENU 
    -----------------------------------------------------------*/
    /*
    #navcontainer li:first-child{
    	border-left: 1px solid #fff;
    }
    */
    #navcontainer ul
    {
    padding-left: 0;
    margin: 0 0 40px 0;
    background-color: #51626b;
    color: #fff;
    float: left;
    width: 100%;
    font-family: arial, helvetica, sans-serif;
    height: 32px;
    font-size: 1.2em;
    }
    
    #navcontainer ul li { 
    height: 32px;
    display: inline; 
    }
    
    #navcontainer ul li a
    {
    padding: 8px 1em 9px 1em;
    background-color: #51626b;
    color: #fff;
    text-decoration: none;
    float: left;
    border-right: 1px solid #fff;
    border-bottom: 0px;
    }
    
    #navcontainer ul li a:hover
    {
    background-color: #fff;
    color: #51626b;
    }
    And here is the XHTML:

    Code:
    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="index.html" id="current">Home</a></li>
    <li><a href="#">Process</a></li>
    <li><a href="#">Our Work</a></li>
    <li><a href="contact.html">Contact</a></li>
    </ul>
    </div>
    I believe there are hacks to display content differently from browser to browser, before I rushed to try that out, I thought I would check if there is something fundamently wrong with the above code.

    Thanks for any help.

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Where is the HTML ?

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    don't set heights on containers ul's are block level and don't need a div

    PS the Ul is floating so needs float(s) after it , or needs the float cleared

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /* MENU */
    
    .navcontainer{
    padding-left: 0;
    margin: 0 0 40px 0;
    background-color: #51626b;
    color: #fff;
    float:left;
    width:100%;
    font-family: arial, helvetica, sans-serif;
    font-size: 1.2em;
    }
    
    .navcontainer li{
    display:inline; 
    }
    
    .navcontainer a{
    padding: 8px 1em 9px 1em;
    background-color: #51626b;
    color: #fff;
    text-decoration: none;
    float: left;
    border-right: 1px solid #fff;
    border-bottom: 0px;
    }
    
    .navcontainer a:hover{
    background-color: #fff;
    color: #51626b;
    }
    </style>
    </head>
    <body>
    
    <ul class="navcontainer">
    <li id="active"><a href="index.html" id="current">Home</a></li>
    <li><a href="##">Process</a></li>
    <li><a href="##">Our Work</a></li>
    <li><a href="contact.html">Contact</a></li>
    </ul>
    
    
    </body>
    </html>

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Testing locally. I have just found read up conditional commenting:

    http://www.javascriptkit.com/howto/cc2.shtml

    That sounds the best way of getting round IE problems, I have always used hacks in the past, which will be a pain when IE7 released.

    Just trying to get it working now. I don't see any difference when I duplicate a tag (obviously changing the parameters in the IE version).

  5. #5
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    ? you made a mistake 1.2em is app 19 px + 8 + 9 padding = a height of 36 px, your container height is set to 32px so FF , etc spills out 4px

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is the simple menu I am implementing:

    http://css.maxdesign.com.au/listamat...izontal03.htm#

    I will look at the height problem, I have just tweaked the sizes to get them to line up, if I get it perfect in FF it goes over 1px in IE, if I get it perfect in IE it is 1 pixel undere in FF. That's why I thought it might be a know issue with IE.

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just checked this:

    http://css.maxdesign.com.au/listamat...er-support.htm

    Looks like there is a modified version that supports older browsers, might try that.

  8. #8
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Get the height of and let the padding control height? No more no less, it can't get simpler than that? Or I am missing something completely?

  9. #9
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Done that. Here is my revised css

  10. #10
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have it working as I like it by adding this to a ie specific stylesheet:


    Code:
    #navcontainer ul li a
    {
    padding: 7px 15px;
    }
    This is the css that other browers will see:

    Code:
    #navcontainer
    {
    width: 100%;
    float: left;
    background-color: #51626b;
    margin: 0 0 40px 0;
    }
    
    #navcontainer ul { padding: 0; }
    #navcontainer ul li { display: inline; }
    
    #navcontainer ul
    {
    margin: 0;
    padding: 0 0 0 0;
    color: #FFFFFF;
    font-family: "Trebuchet MS", "Tahoma", "Helvetica", "Arial", sans-serif;
    font-size: 1.2em;
    }
    
    #navcontainer ul li a
    {
    padding: 9px 15px;
    background-color: #51626b;
    color: #FFFFFF;
    text-decoration: none;
    float: left;
    border-right: 1px solid #fff;
    border-bottom: none;
    }
    
    #navcontainer ul li a:hover
    {
    background-color: #fff;
    color: #51626b;
    }
    
    #navlist li a:hover, #navlist li a:active
    {
    color: #FFFFFF;
    text-decoration: none;
    background: #CC3333;
    text-align: left;
    }
    XHTML:
    Code:
    <div id="navcontainer">
    
    <ul id="navlist">
    <li id="active"><a href="index.html" id="current">Home</a></li>
    <li><a href="index.html">Work</a></li>
    <li><a href="index.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
    </ul>
    </div>
    I should have pointed out that I am lineing up the menu with a background image, hence the pixel perfectness. I think it is just the way that IE renders padding, or FF for that matter.

  11. #11
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Use *{margin:0;padding:0;} to set all default padding and margins to 0, and then adjust as needed

  12. #12
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    were not worthy... thanks mate, worked a treat.


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
  •