Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    doctype kills my code, but it validates

    This is my code which validates at w3.org/validator. The problem I am having is that in IE7 the link does not become active unless you point directly at the text. the entire link box should act as a link, which it does in FF and also if I take out the <doctype> declaration. I've tried this in XHTML strict and transitional but nothing except no doctype declaration at all seems to let my menu work the way I want it to. Any idea why?

    Code:
    #menu ul {
    	margin: 0px;
    	padding: 0;
    	list-style: none;
    	width: 155px;
    	border-bottom: 1px solid #ccc;
    	}
    	
    #menu ul li {
    	position: relative;
    	}
    
    #menu li ul {
    	position: absolute;
    	right: 154px;
    	top: 0;
    	display: none;
    	}
    	
    #menu ul li a {
    	display: block;
    	text-decoration: none;
    /*	color: #333;
    */
    	color:#564b47;
    	background-color: #FFFFFF;
    	padding: 5px;
    	border: 1px solid #ccc;
    	border-bottom: 0;
    	cursor: pointer;
    	}
    #menu li:hover ul, li.over ul { 
    	display: block; 
    	cursor: pointer;
    	}
    #menu ul a:hover, #menu ul a:focus
    {
    	background-color: #EEE;
    	cursor: pointer;
    
    }
    
    /* Fix IE. Hide from IE Mac \*/
    * html ul li { float: left; height: 1%; }
    * html ul li a { height: 1%; }
    /* End */

  • #2
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    more code, sorry

    left out the rest of the code on accident.
    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
        <style type="text/css">
            /* CSS Document */
            #menu ul {
                margin: 0px;
                padding: 0;
                list-style: none;
                width: 155px;
                border-bottom: 1px solid #ccc;
                }
    
            #menu ul li {
                position: relative;
                }
    
            #menu li ul {
                position: absolute;
                right: 154px;
                top: 0;
                display: none;
                }
    
            #menu ul li a {
                display: block;
                text-decoration: none;
            /*    color: #333;
            */
                color:#564b47;
                background-color: #FFFFFF;
                padding: 5px;
                border: 1px solid #ccc;
                border-bottom: 0;
                cursor: pointer;
                }
            #menu li:hover ul, li.over ul {
                display: block;
                cursor: pointer;
                }
            #menu ul a:hover, #menu ul a:focus
            {
                background-color: #EEE;
                cursor: pointer;
    
            }
    
            /* Fix IE. Hide from IE Mac \*/
            * html ul li { float: left; height: 1%; }
            * html ul li a { height: 1%; }
            /* End */
        </style>
    </head>
    
    <body>
        <div id="menu">
            <ul>
                <li><a href="#">Menu Item 1</a></li>
                <li><a href="#">Menu Item 2</a></li>
                <li>
                    <a href="#">Menu Item 3</a>
                    <ul>
                        <li><a href="#">Menu Item 1, 1</a></li>
                        <li><a href="#">Menu Item 1, 2</a></li>
                        <li><a href="#">Menu Item 1, 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Menu Item 4</a></li>
                <li><a href="#">Menu Item 5</a></li>
            </ul>
        </div>
    
    </body>
    </html>

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    For display:block to work properly in IE the element needs to have a set width. Add
    Code:
    width:143px
    to #menu ul li a.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    Regular Coder
    Join Date
    Mar 2006
    Posts
    187
    Thanks
    5
    Thanked 0 Times in 0 Posts
    it works perfect for me in ie and ff.

    The only thing i can think of is that maybe your missing a speachmark sum where or something similar ?!? I cant spot one.

  • #5
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    For display:block to work properly in IE the element needs to have a set width. Add
    Code:
    width:143px
    to #menu ul li a.
    That works! Thank you very much!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •