...

View Full Version : :: position div over div... relative adds gap!



babelfish
05-21-2009, 01:35 PM
Hi all,

i am writing a project management system and have setup some header titles that are basically PHP dynamically written text (using corporate font) over a background.

this works fine until i try to print, since the background doesnt show :( i do expect managers to print from the system from time to time.

i used to do this as an image created in photoshop but i got bored of having to make loads of these header graphics.

so, my reasoning was to create a blank header image and position it under the header div. the problem now is that a space seems to be getting added in all browsers.



<style> <!-- this is normally in a css file btw -->
.tablehead{
width:614px;
height:16px;
text-align:center;
padding:2px;
padding-top:3px;
background-image:url(../images/tablehead_expanded.gif);
color:#515555;
font-size:13px;
cursor:pointer;
z-index:10;
}
</style>
<div id='prefs_header' class='tablehead' onclick="collapseSection('prefs','prefs_header')">CHANGE PREFERENCES HERE</div>
<img src='images/tablehead_expanded.gif' name="prefs_header_img" width="618" height="21" id='prefs_header_img' style="position:relative; top:-21px; z-index:-1;overflow:hidden;" />


i cannot use absolute positioning as i dont know where on the page these titles will be.

this is doing my head in! actually FF and opera do soemthing even more weird than IE... they add a space in the NEXT div?!?! odd eh!

piccie here:
http://www.delmargroup.co.uk/images/relative_issue.gif

any help mucho appreciated :)

Rowsdower!
05-21-2009, 02:26 PM
Hi all,

i am writing a project management system and have setup some header titles that are basically PHP dynamically written text (using corporate font) over a background.

this works fine until i try to print, since the background doesnt show :( i do expect managers to print from the system from time to time.

i used to do this as an image created in photoshop but i got bored of having to make loads of these header graphics.

so, my reasoning was to create a blank header image and position it under the header div. the problem now is that a space seems to be getting added in all browsers.



<style> <!-- this is normally in a css file btw -->
.tablehead{
width:614px;
height:16px;
text-align:center;
padding:2px;
padding-top:3px;
background-image:url(../images/tablehead_expanded.gif);
color:#515555;
font-size:13px;
cursor:pointer;
z-index:10;
}
</style>
<div id='prefs_header' class='tablehead' onclick="collapseSection('prefs','prefs_header')">CHANGE PREFERENCES HERE</div>
<img src='images/tablehead_expanded.gif' name="prefs_header_img" width="618" height="21" id='prefs_header_img' style="position:relative; top:-21px; z-index:-1;overflow:hidden;" />


i cannot use absolute positioning as i dont know where on the page these titles will be.

this is doing my head in! actually FF and opera do soemthing even more weird than IE... they add a space in the NEXT div?!?! odd eh!

piccie here:
http://www.delmargroup.co.uk/images/relative_issue.gif

any help mucho appreciated :)

I'm a little confused already. Is the issue appearing on-screen only, on the printed page, or both?

Can we have a link to a test page for this (even just a dummy page of this layout without all of the login process)? It will make debugging a load easier.

babelfish
05-21-2009, 02:40 PM
thx for the reply. no real chance of getting up a demo copy as it would take ages to setup.

the image grab i have linked to is what you see when you look at the page. print preview does exactly the same (adds about a 20px gap below the image).

the below test code shows the issue:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style> <!-- this is normally in a css file btw -->
.tablehead{
width:614px;
height:16px;
text-align:center;
padding:2px;
padding-top:3px;
background-color:#FF3300;
color:#515555;
font-size:13px;
cursor:pointer;
z-index:10;
font-weight:bold;
}
</style>
</head>
<body>
<div id='prefs_header' class='tablehead'>RED PAGE HEADER</div>
<img src='http://www.google.co.uk/intl/en_uk/images/logo.gif' name="prefs_header_img" width="780" height="21" id='prefs_header_img' style="position:relative; top:-21px; z-index:-1;overflow:hidden;" />
<div style="background-color:#669999">below div that should fit directly below the above</div>
</body>
</html>


as you can see the image (stolen from google for this purpose) sits behind the div ok, its just the fact that the below div is then 20ish pixels below where it should be. its like relative moves up ok, but leaves the space where it should be!

as you can see here :

http://www.delmargroup.co.uk/images/relative_issue.gif

my layouts dont allow for a gap and it looks pants :(

djm0219
05-21-2009, 03:11 PM
Removing


style="position:relative; top:-21px; z-index:-1;overflow:hidden;"

from the image tag seems to allow it to be positioned as desired in my testing.

babelfish
05-21-2009, 03:15 PM
Removing


style="position:relative; top:-21px; z-index:-1;overflow:hidden;"

from the image tag seems to allow it to be positioned as desired in my testing.

yeah -the image is positioned ok. its just the div below should not have a gap between it and the image/header div. if i dont have the image there it all joins up nicely and i dont have a gap...

arghhhh

babelfish
05-21-2009, 03:20 PM
sorry - i misread and didnt see the 'removing' text in that post. if i remove the style from the image the image is below the header div - i need it UNDER (i.e. so you cant see it as it is directly beneath - but it prints!)

sorry - i cant think of a better way to say this. imagine top layer is z-index:1 i need the image to be z-index:0 - so they stack.... (ahh thats a better word!)

Rowsdower!
05-21-2009, 09:24 PM
Not to sound dense (and I haven't taken the time to test drive your posted code yet) but is there any reason that you can't just make the image a BG for the heading? You could make the heading 100% width with text-align:center and using the correct line-height you should be able to do this without any positioning at all.

Aside from that, I have always heard that changing top, bottom, left, or right positioning with relative posititioning is a bit finnicky. If you don't/can't make the image a bg image then try adding a similar -21px vertical shift to the data below the heading.

Again, I've been too busy today to actually fart around with your code so the above might be completely worthless. In that event, I apolgize! :D

Nevermind about the bg image thing. I remembered almost instantly after posting that you are doing this to keep the image in the page when printed... DUH! Like I said, it's been a busy day...

Rowsdower!
05-21-2009, 10:00 PM
Ok, I'm also noticing that your red div does not have any positioning to it (be it relative or absolute). In order for z-index to activate I believe one or the other is needed. Anyway, this works, using the same relative positioning for the "below div" as is used in the image:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.tablehead {
width:614px;
height:16px;
text-align:center;
padding:2px;
padding-top:3px;
/*background-color:#FF3300;*/
color:#515555;
font-size:13px;
cursor:pointer;
z-index:10;
font-weight:bold;
position:relative;
}
</style>
</head>
<body>
<div id="prefs_header" class="tablehead">RED PAGE HEADER</div>
<img src='http://www.google.co.uk/intl/en_uk/images/logo.gif' name="prefs_header_img" width="780" height="21" id='prefs_header_img' style="position:relative; top:-21px; z-index:0;overflow:hidden;" />
<div style="background-color:#669999;position:relative;top:-21px;">below div that should fit directly below the above</div>
</body>
</html>

babelfish
05-26-2009, 08:49 AM
Ok, I'm also noticing that your red div does not have any positioning to it (be it relative or absolute). In order for z-index to activate I believe one or the other is needed. Anyway, this works, using the same relative positioning for the "below div" as is used in the image:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.tablehead {
width:614px;
height:16px;
text-align:center;
padding:2px;
padding-top:3px;
/*background-color:#FF3300;*/
color:#515555;
font-size:13px;
cursor:pointer;
z-index:10;
font-weight:bold;
position:relative;
}
</style>
</head>
<body>
<div id="prefs_header" class="tablehead">RED PAGE HEADER</div>
<img src='http://www.google.co.uk/intl/en_uk/images/logo.gif' name="prefs_header_img" width="780" height="21" id='prefs_header_img' style="position:relative; top:-21px; z-index:0;overflow:hidden;" />
<div style="background-color:#669999;position:relative;top:-21px;">below div that should fit directly below the above</div>
</body>
</html>

THANKS mate.

the problem with this is that then EVERY subsequent div on the page also needs to be relatively positioned :( which really is a pain for application development.

its such a stupid thing that we cannot control how pages are printed on the web (i know i can tell the user to enable background printing but its not something you need on all sites is it?). i mean without this browsers can never really be used as an alternative to systems such as lotus notes, office software and bespoke fat client software for business apps.

Rowsdower!
05-26-2009, 01:52 PM
THANKS mate.

the problem with this is that then EVERY subsequent div on the page also needs to be relatively positioned :( which really is a pain for application development.

its such a stupid thing that we cannot control how pages are printed on the web (i know i can tell the user to enable background printing but its not something you need on all sites is it?). i mean without this browsers can never really be used as an alternative to systems such as lotus notes, office software and bespoke fat client software for business apps.

Oh ye of little faith... Why didn't you say so?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.tablehead {
width:614px;
height:16px;
text-align:center;
padding:2px;
padding-top:3px;
/*background-color:#FF3300;*/
color:#515555;
font-size:13px;
cursor:pointer;
z-index:10;
font-weight:bold;
position:relative;
}
</style>
</head>
<body>
<div id="prefs_header" class="tablehead">RED PAGE HEADER</div>
<img src='http://www.google.co.uk/intl/en_uk/images/logo.gif' name="prefs_header_img" width="780" height="21" id='prefs_header_img' style="position:relative; top:-21px; z-index:0;overflow:hidden;" />
<div style="background-color:#669999;position:relative;top:-21px;margin-bottom:-21px;">below div that should fit directly below the above</div>
<div style="background-color:#123456;">another div that doesn't need to be bumped 21px</div>
</body>
</html>

I think that should do the trick for at least IE7 and FF2. :thumbsup:

You can ALMOST do this just in the image, but for IE7 (and probably other versions) the -21px bottom margin simply negates the -21px vertical position of the image. Bummer, but this little bit of extra work gets the job done...

babelfish
05-26-2009, 02:05 PM
cheers mate. that should do the trick ;)

of course i have written a HTA file to alter the background settings now ;) oh well!

this is for an IE7 in-house project so i dont mind using HTA if needs be.

btw - sorry for late reply before - i was on a long weekend :)

Rowsdower!
05-26-2009, 02:25 PM
cheers mate. that should do the trick ;)

of course i have written a HTA file to alter the background settings now ;) oh well!

this is for an IE7 in-house project so i dont mind using HTA if needs be.

btw - sorry for late reply before - i was on a long weekend :)

You and me both! It's a groggy Tuesday for me...

babelfish
05-26-2009, 04:35 PM
yup - no different from normal for me :) thanks for the help again!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum