Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old October 24th, 2007, 10:11 AM
Banned
Points: 1,561, Level: 16
Points: 1,561, Level: 16 Points: 1,561, Level: 16 Points: 1,561, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jul 2005
Location: , , .
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
Reply With Quote
  #2 (permalink)  
Old October 26th, 2007, 09:10 AM
Banned
Points: 1,561, Level: 16
Points: 1,561, Level: 16 Points: 1,561, Level: 16 Points: 1,561, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jul 2005
Location: , , .
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
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


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



All times are GMT -4. The time now is 04:34 AM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.