 Posted - 05/21/2010 : 03:57:46
Lots of questions on the forums about css so I thought it'd be handy to explain one method of troubleshooting issues on a page which are css related. You'll need to be using Firefox with the Web Developer add-on installed https://addons.mozilla.org/en-US/firefox/addon/60/ and have the css classes list handy http://www.ecommercetemplates.com/help/css.asp An example with moving the buy buttonOpen your page in Firefox, view source (Ctrl+U) and choose "Find" (Ctrl+F) and enter buy.gif and that should locate the line <input type="image" src="images/buy.gif" alt="Add to cart" class="buybutton" /> That will give you the class (buybutton) that corresponds to the element we are trying to modify. Now select the CSS icon in the Web Developer toolbar and select "Edit CSS" (Ctrl+Shift+E). The css associated with the page will now appear in a panel on the left hand side of the page. Type in your new css class eg .buybutton{ padding-top: 10px; } This will allow you to preview in your page what effect the modification has caused. When you're happy with the result, copy the css into your css file and upload it to the server. Troubleshooting css when all else failsSometimes you can spend an age trying to find why something is just not appearing quite right on your page, and when all else fails this is what I do. Open the page in Firefox, choose Edit CSS from the Developer Toolbar and then class by class in the css file do a Copy + Cut. If it doesn't effect the section of the page I'm interested in, paste the css back in and move on to the next class. Go through the css file til you find the correct class, and then go line by line in that class to narrow down the problem. If you have any other tips, please feel free to share them. Andy Ecommerce templatesView the latest ECT newsletterCheck out our regular templatesFollow us on Twitter and Facebook | 
Troubleshooting css