si70 Posted April 12, 2012 Share Posted April 12, 2012 Sorry if this may have been answered before but I could really do with a specific answer to a specific set of circumstances. I am very new to anything other than basic css.The best way to describe what I mean would be to look at the site in various browsers. http://www.livingwithaddicts.com/ .I have put this together for a charity using the Joomla CMS (version2.5). If you look at the site in Firefox it is as (for now as it ain't finished) how it's meant to look. It's fine in Chrome and passable apart from some easily solvable positioning issues in Opera. Then we get to IE and I have just added background:#485fc5; to get it to render partly as i wanted and will do the same to get the bg on the forms. I would like to explore some other ways of styling so it looks acceptable in IE. I don't want to go down the route of replacing gradients or text shadowing with graphics. Is there away of having a set of CSS that is only called if someone views in IE? If so how can I do this? Is this what's known as a hack? Other possibilities are that as I am using Joomla, I have had to put some inline styling into specific content and I think some of the generated code might either be depracated and/or a bit messy. Would this affect how it renders. Also I hurriedly (lazily) c& p'ed a chunk of css and modified the hex values to incorporate it in my existing css.(To anyone now sighing with disapproval, I apologize) This may not be the up to date syntax and I only heard of webkit the other day so that's what a novice I am. I will paste it here and hopefully not embarrass myself to much. If anyone fancies a look (or a laugh) then please do. I would really appreciate any advice. Here's the the code. I will attach screenshots to demonstratebody { background: #485fc5; background-image: linear-gradient(bottom, #485fc5 13%, #6e86ee 57%, #a0b0f5 79%); background-image: -o-linear-gradient(bottom, #485fc5 13%, #6e86ee 57%, #a0b0f5 79%); background-image: -moz-linear-gradient(bottom, #485fc5 13%,#6e86ee 57%, #a0b0f5 79%); background-image: -webkit-linear-gradient(bottom, #485fc5 13%,#6e86ee 57%, #a0b0f5 79%); background-image: -ms-linear-gradient(bottom, #485fc5 13%, #6e86ee 57%, #a0b0f5 79%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.13, #485fc5), color-stop(0.57, #6e86ee), color-stop(0.79, #a0b0f5));} Link to comment Share on other sites More sharing options...
dsonesuk Posted April 12, 2012 Share Posted April 12, 2012 point to IE_old.css if version less than 9 <!--[if lt IE 9]><link rel="stylesheet" href="http://www.example.com/templates/my_theme/css/IE_old.css" type="text/css" /><![endif]--> Then in IE_old.css add the styling you HAVE to use for c-r-a-p-p-y IE, as a alternative to css3, that these versions don't support, you could use this method to show message 'IF you MUST use IE... gees, then use IE version 9" Link to comment Share on other sites More sharing options...
si70 Posted April 12, 2012 Author Share Posted April 12, 2012 Thanks so much for that. Do i just change to the relevant path and put that in the head of the document, is it that simple. Why the comment outs? Link to comment Share on other sites More sharing options...
dsonesuk Posted April 12, 2012 Share Posted April 12, 2012 That is the format used to create these conditional comments, and yes! you just add this to the <head> ..</head> of the document. Link to comment Share on other sites More sharing options...
si70 Posted April 12, 2012 Author Share Posted April 12, 2012 That does make sense only with Joomla the head of the document looks like this. I have highlighted the array containing the css files in red. If I am right then would I just add it as I have here highlighted in green. Thanks again Si <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $gantry->language; ?>" lang="<?php echo $gantry->language;?>" ><head> <?php $gantry->displayHead(); $gantry->addStyles(array('template.css','joomla.css','style.css','typography.css','custom.css' 'IE_alternativefornumtys.css')); ?></head> Link to comment Share on other sites More sharing options...
dsonesuk Posted April 12, 2012 Share Posted April 12, 2012 That depends, if that just adds a link to alternative css file for IE less than 9 without! the conditional comments all browsers will adopt css styling, you need the conditional comment to only apply this style link to browsers NOT IE, but only IE browsers less than nine. Link to comment Share on other sites More sharing options...
si70 Posted April 12, 2012 Author Share Posted April 12, 2012 So the question then must be, how do I include the conditional comments in the array? Knowing very little about php I don't know! Do you? This stuff drives me demented sometimes, when I get a result I will post it. In the mean time have you heard of CSS3 PIE. Someone on another forum sent me a link. Heres an example of how to do stripes apparently. Thanks again for your help. Si <p class="pie_first-child pie_hover pie_active" id="page"> background-size: 50px 50px;background-color: #0ae;background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);background-image: -ms-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);-pie-background: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent) 0 0 / 50px #0ae;behavior: url(/PIE.htc); Link to comment Share on other sites More sharing options...
dsonesuk Posted April 12, 2012 Share Posted April 12, 2012 You could try applying the ie style sheet separately within the conditional comment <?php$gantry->displayHead(); $gantry->addStyles(array('template.css','joomla.css','style.css','typography.css','custom.css'));?> <!--[if lt IE 9]><?php$gantry->addStyles(array($gantry->addStyles(array('IE_alternativefornumtys.css')));?><![endif]--> Link to comment Share on other sites More sharing options...
si70 Posted April 14, 2012 Author Share Posted April 14, 2012 Cheers for that! Easy when you know how. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.