[css-d] Background image dropping in div when borders commented out
In this draft of site for client, put background image inside a div in order to control for different resolutions. Two odd things. Despite having same position as when defined in body - 50% 30%, the image has dropped lower in page. More bizarrely in the div where the image is located, if the border is commented out or deleted the image drops to bottom of page. I have tried all combinations of background-position and still cannot get image to site at top of page in centre. Both html and css validate. So what's going on? http://www.iyesolutions.co.uk/templates/new-dol/home-test.html http://www.iyesolutions.co.uk/templates/new-dol/includes/style-home.css Original http://www.directors-online.net Got me stumped. Ian **IMPORTANT* *** This e-mail contains information which is confidential and may also be privileged. It is for the exclusive use of the intended recipient(s). If you are not the intended recipient(s) please note that any form of, distribution, copying or use of this e-mail or the information in it is strictly prohibited and may be unlawful. If you have received this in error please inform us at the above address then delete the e-mail and destroy any copies of it. Thank you. -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.394 / Virus Database: 268.10.5/406 - Release Date: 02/08/2006 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image dropping in div when borders commented out
- Original Message - From: Ian Young [EMAIL PROTECTED] To: [EMAIL PROTECTED] Css-Discuss. Org css-d@lists.css-discuss.org Sent: Thursday, August 03, 2006 11:41 AM Subject: [css-d] Background image dropping in div when borders commented out | | Two odd things. | | Despite having same position as when defined in body - 50% 30%, the image | has dropped lower in page. More bizarrely in the div where the image is | located, if the border is commented out or deleted the image drops to bottom | of page. | | Both html and css validate. So what's going on? | | http://www.iyesolutions.co.uk/templates/new-dol/home-test.html | http://www.iyesolutions.co.uk/templates/new-dol/includes/style-home.css | | Original | http://www.directors-online.net | | Got me stumped. Ian: Looks fine in IE6 Win98 except the log in stuff is also at the top but I think it looks good that way. What browsers are causing the trouble All or only---?? Don | __ | css-discuss [EMAIL PROTECTED] | http://www.css-discuss.org/mailman/listinfo/css-d | IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 | List wiki/FAQ -- http://css-discuss.incutio.com/ | Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ | | | | -- | No virus found in this incoming message. | Checked by AVG Free Edition. | Version: 7.1.394 / Virus Database: 268.10.5/406 - Release Date: 8/2/2006 | | -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.394 / Virus Database: 268.10.5/406 - Release Date: 8/2/2006 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image dropping in div when borders commented out
Here are a couple of things to get you started in the right direction.
1. body {margin:0; padding:0;}
2. As far as I can tell (by viewing the full background image), the
background image on www.directors-online.net is positioned from its left
and bottom edges (so that the top most portion of the image isn't
visible) - in your version you're attempting to position the image from
the left and top. And so something like [background-position: 50%
bottom;] would get you pretty close to what you want.
Check this link out for more info on background positioning:
http://www.quirksmode.org/css/backgroundposition.html
Hope this helps,
Shawn Lawler
Ian Young wrote:
In this draft of site for client, put background image inside a div in order
to control for different resolutions.
Two odd things.
Despite having same position as when defined in body - 50% 30%, the image
has dropped lower in page. More bizarrely in the div where the image is
located, if the border is commented out or deleted the image drops to bottom
of page.
I have tried all combinations of background-position and still cannot get
image to site at top of page in centre.
Both html and css validate. So what's going on?
http://www.iyesolutions.co.uk/templates/new-dol/home-test.html
http://www.iyesolutions.co.uk/templates/new-dol/includes/style-home.css
Original
http://www.directors-online.net
Got me stumped.
Ian
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image dropping in div when borders commented out
Both html and css validate. So what's going on? | | http://www.iyesolutions.co.uk/templates/new-dol/home-test.html | http://www.iyesolutions.co.uk/templates/new-dol/includes/style-home.css | | Original | http://www.directors-online.net | | Got me stumped. Ian: Looks fine in IE6 Win98 except the log in stuff is also at the top but I think it looks good that way. What browsers are causing the trouble All or only---?? Don Happens in all browsers. http://www.iyesolutions.co.uk/templates/new-dol/home-testa.html shows the effect when the border in #maincontent is comments out Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.394 / Virus Database: 268.10.5/406 - Release Date: 02/08/2006 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
