Minified CSS breaks visibility settings

HTML & CSS
1

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:

.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:

.menu.nav ul li:hover ul,.menu.nav ul a:hover ul,.menu.nav ul:hover [B][COLOR="#FF0000"]ul:hover[/COLOR][/B] 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

What’s the site?

3

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:

function compress_scripts($buffer) {
	/* remove comments */
	$buffer = preg_replace('!/\\*[^*]*\\*+([^/][^*]*\\*+)*/!', '', $buffer);
	/* remove tabs, spaces, newlines, etc. */
	$buffer = str_replace(array("\\r\
", "\\r", "\
", "\	", '  ', '    ', '    '), '', $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?

.menu.nav ul :hover ul :hover ul

.menu.nav ul:hover ul:hover ul
4

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.

5

I see. I’d have never guessed that otherwise. I suppose I can permanently remove that filter from my compression routine!

6

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.

<!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.

<!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>