DIV problem and hovering submit button

[Guest rukiman]

Please take a look at http://www.intimatewear.com.au/index.php

CSS is http://www.intimatewear.com.au/skins/Intim...heets/style.css

I am using a drop shadow CSS feature I came across the net to create the drop shadow effect on the images. However, as you can see the text is now appearing on the right hand side. It should been underneath the images.

The same story happens here

http://www.intimatewear.com.au/test-catego...uct/prod_2.html

All the content should appear after the image not before.

How can I fix this?

Secondly,

Any pointers to making the submit buttons change color while hovering I have seen this covered somewhere before.

p.s I have a designers block if you can suggest what would be great for all the buttons in the website that would be great! The gray looks a bit boring atm.

Thanks!!

[Guest Ija]

Question 1 :

Because .img-shadow has float:left;

So it's being flushed to the left side

Question 2 :

a.txtviewCart:hover {

/*background-color: #CB8F73;*/

color: #FFFFFF;

Why is the bgcolor being commented out?

As for 'Add to Basket', your a.txtButton:hover background-color is the same as a.txtButton

Question 3 :

I have exactly the same colour scheme! Am using orange. Check out my store - link @ siggy

[Guest rukiman]

Ija I like your orange buttons, I'll make mine the same colour.

Oh I haven't finished hovering the buttons. I know how to do them for image buttons but hadn't got round to fixing them because I couldn't decide on a color for them. What I meant was how can I make the form submit button hover i.e like the button next to the search I have seen it documented somewhere on the net before.

If I remove the float:left my drop shadow stuffs up. How can I fix it and still retain the drop shadows? (without modifying any images to have drop shadows). So close but still far away....

[Guest Ija]

Well ive tried around and you can try this

under content/index.tpl

Change

    <br />

    <a href="index.php?act=viewProd&amp;productId={VAL_PRODUCT_ID}" class="txtProduct">{VAL_PRODUCT_NAME}</a>

    <br /><span class="txtProduct">{TXT_PRICE} </span><br /><span class="txtSale">{TXT_SALE_PRICE}</span>

to

<div style="float: left; text-align:center; clear:both;">

    <br />

    <a href="index.php?act=viewProd&amp;productId={VAL_PRODUCT_ID}" class="txtProduct">{VAL_PRODUCT_NAME}</a>

    <br /><span class="txtProduct">{TXT_PRICE} </span><br /><span class="txtSale">{TXT_SALE_PRICE}</span>

    </div>

It's not perfect, but you can play with the text-align: value

[Guest Ija]

Doh my mistake..

You can just use

<div style="text-align:left; clear:both;">

without float for the first line

[Guest rukiman]

Ija, Thanks a lot for that!

I now have the text appearing where I want it. However it is hardcoded with a margin-left to make it appear where it is. If the image size changes unfortunately it will look out of place again. I think I know what the real problem is.

The real problem is that the thumbnail is NOT centered. This is obvious in the products page, click on one of the latest products to go to the product page where I have done the same thing.

So question is how can I center the image?

Thanks so much for your help.

[Guest Ija]

I tried centering the image and it works like this

Pick one :

1) Drop shadow

or

2) Centered thumbnail

You cant have it both ways B)

[Guest rukiman]

Can I have it with a drop shadow and centered

It looks pretty ordinary without the dropshadow it really does. I'll keep at it....hopefully I can find a solution. Thanks very much for your help

[Guest rukiman]

Ija, after tearing my hair apart I posted my question on the experts exchange forum and got a solution to the problem. See my website it works well now. Getting there with those buttons someone said it didn't fit the theme so will be experimenting.