Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    England =)
    Posts
    523
    Thanks
    26
    Thanked 0 Times in 0 Posts

    Question :: position div over div... relative adds gap!

    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.

    Code:
    <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
    "They hired me for my motivational skills. Everyone at work says they have to work much harder when I`m around" Homer J Simpson

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by babelfish View Post
    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.

    Code:
    <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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    England =)
    Posts
    523
    Thanks
    26
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <!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
    "They hired me for my motivational skills. Everyone at work says they have to work much harder when I`m around" Homer J Simpson

  • #4
    Senior Coder djm0219's Avatar
    Join Date
    Aug 2003
    Location
    Wake Forest, North Carolina
    Posts
    1,307
    Thanks
    4
    Thanked 205 Times in 202 Posts
    Removing

    Code:
     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.
    Dave .... HostMonster for all of your hosting needs

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    England =)
    Posts
    523
    Thanks
    26
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by djm0219 View Post
    Removing

    Code:
     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
    "They hired me for my motivational skills. Everyone at work says they have to work much harder when I`m around" Homer J Simpson

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    England =)
    Posts
    523
    Thanks
    26
    Thanked 0 Times in 0 Posts
    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!)
    "They hired me for my motivational skills. Everyone at work says they have to work much harder when I`m around" Homer J Simpson

  • #7
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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!

    Edit: 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...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #8
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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:

    Code:
    <!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>
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #9
    Regular Coder
    Join Date
    Jun 2002
    Location
    England =)
    Posts
    523
    Thanks
    26
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post
    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:

    Code:
    <!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.
    "They hired me for my motivational skills. Everyone at work says they have to work much harder when I`m around" Homer J Simpson

  • #10
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by babelfish View Post
    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?
    Code:
    <!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.

    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...
    Last edited by Rowsdower!; 05-26-2009 at 02:57 PM. Reason: forgot to close the <html> tag...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    babelfish (05-26-2009)

  • #11
    Regular Coder
    Join Date
    Jun 2002
    Location
    England =)
    Posts
    523
    Thanks
    26
    Thanked 0 Times in 0 Posts
    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
    "They hired me for my motivational skills. Everyone at work says they have to work much harder when I`m around" Homer J Simpson

  • #12
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by babelfish View Post
    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...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #13
    Regular Coder
    Join Date
    Jun 2002
    Location
    England =)
    Posts
    523
    Thanks
    26
    Thanked 0 Times in 0 Posts
    yup - no different from normal for me thanks for the help again!
    "They hired me for my motivational skills. Everyone at work says they have to work much harder when I`m around" Homer J Simpson


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •