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 https://www.ecommercetemplates.com/help/css.asp

An example with moving the buy button

Open 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 fails

Sometimes 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 templates

View the latest ECT newsletter


Follow us on Twitter and Facebook

I saw a video by Adobe where they demonstrated the new Inspect mode in Dreamweaver CS5. Basically, you move your mouse over a section of the page and the relevant CSS highlights in a second window. It looked pretty good.

The other option that I find really useful is the Firebug extension for Firefox https://addons.mozilla.org/en-US/firefox/addon/1843/. It has a similar inspect mode. In fact, Firebug had this before Dreamweaver CS5.

CVW Web Design
www.cvwdesign.co.uk | web design, web hosting and ecommerce templates
www.cvwdesign.com | web design blog
www.kmeliteproducts.co.uk and www.toysandlearning.co.uk | websites built with ecommerce templates

The Developer Toolbar has something similar CSS > View Style Information and the tags and classes will show in a new Toolbar.

I used to use Firebug but had to remove it as it was causing Firefox to crash, I should take a second look.

Andy

Ecommerce templates

View the latest ECT newsletter


Follow us on Twitter and Facebook

Well, I never knew that about the Web Developer extension! Have used it loads but missed View Style Information. *facepalm*

CVW Web Design
www.cvwdesign.co.uk | web design, web hosting and ecommerce templates
www.cvwdesign.com | web design blog
www.kmeliteproducts.co.uk and www.toysandlearning.co.uk | websites built with ecommerce templates

Stylizer by Skybound is a handy tool that I use quite regularly to help with CSS design... There are 2 versions, a free version and a paid all singing all dancing version (there is a 14 day free trial for this also!)... you can download it here -> http://www.skybound.ca/

Having said that, we have just invested in Dreamweaver CS5 - the new CSS inspection feature is genius and the new BrowserLab offering is superb for ensuring that your site is viewed in exactly the same way across multiple browsers - well worth the money for sure.

Steve.

StevieP

Hi Steve

That looks very interesting, I'm going to have a play around when time permits.

Andy

Ecommerce templates

View the latest ECT newsletter


Follow us on Twitter and Facebook

Here's another handy utility http://www.cleancss.com/ to optimize your css.

Andy

Ecommerce templates

ECT newsletter


Follow us on Twitter and Facebook

Here's a video tutorial on tweaking the css file and previewing it in Firefox without the changes going live until you are ready

http://www.youtube.com/watch?v=Xn1rM5JcOhM

Requires Firefox with the Developer Toolbar installed https://addons.mozilla.org/en-US/firefox/addon/web-developer/

Andy

Ecommerce templates

ECT newsletter


Follow us on Twitter and Facebook