Magento Tweaks
How to use multiple CSS style sheets and create a website that is balanced on every browser.
Designing on the web would be a lot easier if we could get our browsers to all do the same thing.
As a web developer for Corporate Gifts Co, my duties involve me working around Magento, marketing new products and keeping up to drift with some of the other companies out there that are selling corporate, business and promotional gifts.
Our website is constantly being developed, to give the right balance of service, usability, and business. All of which is needed in a continual cycle, which needs to be monitored and updated to keep in line with trade, and building social awareness and customer trust. I say this because loyalty is fundamental to reputation, recommendation and recognition.
With all that said, it leads me to my next sentence, the once about the new search bar plugin we installed to the Corporate Giftware site last week through Magento. It’s an all singing, all dancing algorithm, bulked in to the Magento hardware right from the off, part of that kit which is ever so complex, but yet all too nice on you too, if all you do is shop.
My dilemma was that, first of all, was what to do with that, the positioning of the search bar. It was out of place; in fact the whole header to the home page had disastrously gone everywhere, it was all over the monitor. Not a good look for a top ranked Corporate Gifts company, the google ranked number 1! This I had to tidy, and so by using the header file and styles.css I lead my homepage into a pen and rounded up all of the loose flock. Putting all of the php queries from the top of the page into 1 single container, named “header”, solved this issue out for me. It will do for now, as my edit, meant, that items did not now sit freely, which can be a problem, don’t even ask me how this will now look when it appears on a mobile device.
Conditional HTML Classes seem to be a way forward. As most of my issues are browser related and would be coming from the direction of IE (as it is always) here is a tidy solution you can now play with and put into your HTML tag, right at the top of your webpage.
<!--[if lt IE 7 ]> <html> <![endif]--> <!--[if IE 7 ]> <html> <![endif]--> <!--[if IE 8 ]> <html> <![endif]--> <!--[if IE 9 ]> <html> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
————————————————————————————————————————————-
It is a hack for browser compatibility with Internet Explorer 9 or older. Once you have pasted this then you are good to go.
Well, actually you are still yet to style up any CSS in your “Styles.CSS” files. Working with your CSS open, select a style rule and separate a html class for each of the different niggling back copied, outdated, irritating editions of Internet Explorer that you need to get a grip with.
Here is an example of the CSS:
.box { background: gray; }
.ie6.box { background: blue; }
.ie7.box { background:green; }
.ie8.box { background: red; }
.ie9.box { background:black; }That ought to be a sure fire way of keeping the rules within 1 file and so you don’t have to worry about changing several files on Magento, which trust me, is not the way you want to do things when working with a Content Management System. Magento is like other CMSes like WordPress and Drupal which use the body classes more heavily. This makes this way integrating with the software a touch simpler.
Other points to make out is that this does not validate in HTML4, it only uses HTML5, so learn to live with this, and also in noticing that this is a hack, it is a pretty plain that it is still a bad way to develop your site in the long run, as you should develop things like this to work with internet explorer from the start. I just got lazy this week and needed a quick turnaround.