SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot YAHA's Avatar
    Join Date
    Jan 2008
    MD, US
    0 Post(s)
    0 Thread(s)
    it worked fine in my opera. didnt work in ie 7.
    i took a menu from this site 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
    Hampshire UK
    183 Post(s)
    6 Thread(s)
    The re are 2 main problems and the first is that you have included the conditional comments in your css file.

         <!--[if IE]>
    <style type="text/css" media="screen">
    body {
    behavior: url(; /* 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 */
    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
         <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
    <html xmlns="">
    <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" />
    <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.


Posting Permissions

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