Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
|
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old October 24th, 2007, 10:11 AM
Banned
 
Join Date: Jul 2005
Posts: 317
Thanks: 0
Thanked 0 Times in 0 Posts
Default CSS Menu - Top list item not showing up in IE

I created a CSS-based menu using an unordered list based on this article: http://www.alistapart.com/articles/dropdowns/
...and I created a 100% div height design from that with this article: http://www.webmasterworld.com/css/3333354.htm */

My resulting stylesheet basically makes an unordered list within a <div> tag into a group of buttons. It worked great before I added the 100% div height code, but the background color is not showing up for the first list item in IE6 and IE7 (shocking, I know). It shows up fine in Firefox. The rest of the list items show up fine in all browsers. I've looked in the source code of the page, and the code appears to be correct. So I'm totally stumped. If anyone could let me know what I'm doing wrong, I'd REALLY appreciate it. I've included all of code below. If you copy & paste the code below, and check it in each of the referenced browsers, you should get the same result. Thanks for any and all help.

menu.aspx
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>CSS List-based Menu</title>
    <style type="text/css">
        html {
        font-size:62.8%;
        margin:0;
        padding:0;
        }

        body {
            font-family:verdana, arial, helvetica, sans-serif;
            font-size:1.2em;
            margin:0;
            padding:0;
            color:#000;
            background-color:#FFF;
            empty-cells:show;
            min-width: 100%; /* 2 x (LC fullwidth + CC padding) + RC fullwidth */ 
        }

        #wrapper {
            padding-left: 150px;      /* LC fullwidth */
            padding-right: 238px;     /* RC fullwidth + CC padding 218 + */
            overflow:hidden;
            /*padding-bottom:75px;*/
            padding-bottom:575px;
            -padding-bottom:0px;
        }

        #wrapper .column {
            position: relative;
            height:100%;
            float: left;
            padding-bottom: 1001em;     /* X + padding-bottom */
            margin-bottom: -1000em;     /* X */
        }

        #content {
            padding: 15px 0px 0px 0px/*left*/; /* CC padding */ /*'padding-top' 'padding-right' 'padding-bottom' 'padding-left'*/
            width: 100%;
            background: #FFF;
        }

        .leftheader {
            background-color:#000;
            color:#FFF;
            font-weight:bold;
            text-align:center;
            word-wrap:break-word; /* For Mozilla: Use 'zero width space' #8203; to break long words */
            border-top:0px solid #000; /*'border-bottom-width' 'border-bottom-style' 'border-bottom-color'*/
            width:120px;
            margin-top:3px;
            margin-bottom:-13px;
        }

        #screenleftnav {
            width: 120px; /* LC width */
            padding: 0; /* LC padding */
            right: 150px; /* LC fullwidth + CC padding */
            margin-left: -100%;
            margin-top:44px;
            color:#FFF;
            background-color:#000;
            border-right: 3px solid #900; /*'border-right-width' 'border-right-style' 'border-right-color'*/
            -left: 238px; /* RC fullwidth */
        }

        #screenleftnav ul {
            padding:0px; /*removes indent Mozilla and NN7*/
            list-style-type:none; /*turns off display of bullet*/
            text-align:center;
            margin:15px 0px 0px 0px; /*'margin-top' 'margin-right' 'margin-bottom' 'margin-left'*/
        }

        #screenleftnav li {
            display:inline;
        }

        #screenleftnav a {
            display:block;
            background-color:#99C;
            padding:1px 1px 1px 1px; /*'padding-top' 'padding-right' 'padding-bottom' 'padding-left*/
            border-bottom:1px solid #000; /*'border-bottom-width' 'border-bottom-style' 'border-bottom-color'*/
        }

        #screenleftnav a:link, #screenleftnav a:visited {/*THIS IS THE PROPERTY */
            background-color:#99C;
            color:#FFF;
            text-decoration:none;
        }

        #screenleftnav a:hover, #screenleftnav a:active { 
            background-color:#CCF;
            color:#000;
        }

        #screenheader {
            width:100%;
            border:0px;/*???*/
            height:110px;
            width:100%;
            margin-top:0px;
            background-color:#336; /* navy blue */
        }

    </style>
</head>
<body>
    <div id="wrapper">
        <div id="content" class="column">PAGE CONTENT GOES HERE</div>
        <div id="screenleftnav" class="column">
                  <div class="leftheader">Page Links</div>
                    [list]
                        <li><a href="page1.aspx">Page 1</a></li>
                        <li><a href="page2.aspx">Page 2</a></li>
                        <li><a href="page3.aspx">Page 3</a></li>
                      </ul>
                    <div class="leftheader">Section Home</div>
                    [list]
                        <li><a href="home.aspx">Home Page</a></li>
                    </ul>
            </div>
        </div>
</body>
</html>
KWilliams
 
Old October 26th, 2007, 09:10 AM
Banned
 
Join Date: Jul 2005
Posts: 317
Thanks: 0
Thanked 0 Times in 0 Posts
Default

#screenleftnav li {
float:left;
}

#screenleftnav a {
width: 117px;
display:block;
background-color:#99C;
padding:1px 1px 1px 1px; /*'padding-top' 'padding-right' 'padding-bottom' 'padding-left*/
border-bottom:1px solid #000; /*'border-bottom-width' 'border-bottom-style' 'border-bottom-color'*/
}

KWilliams





Similar Threads
Thread Thread Starter Forum Replies Last Post
Pure CSS Menu Showing Behind Form Fields in IE kwilliams CSS Cascading Style Sheets 10 November 19th, 2007 10:25 AM
Child form is not showing on the top shweta14 BOOK: Professional C#, 2nd and 3rd Editions 1 January 31st, 2007 06:31 AM
Child form is not showing on the top shweta14 C# 0 November 10th, 2006 02:48 AM
how create menubar, menu, menu item in xsl vijayanmsc XSLT 1 June 5th, 2006 06:43 AM
Creating a Database Driven Top Menu Bar with CSS Lucy CSS Cascading Style Sheets 1 March 30th, 2006 10:14 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.