CSS question trying to positions buttons next to a horizontal list

HTML & CSS
1

take a look at:
http://www.occasionalconfections.com/beta/portfolio.php

I would like to position the prev and next buttons next to the images slider instead of above and below it but cant figure out how to tweak my css to make that happen. can someone please assist?

2

Remove

<button class="next">>></button>

and replace this line

        	<button class="prev"><<</button>

with this

        	<button class="prev"><<</button> <button class="next">>></button>

then in css add this

button.prev { float: left; }
3

thank you- thats much closer to the desired layout but still not quite it. i woudl actually like the buttons to be right next to the carousel (not above or below it)

like the one found here:

4

Then undo those code changes and add the following to css:

button.prev, button.next { float: left; margin-top: 20px; }
.carousel { float: left; }

then after second </button> add this

<div style="clear:both;"></div>
5

thanks for all your help with this - i got it working nicely but i just found that its not quite right in IE6.

for some reason in IE6, my .carousel div has a large height (244px).

works fine in FF, IE7+, Chrome, safari though…

any ideas on why it might be blowing out the height of this div in ie6?

6

Hi, the <li>'s are falling to the double float margin bug and as a result the images are dropping thus increasing the height :).


.carousel li{display:inline;}
7

thanks for the tip!! that definitely helped.

now the last piece is that my caption overlay is not working in ie6.

take a look at the site in another browser and you will see that there is a semi-transparent caption div that floats over the bottom of the main image. when you roll over it, the caption div slides up to reveal the caption.

in ie6, it looks like that div is at the bottom of the carousel.

any ideas on how to make that work in ie6?

8

Hi, the probem is is that the parent has position:relative and no haslayout and as a result IE often gets the placement of child elements (even with coordinates) if the parent with relative positioning (to set stacking context) has no haslayout :slight_smile:

I don’t think that made sense, but hte point is is that IE needs haslayout on the parent with position:relative that is setting a stacking context for the AP child(ren)


#mainPic{zoom:1;}