3

alt textOn this page http://cacrochester.com/ the 2 rotating images are messed up in webkit browsers. It's not all the time, and it's usually not on the first image. Why is that?

I'm using the NivoSlider jquery plugin to rotate the images.

here's what i'm seeing.

karlphillip
  • 92,053
  • 36
  • 243
  • 426
Catfish
  • 18,876
  • 54
  • 209
  • 353
  • 3
    It looks crap for me in Firefox too – Marko Oct 05 '10 at 21:06
  • It looks like it's working fine on FF 3.6.3 for me. What version are you on? – Catfish Oct 05 '10 at 21:12
  • Can you be more specific with what about them is "messed up?" Please describe the behavior you expect to see vs. what you're actually seeing. – calvinf Oct 05 '10 at 22:30
  • The first image looks fine, but when the second image is rotated in, it's all chopped and repeated all the way to the right edge of the container overlapping the events box. – Catfish Oct 05 '10 at 23:07
  • 1
    btw. try some antialiasing on the font ;-) – Dänu Oct 06 '10 at 09:54
  • Looks fine to me in Safari (5.0.2) and Chrome (6.0.472.63) on OS X 10.6. Reloaded a number of times, but it's all good. – jhurshman Oct 08 '10 at 15:13
  • It looks the same to me in both Firefox and Safari. Are you sure you're not just trying to convert some programmers? – Alin Purcaru Oct 08 '10 at 15:15
  • Can you guys see the screenshot i uploaded? i'm at work and i can't tell if it uploaded correctly or not. – Catfish Oct 08 '10 at 15:44
  • The solution I posted works on my local machine. Give it a shot. – methodin Oct 08 '10 at 16:08
  • 2
    I think it looks perfect for the sentence and context it is in :) +1 – Todd Main Oct 14 '10 at 03:15
  • How were images created? Photoshop? Were they created for the web? What resolution are you using? Idon't have the issue, but the images are really pixelated. I'm using Firefox 3.5.13 – tahdhaze09 Oct 14 '10 at 17:45
  • It might be an issue with your internet connection. The image file might be still downloading as it is getting displayed. What are your operating system specs? – alexyorke Oct 15 '10 at 10:48

4 Answers4

0

Add this to the <div id="slider"> element

style="float:right;position: relative;height:270px;width:610px;"
methodin
  • 6,717
  • 1
  • 25
  • 27
  • I already have those styles on #slider except position relative. Position: relative is added dynamically though through the nivoSlider plugin so even when i add it in chrome's developer tools (basically like firebug), it just crosses it out. – Catfish Oct 08 '10 at 17:19
  • I know you did but I imagine the way the script is written these values are not getting pulled correctly via the stylsheet. Adding it to the div directly seems to correct the issue. Give it a shot. – methodin Oct 08 '10 at 17:25
0

nivo-slider.css, lines 36, 37:

.nivo-slice {
     display: none;
     /* ... */
}
y34h
  • 1,631
  • 1
  • 11
  • 17
0

It looks totally fine to me. Maybe try a different Jquery scroll plugin.

alexyorke
  • 4,224
  • 3
  • 34
  • 55
0

I'm seeing this strange effect you say, the issue seems to be in the way each column is shown. Nevertheles, you should try any other solution for that page you're building, since the effect you're applying fits more to a turning marquee and not to a slider... I've seen lots of real cool sliders (look jquery slider on Google or see http://vandelaydesign.com/blog/web-development/jquery-image-galleries/ ).

Aside, you have to consider remaking the imgs, the text is really ugly (I hope you don't be angry at me saying this, since I'm trying to help your page look better). As I was saying, if you use a Photo editing soft like Photoshop you should set the text anti-aliasing to sharp or crisp but not to "none" (therefore you won't see it "pixelated" anymore). And de photo of the guy is kinda pixelated too...

Hope my 2 cents can help you!

Juanma Guerrero
  • 109
  • 6