SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot YAHA's Avatar
    Join Date
    Jan 2008
    Location
    MD, US
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it worked fine in my opera. didnt work in ie 7.
    i took a menu from this site http://www.seoconsultants.com/css/menus/tutorial/ and tried to adapt it to my needs. Everything is great except for it doesnt work in IE 7. When you hover over, nothing happens. What we see on your example is, I suspect, the problem of exactly the same nature. Is there anyone there who knows why this happens? Why doesnt sub items pop out in IE 7? Supposedly,in IE7, the hover property works not just for <a></a> tag but also for many others. . . .

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    The re are 2 main problems and the first is that you have included the conditional comments in your css file.

    Code:
         <!--[if IE]>
    <style type="text/css" media="screen">
    body {
    behavior: url(csshover.htc); /* call hover behaviour file */
    font-size: 100&#37;; /* enable IE to resize em fonts */
    } 
    
    #menu ul li {
    float: left; /* cure IE5.x "whitespace in lists" problem */
    width: 100%;
    }
    #menu ul li a {
    height: 1%; /* make links honour display: block; properly */
    } 
    
    #menu a, #menu h2 {
    font: bold 0.7em/1.4em arial, helvetica, sans-serif; 
    /* if required use em's for IE as it won't resize pixels */
    } 
    </style>
    <![endif]-->
    A CSS file can only contain CSS comments and css styles. It cannot contain anything else such as html comments, conditional comments or style tags.

    Remove that block from your css file and place it in the head of your document. If you want to link to an IE only css file then add the link element inside the conditional comments inside the head of your document and after the original css file.

    e..g. Something like this
    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>CSS examples</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link href="pob/main.css" rel="stylesheet" type="text/css" />
    <!--[if IE ]>
    <link href="pob/iecss.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    </head>
    <body id="home">
    The second problem is that you have no doctype which puts ie7 into quirks mode and makes it behave more like ie5. Always use a full valid doctype (with uri) as shown in the above code taken from my site.

    If you follow the directions correctly then the menu should work in ie5. For ie6 you will need to add the necessary behaviour htc files etc.


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
  •