Jump to content

CSS, Browser Compatibilty, Joomla


Recommended Posts

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));}

post-95149-0-14881100-1334232227_thumb.jpg

post-95149-0-72540900-1334232766_thumb.jpg

Link to post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...