11 replies [Last post]
macieque
macieque's picture
Offline
newbie
Last seen: 12 years 14 weeks ago
Timezone: GMT+1
Joined: 2010-02-12
Posts: 7
Points: 8

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:
Picture 1.png

and when zoomed in:

Picture 2.png

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.

macieque
macieque's picture
Offline
newbie
Last seen: 12 years 14 weeks ago
Timezone: GMT+1
Joined: 2010-02-12
Posts: 7
Points: 8

I've prepared simple example

I've prepared simple example to illustrate my issue.

here are images how does it look like:
Picture 3.pngwithout zoom
Picture 4.pngwith 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

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 36 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

can you provide a link plz?

can you provide a link plz?

macieque
macieque's picture
Offline
newbie
Last seen: 12 years 14 weeks ago
Timezone: GMT+1
Joined: 2010-02-12
Posts: 7
Points: 8

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.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 36 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

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.

macieque
macieque's picture
Offline
newbie
Last seen: 12 years 14 weeks ago
Timezone: GMT+1
Joined: 2010-02-12
Posts: 7
Points: 8

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.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 36 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

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

macieque
macieque's picture
Offline
newbie
Last seen: 12 years 14 weeks ago
Timezone: GMT+1
Joined: 2010-02-12
Posts: 7
Points: 8

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)

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 36 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

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.

macieque
macieque's picture
Offline
newbie
Last seen: 12 years 14 weeks ago
Timezone: GMT+1
Joined: 2010-02-12
Posts: 7
Points: 8

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.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 36 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

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.

macieque
macieque's picture
Offline
newbie
Last seen: 12 years 14 weeks ago
Timezone: GMT+1
Joined: 2010-02-12
Posts: 7
Points: 8

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.