image rollover issue

[darryncooke]

I am trying to make a liquid display with 3 images making the primary banner.

http://www.darryncooke.com/dcnew/

If i set those 3 images as relative with a float left then they work fine pre-rollover. By fine I mean they retain their min-width properties and everthing looks good. However on hover they push the other 2 out of the way and mess up the layout.

So i changed to absolute and this works perfect for the rollover except the min-width is being ignored. I am placing the second image at 33.33% from left and the last one 66.66%. I know this is the issue that is messing up the min-width however if I dont use percentages then the rollover doesnt work right.

Any help or suggestions, as I have serached google pretty extensively and cannot find anything. I would like to keep this process 100% css only so if it cannot be done then I will have to choose a method and just accept it.

thank you,

Darryn Cooke

http://www.darryncooke.com

| The New Orange County Graphic designer and Marketing and Advertising Consultant

http://www.bloobie.com

| Marketing and Advertising blog

 

[vacunita]

In which Browser are you having this problem?

Opening the page in both FF and IE, and the images works as expected, they grow to overlap each other when hovered over.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Vragabond]

Is the effect you're after seen on the page right now? If so, how did you expect it to work with floats? If one image expands, the others will either have to shrink (and this is impossible with only CSS hovering over the first element) or the image that grows should grow without disturbing other images. Therefore absolute positioning is your only option.

Why do you not like absolute positioning for this issue, if it does what you want? You could try switching to absolute positioning only on hover (if no coordinates are given for the element, it should stay put in the same place -- it would just grow (or move a bit and grow for the right and middle image).

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[darryncooke]

no my issue is that when you shrink the page below 1200px wide which is mid-width then the images shrink. I want them to hold their min width but they wont.

like i said with each method I try i get half of the equation working 100% the way I want. Either I get the image to retain min-width but then on hover it gets funky or I get the hover working perfect (which it is now) but the min-width fails.

And I tried the absolute positioning on hover only the problem is the other 2 remain relative and they slide over.

so just to be clear the hover is working perfectly right now - its the fact that the images keep shrinking below their min-width.

Darryn Cooke

http://www.darryncooke.com

| The New Orange County Graphic designer and Marketing and Advertising Consultant

http://www.bloobie.com

| Marketing and Advertising blog

 

[darryncooke]

so is it safe to assume that I need to pick one method or another?

Darryn Cooke

http://www.darryncooke.com

| The New Orange County Graphic designer and Marketing and Advertising Consultant

http://www.bloobie.com

| Marketing and Advertising blog

 

[darryncooke]

Well I caved - used javascript for this.

In case anyone is interested in how I did it. I created 2 layers the exact same. The only difference is the default is just positioned regularly using float with a percentage for width and min-width.

the hover has a fixed width and is abolutely positioned.

Darryn Cooke

http://www.darryncooke.com

| The New Orange County Graphic designer and Marketing and Advertising Consultant

http://www.bloobie.com

| Marketing and Advertising blog