SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    MSIEWin, lists and unwanted space. Again. Ho hum.

    Among my 'stuff to remember' notes I had something on 'the MSIE navlist issue'... its bungling of positioning, padding on inks etc. Can't find it - and my memory is appalling. Plus a quick search doesn't throw anything suitable, so hence this post to clarify...

    At the foot of this post is the code for a simple vertical navbar with rollovers. Having seen unreliable variants, this is a rework of an Eric Meyer example. Unless I've goofed it should work fine. As a Mac/FF user, it of course behaves on my screen. I'll get to a PC/Win machine later to check, meantime...

    Well aware of the MSIEWin 'stretch the list with unwanted vertical space' issue, I'm thinking this might/should apply here. The code has individual li on separate lines and I haven't done my usual kludge of rolling the whole of the ul code onto a single line.

    Why? Because (and I wish I could find the info) I believe it's neither necessary nor always reliable... and that the problem arises from the 'has layout' issue and hence requires a specifc fix - one of which is setting ul#navlist li a {display: block;}... but this is something of which I'm entirely unsure.

    So, feedback appreciated please as to whether unwanted whitespace is present and if so does it break the layout by rendering whitespace between the backgrounds? Thanks.

    <!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">
    <head>
    <title>list demo</title>

    <style type="text/css" title="text/css" media="all">

    div#wrapper
    {
    width: 250px;
    border: 1px solid #999;
    background: #fff;
    color: #222;
    font: 11px verdana;
    }

    p
    {
    padding: 15px;
    margin: 0;
    }

    ul#navlist
    {
    padding: 0 0 15px 0;
    margin: 0;
    font-size: 13px;
    }

    ul#navlist li
    {
    list-style: none;
    padding: 0px;
    border-bottom: 1px solid #eee;
    margin: 0;
    }

    ul#navlist li#current
    {
    padding: 6px 0 6px 10px;
    border-left: 10px solid #ddd;
    background: #f5f5f5;
    color: #222;
    }

    ul#navlist li a
    {
    display: block;
    background: #fff;
    text-decoration: none;
    padding: 6px 0 6px 10px;
    border-left: 10px solid #f5f5f5;
    }

    ul#navlist li a:link, ul#navlist li a:visited
    {
    color: #666;
    }

    ul#navlist li a:hover
    {
    border-color: #eee;
    color: #333;
    background: #f8f8f8;
    }

    </style>

    </head>

    <body>

    <div id="wrapper">

    <ul id="navlist">
    <li id="current">congue</li>
    <li><a href="#">interdum</a></li>
    <li><a href="#">fermentum</a></li>
    <li><a href="#">nonummy</a></li>
    <li><a href="#">condimentum</a></li>
    </ul>

    <p>Lorem ipsum dolor sit amet, cons ecte tuer adip iscing elit. Fusce mattis, lorem ac rhoncus iaculis.</p>

    </div><!-- wrapper ends -->

    </body>
    </html>

  2. #2
    SitePoint Evangelist figbeam's Avatar
    Join Date
    Jun 2004
    Location
    Sweden
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No unwanted whitespace found in FF 1.0, IE 6.0 or Opera 7.23 under WinXP Pro.
    Last edited by figbeam; Mar 5, 2005 at 08:18. Reason: Correction of poor spelling...

  3. #3
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks good in FireFox 1.0.1, NS 7.2, Opera 7.54.

    IE 5.5 only displays the rollover when you hover over the TEXT links, and not when you hover in block off of the text.

    I set the width on ul#navlist li a{ to 230px, and it worked in IE, but it breaks out of the container in the other browsers.

    This is IE's broken box model, the padding is adding to the problem.

    It can be worked around without a hack, by applying the padding differently.

    Here's a similar example, that works in all browsers, and no hacks.

    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">
    <head>
     <title>Simple CSS RollOver Menu</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     
    <style type="text/css">
       
       body{margin: 0;
    		padding:0;
    					  background:darkseagreen;} 
     #navcontainer {margin-left:100px;
    		 width: 200px; text-align:center;
    					   border:thin groove;}
     #navcontainer ul{margin-left: 0;
    	padding-top:20px;
    	padding-left: 0;
    	list-style-type: none;
    	font-family:times new roman;
    	font-weight:bold;}
     #navcontainer a{display: block;
       padding: 3px;
       width: 160px;
       background-color:rosybrown;
       border:solid black 1px;
       border-top:solid silver 1px;}
     #navcontainer a:link, #navlist a:visited{color:black;
    	   text-decoration: none;}
     #navcontainer a:hover{background-color:sandybrown;
    		 color:midnightblue;}
    </style>
    </head>
    <body>
    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="http://www.sitepoint.com/" id="current">No Images</a></li>
    <li><a href="<A href="http://www.google.com/">No">http://www.google.com/">No JavaScript</a></li>
    <li><a href="PurYourUrlHere">Just CSS</a></li>
    <li><a href="Ditto">A Few Divs</a></li>
    <li><a href="DittoDitto">And Some Rules</a></li>
    </ul>
    </div>
    </body>
    </html>

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks.
    The error is mine - the cut-and-paste features css that's excluded from all -6 MSIEWin... hence the absence of bmh. The DocType kicks MSIEWin6 into standards mode.

    For anyone interested... the 'exclude' code is intended to be deployed in an external sheet, although may also work with a change to the style call. Rather than
    <style type="text/css" title="text/css" media="all">
    try
    <style type="text/css">@import "styles.css";@import "null?\"\{";></style>

    And, for anyone who wants to clip your code, a typo should be fixed:
    <li><a href="<A href="http://www.google.com/">No">http://www.google.com/">No JavaScript</a></li>

    Should become:
    <li><a href="http://www.google.com">No JavaScript</a></li>

    To validate strict, the anchor needs to be lower case. And, as you're linking top-level there's no need for a trailing slash on the url.

    ;-)


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
  •