2

I have some pictures, and I am using the jQuery cycle plugin to show them in a slideshow that floats right inside an outer div. I use this CSS to have the image float right:

.slideshow
{
    float:right;
    margin-left: 20px;
}

This works fine in Firefox and Internet Explorer as it floats to the right inside the green outer div (as seen here:):

alt text

But in Google Chrome it doesn't keep the picture inside the outer div and floats off the screen (as seen here:)

alt text

What's really weird, if I keep reloading the tab in Chrome, it sometimes works and is consistent with Firefox/Internet Explorer but often is not and looks like the above (this is quite a mystery to me).

Any suggestions on how to get Google Chrome to keep this consistent?

3
  • 2
    You'll have to post some code or link to an example, else it'll be real hard to find the actual problem Dec 12, 2010 at 12:56
  • ^ Especially on the parent DOM element and its style.
    – Kissaki
    Dec 12, 2010 at 13:02
  • <div style="position:absolute; width:100px; background:#cccccc;"><div style="margin-left:20px; float:right; background:#333333;">test2<br/>test2</div>test test test test test test test test test test test test test test</div> works for me on recent chrome.
    – Kissaki
    Dec 12, 2010 at 13:04

4 Answers 4

3

I've got the solution. Your slideshow div has a predefined width and height set to 22px. Just change these values to height = 332px and width = 532px. IE and Firefox does this in the background, while Chrome displays it wrong.

3
  • doesn't seem to make any difference - can you clarify by fixed image width
    – leora
    Dec 12, 2010 at 13:14
  • where do you see a predefined width and height of 22px ??
    – leora
    Dec 12, 2010 at 13:39
  • 1
    in firebug. Just change .slideshow { float:right; margin-left: 20px; } to .slideshow { float:right; margin-left: 20px; width:532px; height: 332px; }
    – Skorpioh
    Dec 12, 2010 at 13:43
1

Your JavaScript will set the size of .slideshow to 22 pixels x 22 pixels. The <img> tags will be position:absolute;-ed.

Thus, Chrome only uses the 22 pixels x 22 pixel div for layout.

Can you specify the size on calling your JavaScript?

In Firefox the size is set correctly via JavaScript. So maybe it’s a bug in your slideshow script.

As a fix you could put another <div> around the one you call the slideshow script on, and give it a defined size. The script won’t tamper with that, and it should thus fix your problem.

6
  • @Kissaki - i dont understand what you mean: "Can you specify the size on calling your JS?" can you please clarify .. an example would be great
    – leora
    Dec 12, 2010 at 13:22
  • I was asking on whether you set the container size when initializing / running the script. Or if you can.
    – Kissaki
    Dec 12, 2010 at 13:23
  • @Kissaki - here is the css of the outer (green) div> .cssParsedBox { line-height: 1.4; margin: 0 auto 20px; color: Black; width: 100%; padding: 20px; text-align: left; background-color: #c4cbab; border: 10px solid #ffffff; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; CCborderRadius: 20px; }
    – leora
    Dec 12, 2010 at 13:35
  • Did you understand what I meant with the fix in my answer? Directly around your .slideshow div add another div which has a fixed size, which you define. The size has to be so it perfectly fits the images. May give new problems for non-JS users though, as images won’t fit sequentially in there then. You could set its size with JS then as well though.
    – Kissaki
    Dec 12, 2010 at 13:42
  • @Kissaki - where do you see "Your JavaScript will set the size of .slideshow to 22px x 22px" ???
    – leora
    Dec 12, 2010 at 13:44
0

Without seeing the code, I can only guess: generally with floats, you need to add a DIV with "clear: both" attribute afterwards (but still within the same container) to ensure the container takes both sizes into account.

0

WebKit browsers (Safari and Chrome) can fire the $(document).ready event prematurely, in this case before the images have loaded. You need to specify a height and width value for each of your images so the browser can calculate page flow before the images are loaded.

The reason for this behaviour being inconsistent is due to Chrome caching your images so they are loaded before the document onload event is fired.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.