Please login or register.

Login with username, password and session length
Advanced search  

Author Topic: Liquid Silver new version  (Read 1766 times)

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Liquid Silver new version
« on: November 01, 2010, 10:05:16 PM »

Self promotion is always fun, so I'm going to promote the new version of the Liquid Silver Creative Studio website here. It's built with HTML5, CSS3 and jQuery, it uses a healthy dose of goodies from the HTML5 Boilerplate to make it more snappy and cross-browserly, as well as a few nice webfonts served with @font-face. As with the new issue of Inkpattern, I've submitted the design to Web Font Awards -more for fun than anything else- and you can comment and vote here: http://www.webfontawards.com/gallery/liquid-silver-creative-studio

The website itself lives at http://liquidsilver.eu/
Among other special details it sports a shiny sNews 1.7 backend with lots of modifications. Like threaded comments. In case you want to comment... 8)
Logged

pearjam

  • Full Member
  • ***
  • Karma: 14
  • Posts: 152
Re: Liquid Silver new version
« Reply #1 on: November 01, 2010, 11:25:09 PM »

I like how some of your sites are non-traditional with search and crumbs placement, looks good!   :)
Logged
....I must go, for I am their leader - and they have gone.

Patric Ahlqvist

  • Nobodys perfect, but Im pretty effing close
  • ULTIMATE member
  • ******
  • Karma: 65
  • Posts: 4867
  • “I'm a self-made man and worships my creator.”
    • p-ahlqvist.com
Re: Liquid Silver new version
« Reply #2 on: November 02, 2010, 02:52:26 PM »

Fucked up in IE 7 (at work - No CSS)
Logged
My sNews site
"It's only dead fish that goes with the flow... "
Updated, online again - Free designs

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: Liquid Silver new version
« Reply #3 on: November 02, 2010, 03:44:58 PM »

Sorry Pat. IE7 is not supported, just like other older-generation browsers. No offense intended, it's just how it is. I'll just quote the blurb on the about page:

Quote
it’s built with standards compliant HTML5, CSS3 and it uses the jQuery javascript library for a number of functions. This means that a modern web browser, used on a modern operating system, is required. We recommend the latest versions of Safari, Firefox, Chrome and IE on Mac OS X 10.4 (or later) or Windows 7.

Supporting browsers of more than two generations back requires more work than it's worth when it comes to HTML5/CSS3 constructions. Since my stats indicate a *very low* percentage of IE7 (or older) use, there was no real incentive to include such support. Again, sorry, but that's how it is. tell your IT department it needs to upgrade... ;)
(That said, I don't fully understand how there could be *no* CSS in IE7, but that's a different story...)
Logged

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: Liquid Silver new version
« Reply #4 on: November 02, 2010, 03:56:31 PM »

It displays nicely under IE... locally.
I just saved the page and, as on online, I couldn’t be able to see the page correctly.
Now it works.
I have the CCS laoding and the HTML5 tags recognized.
I just had to paste the shiva’s script in the head:
Code: [Select]
<script>// html5shiv MIT @rem remysharp.com/html5-enabling-script
// iepp v1.6.2 MIT @jon_neal iecss.com/print-protector
/*@cc_on(function(m,c){var z="abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video";function n(d){for(var a=-1;++a<o;)d.createElement(i[a])}function p(d,a){for(var e=-1,b=d.length,j,q=[];++e<b;){j=d[e];if((a=j.media||a)!="screen")q.push(p(j.imports,a),j.cssText)}return q.join("")}var g=c.createElement("div");g.innerHTML="<z>i</z>";if(g.childNodes.length!==1){var i=z.split("|"),o=i.length,s=RegExp("(^|\\s)("+z+")",
"gi"),t=RegExp("<(/*)("+z+")","gi"),u=RegExp("(^|[^\\n]*?\\s)("+z+")([^\\n]*)({[\\n\\w\\W]*?})","gi"),r=c.createDocumentFragment(),k=c.documentElement;g=k.firstChild;var h=c.createElement("body"),l=c.createElement("style"),f;n(c);n(r);g.insertBefore(l,
g.firstChild);l.media="print";m.attachEvent("onbeforeprint",function(){var d=-1,a=p(c.styleSheets,"all"),e=[],b;for(f=f||c.body;(b=u.exec(a))!=null;)e.push((b[1]+b[2]+b[3]).replace(s,"$1.iepp_$2")+b[4]);for(l.styleSheet.cssText=e.join("\n");++d<o;){a=c.getElementsByTagName(i[d]);e=a.length;for(b=-1;++b<e;)if(a[b].className.indexOf("iepp_")<0)a[b].className+=" iepp_"+i[d]}r.appendChild(f);k.appendChild(h);h.className=f.className;h.innerHTML=f.innerHTML.replace(t,"<$1font")});m.attachEvent("onafterprint",
function(){h.innerHTML="";k.removeChild(h);k.appendChild(f);l.styleSheet.cssText=""})}})(this,document);@*/</script>
and, tada! IE users are happy too.
 ;D
Viva Liquid Silver!
A karma for my friend waiter please...

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: Liquid Silver new version
« Reply #5 on: November 02, 2010, 04:03:50 PM »

Aha! Thank you m'sieu l'Inspecteur, I think I know what the issue is then. And if I'm right it should be fixed now.
(If I'm wrong, well, then I'm wrong. :D)
Logged

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca
Re: Liquid Silver new version
« Reply #6 on: November 02, 2010, 04:38:58 PM »

Aha! Thank you m'sieu l'Inspecteur, I think I know what the issue is then. And if I'm right it should be fixed now.
(If I'm wrong, well, then I'm wrong. :D)

At this point in time... on my clock... the link(s) give me a blank, white page in IE7 (no, I am not upgrading IE to the next level(s) as I am getting tired of doing so... at least for the time being). Looks great with the Fox tho.  8)
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

Rui Mendes

  • Development,Testing, Support
  • Hero Member
  • *****
  • Karma: 195
  • Posts: 1009
  • sNews1.7
    • Comunidade Portuguesa
Re: Liquid Silver new version
« Reply #7 on: November 02, 2010, 08:31:24 PM »

With IE8 I can not see too.
With Flock browser I can see perfetly
I like very much, congrats

Fred I don't know if you know, but there is code, and I use on my cms and works perfectly
Quote
<!--[if IE]>
<script>
   document.createElement('header');
   document.createElement('nav');
   document.createElement('section');
   document.createElement('article');
   document.createElement('aside');
   document.createElement('footer');
   document.createElement('hgroup');
</script>
<![endif]-->
« Last Edit: November 02, 2010, 08:33:15 PM by Rui Mendes »
Logged
Need a Job on Europe. Linkdin - Facebook / Group

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: Liquid Silver new version
« Reply #8 on: November 02, 2010, 11:29:35 PM »

Thanks for the reports Doug & Rui. I've been over the code a few times and narrowed the IE problem down to this bit in the .htaccess which forces IE into edge/chrome mode.
Code: [Select]
# Force the latest IE version, in various cases when it may fall back to IE7 mode
# github.com/rails/rails/commit/123eb25#commitcomment-118920
# Use ChromeFrame if it's installed for a better experience for the poor IE folk
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
</IfModule>
</IfModule>

That code was pulled from the HTML5 Boilerplate. I'm actually not sure that it's the root of the problem, but it is the only new IE-specific code I'm using, compared to other sites I've built. I've used the HTML5 shiv from google many times before, as well as various other conditionals without problems. This bit was new though. I've pulled it for the time being and also changed the base href line for IE, hoping that will improve things for you (IE) guys...

Rui, the code you suggested is more or less the same as the Google HTML5 shiv, which is already in use, except yours is missing a bunch of HTML5 elements (it's an aside, but anyway, yours is missing things like mark, time, details, summary, figure, figcaption, etc). Thanks anyway though.

Edit: Think I've found the issue ... I noticed that my 1st gen iPod Touch wouldn't load the site either sostarting looking more in detail at the head code and found one missing quote mark, on the charset declaration. I think that could be it. If so it has nothing to do with bleeding edge or IE at all, just sheer stupidity (or poor proof reading, whichever is more likely). Sorry. If indeed that was the cause. (The site loads fine on the iPod now, so, here's hoping...)
« Last Edit: November 03, 2010, 12:01:46 AM by Fred K (agentsmith) »
Logged