Tag: css

How to Add CSS & JavaScript to a Magento CMS Page

Magento is an insanely flexible system that has a lot of potential, but of course with this flexibility comes a lot of learning.

Adding a JavaScript file and a CSS file to a specific CMS page isn’t very difficult. We should always consider adding the JavaScript file or CSS file to the theme if we’re going to use it on more than one specific page. Continue reading

Centering a DIV Horizontally

Assuming you have a basic knowledge of css and html putting a div in the horizontal center of a containing block isn’t too difficult. I’m going to center a div with only text, but the exact same css may be used for a div containing images,inputs, etc. I’m going to assume you are using html or xhtml strict and have a div that has the following code:

<div id="toBeCentered">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</div>

All new web designers and developers assume that the css can simply be text-align:center; , but this isn’t correct because this centers the contents of the box instead of the box itself.

#toBeCentered {

To make the div center horizontally we need to ensure we do two things:

      Set a width to the div
      Set the left & right margins to auto. Web browsers are required to give the margins equal width which will set the div exactly in the center. works width.

We must instead change the css to auto the left and right margins and must set a size to the div. Setting a size to the div

#toBeCentered {
width: 200px;
margin-left: auto;

Hope this helps!

Browser Redirection – Yahoo Answers

I am having problems getting mozilla firefox to display my website correctly. It works fine on Internet Explorer. So I was thinking of making a mirror of the website that is made specifically for firefox browsers. Is it possible to code a website so that it detects what browser a visitor is using and them sends them to the correct mirror ?(i.e. index_firefox.html or index_ie.html)

Background Information
At the root of this question, there lies a huge problem that really never would have occured if browser creators followed the w3c recommendations. Microsoft and Netscape fought the original browser wars in the 1990s and throughout this time both created proprietary nonstandard tags and didn’t always follow the w3c recommendations. Eventually, Microsoft’s Internet Explorer won the war and Netscape disappeared into the oblivion to eventually become the Mozilla Project.

Mozilla Firefox, Opera, Safari and Chrome basically render almost exactly (99% of the time) the current w3c recommendations for css,html, and javscript and most of the draft recommendations are followed in the current builds of these browsers. Internet Explorer on the other hand, barely follows any of the w3c recommendations from even the year 2000. IE’s terrible rendering results in us having to perform significant testing and spend significant amounts of time doing IE6, IE7, and probably now IE8 hacks.

Problems With Potential Solution
I believe that redirecting based on a browser is a terrible idea, and should be avoided at all costs because of the potential doubling or trippling of work with regards to content.

Also, what happens if the browser doesn’t have javascript support of a user has turned it off? Chrome, Firefox,Opera, and Safari users would continue to be dished out a crap website that only works on some version of IE.

My Solution
Avoid the use of redirections for different browsers and instead developing a website that is 100% standards compliant and than start to add IE hacks as necessary.