SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Minified CSS breaks visibility settings

    In the css flyout menu on this site, under "About Me", when you rollover the submenu "Contact Us", the only menu that should appear is "Child of Contact Us".

    However, as you can see, the "Child of Awards & Honors" menu also appears.

    I've traced the problem to one space in my CSS below. The unminified CSS works fine. The problem only appears when the css is minified. Any ideas how to work around this?

    This works:

    Code:
    .menu.nav ul li:hover ul,.menu.nav ul a:hover ul,.menu.nav ul:hover ul :hover ul,.menu.nav ul:hover ul:hover ul :hover ul{ visibility: visible;}
    .menu.nav ul:hover ul ul,.menu.nav ul:hover ul:hover ul ul{ visibility: hidden; }
    This does not:
    Code:
    .menu.nav ul li:hover ul,.menu.nav ul a:hover ul,.menu.nav ul:hover ul:hover ul,.menu.nav ul:hover ul:hover ul :hover ul{ visibility: visible;}
    .menu.nav ul:hover ul ul,.menu.nav ul:hover ul:hover ul ul{ visibility: hidden; }
    Notice that when I remove the space before the 3rd ul :hover in the first line, that's when the CSS breaks down. Adding that space back, fixes the bug. However, my CSS minifier is set up to remove any spaces before : symbols.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    What's the site?
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  3. #3
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    What's the site?
    Sorry about that Ryan, I've just edited my post to add the site URL.

    As a workaround, I'm commenting out the line in my compression script which removes empty spaces that exist before colons:


    Code:
    function compress_scripts($buffer) {
    	/* remove comments */
    	$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
    	/* remove tabs, spaces, newlines, etc. */
    	$buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
    	$buffer = str_replace(array(' {','{ '), '{', $buffer);
    	$buffer = str_replace(array('; '), ';', $buffer);
    	$buffer = str_replace(array(': '), ':', $buffer);
    //	$buffer = str_replace(array(' :'), ':', $buffer); /* THIS BREAKS FLYOUT */
    	$buffer = str_replace(array(';}'), '}', $buffer);
    	$buffer = str_replace(array(', '), ',', $buffer);
    
    	return $buffer;
      }
    In CSS, Are these rules not equivalent?

    Code:
    .menu.nav ul :hover ul :hover ul
    Code:
    .menu.nav ul:hover ul:hover ul

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    No. In the first rule, any random element hovering (that is a child of that <ul>) will cause the rule to become actie.

    In the second rule, the <ul> NEEDS to be the element hovered. That space between the element and the pseudo class is crucial.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  5. #5
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    That space between the element and the pseudo class is crucial.
    I see. I'd have never guessed that otherwise. I suppose I can permanently remove that filter from my compression routine!

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,599
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Yep. Look at these two examples. The first has a space inbetween the :hover and the element in the CSS. ALTHOUGH, DO NOTE the additional <div> I had to add to MAKE it work. If you remove the <div>, it doesn't work.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
    
    
    
    <style>
    *{margin:0;padding:0;}
    li{background:red;width:200px;position:relative;}
    li li{background:blue;position:static}
    ul ul{position:absolute;margin-left:-999em;top:100%;left:0;}
    ul li :hover ul.dropdown{margin-left:0;}
    </style>
    
    
    
    </head>
    <body>
    <ul>
    <li><div><a href="#">text</a>
    <ul class="dropdown">
    <li>text</li>
    </ul>
    </li>
    </ul></div>
    </body>
    </html>
    Now look at it without hte added div, and the :hover used correctly.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
    
    
    
    <style>
    *{margin:0;padding:0;}
    li{background:red;width:200px;position:relative;}
    li li{background:blue;position:static}
    ul ul{position:absolute;margin-left:-999em;top:100%;left:0;}
    ul li:hover ul.dropdown{margin-left:0;}
    </style>
    
    
    
    </head>
    <body>
    <ul>
    <li><a href="#">text</a>
    <ul class="dropdown">
    <li>text</li>
    </ul>
    </li>
    </ul>
    </body>
    </html>
    Always looking for web design/development work. Willing to do it cheap to build portfolio!


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
  •