0

I cant get rid of the gaps between divs when i scale or zoom the web page. In firefox it works like a charm, but when i try i IE9 1px row appears down, but nowhere else. If i try with safari, at "real size" or 100% zoom, it works, but as soon as I change the zoom, increment or decrement, i mean, zoom in or zoom out tons of rows appear. With Chrome is the same; 100% is ok, 110% is bad, 115% gets better but not perfect....

I tried this;

margin-top:-1px

but after appliying it here and there, as soon as I zoom in or out, new 1px rows appears

also tried the 

border-radius: ;
-webkit-border-radius: ;
-moz-border-radius: ;

but didnt work either.

It could be something related to the fact that they are all absolutes? I wont export anything again from photoshop, but i would like to finish with this

THANSK!

P.S.; here is the url http://www.butterfly-paradise.com/

Douglas B. Staple
  • 10,510
  • 8
  • 31
  • 58
Spentamanyu
  • 1
  • 1

1 Answers1

0

I think the seams are coming from a combination of absolute positioning and having a bunch of images butting up against each other with a different background color. The larger problem is that this is not a great way to do layout.

The seams don't impair the usability of the site, and it's relatively rare that people even use browser zoom, so it's up to you whether it's worth it to fix.

If you want to try fixing it, I'd recommend starting from scratch. There won't be any way to fix it from within Photoshop, and trying to edit the code it generated would take longer than just doing it over. You could try something like Dreamweaver, or even coding it by hand. If that sounds too intense, just leave it. But if it sounds kind of exciting, go for it.

Chad von Nau
  • 4,316
  • 1
  • 23
  • 34
  • thanks for answering so fast. I have to fix it. The client will notice it for sure. I tried exporting from photoshop to talbes insted of divs and it does the same! I will have to star from scratch. THANKS! – Spentamanyu Feb 26 '12 at 11:56
  • I edited my answer. If you are still getting seams even with a table layout, I think the problem is more about the technique of using a grid of images for layout than the absolute positioning. Try to only use images where necessary. Good luck. – Chad von Nau Feb 26 '12 at 12:15
  • Thanks, i tried with tables http://www.butterfly-paradise.com/withtables.html and is not as bad, but still not perfect. Thanks a lot. – Spentamanyu Feb 26 '12 at 13:42