tags:

views:

2766

answers:

2

Hi all, I'm using a jQuery plugin called "Cycle" and I am having issues with the CSS for it in IE, it looks perfect in Opera, FF, Chrome and Safari, but IE is cracking the sads..

www[dot]photographicpassions[dot]com/home

You will see the "latest work" on the right hand side and the thumbnails below the main image, in FF, Safari, Chrome and Opera, the grey container is behind all the thumbnails, but in IE, the grey background stops at the top of the thumbnails.. I've tried various things to make it work, to no avail.. could someone please help me??

Here's the CSS for the containers which arent playing nice in IE:

/* latest work container */ div#latestHolder { position: relative; float: left; width: 368px; margin: 0px 0px 0px 0px; padding: 10px 10px 10px 10px; background-color: #666666; }

/* thumbnails */ div#nav { position: relative; float: left; left: 0px; width: 376px; padding: 0px 0px 0px 0px; margin: 1px 0px 0px 0px; } div#nav li { width: 66px; float: left; padding: 0px 0px 0px 0px; margin: 9px 9px 0px 0px; list-style: none; cursor: pointer; } div#nav a { padding: 3px; display: block; background: #404040; cursor: pointer; } div#nav a.activeSlide { background: #ffffff; cursor: pointer; } div#nav a:focus { outline: none; cursor: pointer; } div#nav img { width: 60px; border: none; display: block; cursor: pointer; }

If someone could help me out, that'd be fantastic!! :)

+1  A: 

The div #latestHolder is floated to the left, which causes it to be removed from the flow of the page. Try either using relative/absolute position instead of float:left; or clear the float before you end the #mainContainer div.

Clearing would involve throwing in a block-level element at the end of the #maincontainer div like so:

<div style="clear: both;"></div>
Evan Meagher
hmm I tried to remove float: left and also added the clear div, but it didnt change anything in IE and it went weird in the other browsers.. :/
SoulieBaby
A: 

Just use overflow: hidden on your containers. By default, overflow: auto will not grow elements to contain its contents. Setting overflow: hidden (or overflow: auto...bit with that you risk unwanted scrollbars), you will force your container divs to expand to the hight of all their child elements...floated elements included.

jrista
Hmm I tried that, but still can't get it to work :( overflow: auto puts scroll bars around the div and doesn't expand it to the height of the thumbnails (which are pulled in using jquery)
SoulieBaby
You should use overflow: hidden most of the time. I usually reserve overflow: auto for the times when I set a specific width and/or height and actually want the scrollbar. Just out of curiosity...which version of IE is having the problem? Is it IE6? I think I assumed IE7/8, but IE6, as you undoubtedly know, is riddled with bugs. If you need IE6 compatability, you might need to do both overflow: hidden and a clearing div.
jrista
Hmm...I just noticed that you tried the clearing div as well, and it didn't work. I'll need to take a look at your site, which I see you posted...and hopefully I can figure out the problem.
jrista
well for now I'm using a php hack, depending on the amount of rows/thumbnails it displays different heights.. I can't seem to get it to work using regular CSS for IE.. I think IE isn't picking up that the jQuery ul/li's are inside the container, yet all the other browsers do.. :/I'm using IE 7 (and I also have IE8 on my laptop, but I haven't checked that yet)btw- overflow: hidden actually hides the thumbnails in IE altogether
SoulieBaby
thank you for your help by the way :)
SoulieBaby
let me know if you can figure it out, coz I have nooo idea lol
SoulieBaby
My apologies...computer has been down. I just took a look at your site in Opera 9.6 and 10, Firefox 3, IE 7 and 8. As far as I could tell...it looked the same in all of them. Is there any way you could upload a screenshot of what you are seeing?
jrista
That's ok.. Oh it'll show the same across browsers now as I implemented a php script for the height (if you're using IE) basically it counts the thumbnails and changes the height accordingly, I know it's not the best fix, but it works.. :)
SoulieBaby