Fri, 2010-02-12 10:58
Hi
I recently encountered a problem with positioning borders around a div. I'm using 4 nested divs with backgrounds positioned in a way so they create a border. Everything looks fine until i use the zoom feature in FF or Safari. When i do that, immediately strange gaps are showing. I did some research on the web and although i haven't found anything exactly like that (which is weird.. am i the only one with this problem?), what seems to be a problem is that zooming creates sub-pixel dimensions (divs have width which is not in full pixels e.g. 145,5px), although i couldn't find a solution for it. Here is how it looks like in 100% zoom:
and when zoomed in:
Same thing happens in other parts of the website. My header consists of floated divs with background images. Margins are reset, dimensions are correct and again, in 100% zoom everything looks fine, but whenever I zoom in or zoom out those ugly little gaps show. Thx for advice in advance.
Fri, 2010-02-12 13:37
#1
I've prepared simple example
I've prepared simple example to illustrate my issue.
here are images how does it look like:
without zoom
with zoom
and here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>test</title> <style type="text/css"> body{ background-color:#98C343; margin:0; padding:0; } #topContent{ margin:0; padding:0; width:820px; height:57px; background:transparent url("images/projekt_03.png")no-repeat top left; } #leftContent{ margin:0; padding:0; background: transparent url("images/projekt_05.png") repeat-y top left; } #rightContent{ margin:0; padding:0; width:820px; background: transparent url("images/projekt_07.png") repeat-y top right; } #mainContent{ margin:0 auto; padding:0; width:722px; height:700px; background-color:#F2F2F2; } #bottomContent{ margin:0; padding:0; width:820px; height:88px; background:transparent url("images/projekt_08.png") no-repeat bottom left; } </style> </head> <body> <h1>test</h1> <div id="topContent"></div> <div id="leftContent"> <div id="rightContent"> <div id="mainContent"> </div> </div> </div> <div id="bottomContent"></div> </body> </html>
thx in advance
Fri, 2010-02-12 17:15
#2
can you provide a link plz?
can you provide a link plz?
Sat, 2010-02-13 00:12
#3
Sure. I didn't do it in the
Sure. I didn't do it in the first place because its a bit messy for now. I thought it will be easier to see in the simple example i provided in 2nd post.
Fri, 2010-02-12 17:53
#4
try changing .bottom-left
try changing .bottom-left height to 195. Its real buggy. it seems to be caused by in or around that class.
Fri, 2010-02-12 18:08
#5
I tried decreasing both with
I tried decreasing both with and height before and it helps with this part of the page. But similar technique doesn't help with the rest of the page (especially navigation). I was counting on a more universal solution, like how it happens that a page looks fine and then after zooming strange things happen..
Its more visible in the example from the 2nd post. Very little code and i don't think anything is messy there. It SHOULD work, but it doesn't.
Fri, 2010-02-12 18:10
#6
post a link for the second
post a link for the second example. By the way, I could only replicate this issue in IE. never saw it in FF
Sat, 2010-02-13 00:11
#7
here is the
this one works ok for me in safari and chrome, haven't tested in IE. FF on the other hand creates those little gaps when zoomed (not every magnification level though)
Fri, 2010-02-12 18:59
#8
Ok, i think we need to
Ok, i think we need to restructure this. do it like this
<div id="container"> <div id="left"></div> <div id="right"></div> <div id="bottom"></div> </div>
container will hold the top image, left will hold the left image, right will hold right image, and bottom for bottom. Dont put the right side div, inside of the left side div, thats just wrong. You'll need to pay around with the margin settings of each to get it to work. Each div will have width and height se to that of the image, except container.
Keep in mind, if the content grows past the box boundaries, it will break since this these boxes are not flexible.
Sat, 2010-02-13 00:11
#9
Not this way i guess. First
Not this way i guess. First this way we get a fixed size container which is not what i want. Nesting divs is done in order to make this container fluid height (width is fixed). Background images are repeated vertically so the container can have any height.
Fri, 2010-02-12 21:28
#10
i dont see gaps in FF, just
i dont see gaps in FF, just IE. I added alot of content to your second example, and the layout was not fluid. The text ran straight out of the box.
Fri, 2010-02-12 21:55
#11
That's because height was set
That's because height was set in css. This way i didn't have to fill in any content to show box. If you remove height from styles, you can put whole book inside and it will resize.
For now i found a solution. I'm not happy with it but its only one i found. I make each div a bit smaller than background image. It help in some cases, but not in others. Thanks for your efforts though.
And of course if anyone had this problem before and found a good solution i would love to hear about it.