Tidying up messy css.

[schoolboy]

Hi guys,

I'm trying to edit my css files so that the side boxes on the left look cleaner or at least allow the writing to fit. unfortunately I have no idea what em means or looks like in terms of size unlike px.

"EM" and "EN" are printers' terminology and relate to the width of the letter " M " (em), and " N " (en).

The widths are therefore RELATIVE to the size of the font.

The advantage of using these is that widths and sizes SCALE with an increase or decrease in the governing (parent) font size, thus retaining visual integrity if the font is made bigger or smaller - whereas PX is FIXED.

There is no rule that says you can't change your size parameters from EM to PX if you want to. I do it often.

[vvomble]

right so which bit do i need to edit to get it to fit?

[schoolboy]

You don't edit the CSS.

ADMIN CONSOLE >>> CONFIGURATION >>> LAYOUT SETTINGS...

Column Width - Left Boxes (set the desired width in PX)
... and a bit further down...
Column Width - Left (set the desired width in PX - I usually keep it the same as the Left Boxes)

[schoolboy]

Bad idea to use uppercase wording on a website - google regards this as "shouting" and severely penalises you for seo...

[schoolboy]

Use firefox browser, then go get the FIREBUG plugin. This enables offline page analysis, so you can then easily identify the components of a page and test out CSS (and other) changes, before committing these changes to a live site.

[schoolboy]

Your HEADER is also ridiculously BIG... It uses up important "above-the-fold" space that is better served showcasing PRODUCT.

Nobody cares how "proud" you are of your massive logo ( or ego ) so reduce it by at least 80% and give the space over to product pictures and descriptions.

[schoolboy]

AMAZON'S site logo is just 30 pixels tall...

[schoolboy]

If you don't want a RIGHT COLUMN, switch it OFF in Admin Console...

ADMIN CONSOLE >>> CONFIGURATION >>> LAYOUT SETTINGS...
Column Right Status - Global = set to ZERO

[gjh42]

stylesheet_betterCategoriesEzInfo.css, around line 12:

.betterCategories a, .betterCategories a:visited,
.betterDocuments a, .betterDocuments a:visited,
.betterEzpages a, .betterEzpages a:visited,
.betterInformation a, .betterInformation a:visited,
.betterMoreinformation a, .betterMoreinformation a:visited,
.betterBestsellers a, .betterBestsellers a:visited {
	display: block;
	background-color: #fffffe;
	border-top: 2px solid #ffffff;
border-bottom:2px dotted #b5b5b5;
	padding: 4px;
	font-size: 0.9em;

}

Add the line in red, and adjust to taste.


I think this is the wrong issue to solve, however; making the text smaller makes it harder to read. You do not appear to be using the right sideboxes at all, and if you turn off the right sidebar, you can make the left sidebar wider without sacrificing font size or main content area.
Admin > Configuration > Layout Settings >
Column Right Status - Global
Column Left Width
Column Left Boxes Width.

[PetleyJ]

Just looking at your site gives me a headache. Smaller header is ideal.