center product title on sub-section 'thumbnails' type page

[LouPhi]

I've created a page of thumbnails (plus more) as sub-sections, however the product titles aren't centered - despite the class having a text-align: center on it.

An example is at http://trials.actinic.com/trials/tri...h_softtoys.htm

The images are centred, the price, and the 'view' button are all centred, but the product title is left-justified for some reason??

Any ideas?

[leehack]

Looks like you have proper borked the code, instead of stuffing inline styles, look to what controls that text and what it is (i.e. a heading). If it has a class applied to it then adjust that. It will be using h3 class="product" i expect, so style that. If you want the whole thing centred including the images, then get rid of the double float: left; you have added, remove the inner container that is doing nothing and simply centre the content in the container instead.

[LouPhi]

Borked? Possibly...! Probably...! But I've created 'new' layouts based on other existing ones...

What do you mean by 'stuffing inline styles'? and 'double float: left'? I don't recall adding any inline styles or 'float left' anywhere, is it possible these were in the code pasted from the Advanced User Manual (there is a disclaimer saying that Actinic aren't responsible as it was provided by an online user?)

I AM using h3.product, and this also has a text-align: center:

h3.product	{
	font-size: <actinic:variable name="LargerFontSize" />;
	font-weight: 900;
	margin: 0px;
	padding: 0px 0px 0px 0px;	
	text-align: center;
	}

I don't understand why the DIV class I created (prodSelect) can't control this content and the way its laid out..... Actinic appears to be overriding my style and I just don't see why????????

[leehack]

Get yourself firefox and firebug (they're free) it will help you to see the code and see the broken inline styles etc. Click on 'inspect' and then hover over the areas. The one area where it was most important to centre it, was not styled at all from memory. You have contrasting styles and too much of it to do what you want, you can slim it right down.

[LouPhi]

Thanks Lee, I already use Firefox, so I'm downloading Firebug add-on now so I can try to work it out for myself....

I appreciate your help...
Thanks
Lou

[LouPhi]

Have checked in Firebug, and it wants me to remove

body {
text-align: center;
}

Which I added because my auto-centred content was aligning left in Internet Explorer (in fact it was an Actinic Forum member who recommended me to add this to the body tag), which worked. If I remove it, my centred content (the 'wrapper DIV' which centres the 800pixel wide content area on the background) aligns left in Internet Explorer....

I'm really starting to go round in circles a bit...... Have you any advice as to either getting around keeping the body { text-align: center } or getting rid of it, and doing something else to center my wrapper DIV in IE...???

Thanks

[leehack]

You need to focus on the styling of the local area with the problem, why are you looking as high up as the body tag? that would set alignment for the whole site, concentrate just on the areas that need to be changed. If you click on inspect and then hover over the offending areas, it will show you the classes styling that part on the right hand side and it also tells you in which css file they are. Those are your target. You should also see broken ' inline style' tags and a null variable too IIRC.

Your prod select div had no different styles to what the next div inside it did, so what is the point of it was what i was saying. I'd revert it back to factory settings, get it working and then approach it methodically, adding center tags to every place you can, simply isnt the way to do things properly.