ahallicks
11-23-2006, 09:55 AM
Apologies if this has already been created and/or there is an existing help page for designers who use Firefox Addons, but I thought I'd create a nice little helpful guide to easier creation and manipulation of web pages for you budding designers out there :)
A little tip. When you can't understand why something does not look right, or there are extra little gaps displaying where you don't want them too, particularly in Firefox? Why not get the colorZilla (https://addons.mozilla.org/firefox/271/) add-on and mix it with the EditCSS (https://addons.mozilla.org/firefox/179/). When you click on the newly installed eye dropper (found in the bottom left of the Firefox window) and move it over the page it will highlight each individual div you have created with a small red dotted border so you can see where each div is being placed on the page, as well as showing you the color values and page position of the divs, AND whether they are ID's or classes etc. That way if something has the wrong width, or height or is not in the right place you can more easily see why.
For IE create a 1px red border around everything to see where they are being placed and what size they are showing at. This doesn't work in firefox because the 1px pushes everything around but seems to work fine in IE.
I definitely recommend getting the color/EditCSS mix tho because it becomes invaluable to designers of web pages with CSS as you can see on the live site where the browser is placing your divs and spans and other content/styling.
I also recommend getting the IETab (https://addons.mozilla.org/firefox/1419/) addon for Firefox as it saves you having to use two browsers and simply renders the way IE would in the Firefox Window :)
A little tip. When you can't understand why something does not look right, or there are extra little gaps displaying where you don't want them too, particularly in Firefox? Why not get the colorZilla (https://addons.mozilla.org/firefox/271/) add-on and mix it with the EditCSS (https://addons.mozilla.org/firefox/179/). When you click on the newly installed eye dropper (found in the bottom left of the Firefox window) and move it over the page it will highlight each individual div you have created with a small red dotted border so you can see where each div is being placed on the page, as well as showing you the color values and page position of the divs, AND whether they are ID's or classes etc. That way if something has the wrong width, or height or is not in the right place you can more easily see why.
For IE create a 1px red border around everything to see where they are being placed and what size they are showing at. This doesn't work in firefox because the 1px pushes everything around but seems to work fine in IE.
I definitely recommend getting the color/EditCSS mix tho because it becomes invaluable to designers of web pages with CSS as you can see on the live site where the browser is placing your divs and spans and other content/styling.
I also recommend getting the IETab (https://addons.mozilla.org/firefox/1419/) addon for Firefox as it saves you having to use two browsers and simply renders the way IE would in the Firefox Window :)