CSS error exposed by htmlunit #282

Closed
simoami opened this Issue Oct 1, 2012 · 4 comments

Comments

Projects
None yet
3 participants
@simoami

simoami commented Oct 1, 2012

in jasmine.css, line 12:

#HTMLReporter .symbolSummary { overflow: hidden; *zoom: 1; margin: 14px 0; }

notice the "*zoom", which should just be "zoom".

htmlunit reports the warning as well:

Aug 17, 2012 1:12:32 AM com.gargoylesoftware.htmlunit.DefaultCssErrorHandler error
WARNING: CSS error: [12:52] Error in style rule. Invalid token "*". Was expecting one of: , "}", ";", .
Aug 17, 2012 1:12:32 AM com.gargoylesoftware.htmlunit.DefaultCssErrorHandler warning
WARNING: CSS warning: [12:52] Ignoring the following declarations in this rule.

@simoami simoami closed this Oct 1, 2012

@simoami simoami reopened this Oct 1, 2012

@ragaskar

This comment has been minimized.

Show comment Hide comment
@ragaskar

ragaskar Oct 6, 2012

Contributor

This is an IE hack. It's ugly, but sorry for the warnings. Thanks!

Contributor

ragaskar commented Oct 6, 2012

This is an IE hack. It's ugly, but sorry for the warnings. Thanks!

@ragaskar ragaskar closed this Oct 6, 2012

@simoami

This comment has been minimized.

Show comment Hide comment
@simoami

simoami Feb 10, 2013

@ragaskar
Sorry to persist on the subject. But since the "ie star hack" causes warning in other engines, why not use one of the following methods:

  1. IE's specific conditional comments: <!--[if lte IE 7]>
  2. Add CSS classes to the body tag to denote the current IE version. With this approach, your CSS class definitions are cleaner:
#HTMLReporter .symbolSummary { overflow: hidden; margin: 14px 0; }
.isIE6 #HTMLReporter .symbolSummary, .isIE7 #HTMLReporter .symbolSummary,  { zoom: 1; }

simoami commented Feb 10, 2013

@ragaskar
Sorry to persist on the subject. But since the "ie star hack" causes warning in other engines, why not use one of the following methods:

  1. IE's specific conditional comments: <!--[if lte IE 7]>
  2. Add CSS classes to the body tag to denote the current IE version. With this approach, your CSS class definitions are cleaner:
#HTMLReporter .symbolSummary { overflow: hidden; margin: 14px 0; }
.isIE6 #HTMLReporter .symbolSummary, .isIE7 #HTMLReporter .symbolSummary,  { zoom: 1; }
@joshuacc

This comment has been minimized.

Show comment Hide comment
@joshuacc

joshuacc Feb 10, 2013

I'd recommend using the approach from HTML5 Boilerplate. It uses conditional comments to set a class on the html element, which you can then use in your IE specific css.

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

I'd recommend using the approach from HTML5 Boilerplate. It uses conditional comments to set a class on the html element, which you can then use in your IE specific css.

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
@simoami

This comment has been minimized.

Show comment Hide comment
@simoami

simoami Feb 10, 2013

Thanks for the example. It's inline with my second approach. Can anyone reopen the issue and look at the proposed solution?

simoami commented Feb 10, 2013

Thanks for the example. It's inline with my second approach. Can anyone reopen the issue and look at the proposed solution?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment