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 5 of 5
  1. #1
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts

    Div Border Causing Positioning Problems

    Can anyone please explain to me why this is happening?

    With the border on

    With the border off



    It is driving me insane and I cannot work out why a border should affect my layout so terribly. The red border was originally put around the nested div, just to help as a visual aid whilst positioning. Now I am unable to remove it, as you can see. Without the border, all of my positioning calculations are shot to the wall, leaving me completely lost. So I desperately need to know why this is happening and how to fix it.

    I would be so grateful for any advice.

    Many thanks!
    Last edited by Doctor_Varney; 03-05-2009 at 01:57 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Last edited by abduraooft; 03-05-2009 at 02:02 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by abduraooft View Post
    Thanks, Abdura - but I'm sorry, I just don't understand what collapsing margins have to do with this border problem...?
    Last edited by Doctor_Varney; 03-05-2009 at 02:19 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I think you need it like
    Code:
    #varneyepitaph {/*border-o...style.css (line 9)*/
    background:transparent url(../images/interface/staff-swap_varney.jpg) no-repeat scroll 50% 0;
    /*border:1px solid #990000;*/
    height:370px;
    margin:103px 0 0 275px;
    padding-top:258px;
    width:246px;
    }
    #varneyepitaph p, #hylandepitaph p {/*border-o...style.css (line 14)*/
    color:#000000;
    font-size:0.7em;
    font-weight:bolder;
    line-height:0.9em;
    margin-left:15px;
    /*margin-top:258px;*/
    text-align:justify;
    width:190px;
    }
    ?
    Last edited by abduraooft; 03-05-2009 at 02:47 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Doctor_Varney (03-05-2009)

  • #5
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    WOW! Thank you VERY much, Abdura. I followed that and it has completely fixed the problem.

    I'm still a bit lost on exactly why it should have happened in the first place, but I can tell this is something to do with using padding and 'transparent' I don't know how it's worked - but it has. I just hope I can remember this, for future reference. Thanks again!

    The margin collapse issue is very difficult for me to get my head around. Is it related, because if it is, I'll try and study it.

    Doctor V
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.


  •  

    Posting Permissions

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