2

I have a problem with the layout I'm creating- problem being that in certain resolutions (or if you zoom in) you can see where the outlining of the div boxes are.

Here's what it's supposed to look like: expected behaviour

Here's what it looks like at some resolutions (or zoomed in):

observed behaviour

If you need to see the website, it's here, though obviously it's not finished yet. You might immediately see the problem based on your resolution, if not you could zoom in or change your monitors resolution.

I would imagine this is a common problem with an easy solution. Thanks for your help!

4
  • what browser are you using? in firefox 6 they are not visible at any zoom level. it may just be a problem with how that browser renders the page. Sep 13, 2011 at 2:20
  • @Jake223: I can see lines if I zoom in Chrome (but not if I don't zoom).
    – icktoofay
    Sep 13, 2011 at 2:22
  • Interesting, just tested in Firefox and you are right. I've tested the page in Chromes and IE- as well as the browser on my HP Touchpad, and Android phone (in which you can hardly see them on a smaller screen) but yeah it appears every browser I've tested except for Firefox will show these lines.
    – finec
    Sep 13, 2011 at 2:24
  • also, Opera seems to render them correctly. I have checked chrome, and see what you are talking about, but have no idea. good luck getting an answer. Sep 13, 2011 at 2:26

2 Answers 2

0

If you change your #righthand to have a float:left, the vertical line at the right disappears.

#righthand {
    width: 368px;
    height: 373px;
    background: url("../img/right.png");
    float: right;  // CHANGE TO LEFT
}

And if you change your #tp to height:248px, the other horizontal line disappears.

#tp {
    width: 1024px;
    height: 249px;  //CHANGE TO 248px
}
0
0

I didn't have enough time to look at the site before it was taken down but I think it could be as simple as setting

background: transparent url(imgsrc) no-repeat left top;

that shorthand for the background image in css will lock in the spot. Other than that I would make sure you have

margin: 0; padding: 0;

so that you can specify the exact width and make sure the cuts that are made are done to a grid so that when you slice the image you have an exact width.

0

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.