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 12 of 12
  1. #1
    New Coder
    Join Date
    Jun 2006
    Location
    West Virginia
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

    DIV seperation issue

    Link

    This is one of my test pages. I'm still working on the look and header and what not, but I have place holders everywhere I need them, so the page is functional. However, and I've been having this issue recently on more than one host and page (this is what happens when you don't code anything for a few months), but I have 3 <div> sections stacked on top of each other, but when I put a <p> in the content <div>, it causes the space between the <div> sections, which I do not want. What am I doing wrong?

    Link to CSS
    Last edited by ClintBeavers; 06-02-2007 at 07:20 PM.

  • #2
    New Coder cheat's Avatar
    Join Date
    Nov 2006
    Location
    England, Britain
    Posts
    74
    Thanks
    0
    Thanked 0 Times in 0 Posts
    you could use position absolute. but without more information i cannot really tell you what to do.

  • #3
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    You coding in IE?

    I have found that the <P> tag will add a 3px border which could be what is causing your problem. Shouldn;t see it in FF if you code in that.

    If this is the problem you should use the following phrases in your CSS for the #nameOfDiv p {
    border : 0;
    padding : 0;
    margin : 0;
    }

    if you post your code, there may be a more fundamental solution which we can help you with, like the DOCTYPE at the top of your HTML

    bazz

  • #4
    New Coder
    Join Date
    May 2005
    Location
    Alabama
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try setting the <P> margin to 0px. By the way that's a sweet looking navigation bar, how did you make it?

  • #5
    New Coder
    Join Date
    Jun 2006
    Location
    West Virginia
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'll post a screenshot of what I mean:


  • #6
    New Coder
    Join Date
    Jun 2006
    Location
    West Virginia
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    @ Bazz, I'll post the CSS below, thanks .

    @ jshl, I borrowed that and am modifying it from THIS site.

    Code:

    /* CSS Document */
    body {
    font: 11px Arial, Helvetica, sans-serif;
    background: #ffffff url("/Images/BlackStripeBG.png");
    padding: 0;
    margin: 0;
    }
    img {
    border: none;
    }

    /* dock - top */
    .dock {
    position: relative;
    height: 50px;
    text-align: center;
    }
    .dock-container {
    position: absolute;
    height: 50px;
    background: url("/Images/dock-bg2.gif");
    padding-left: 20px;
    }
    a.dock-item {
    display: block;
    width: 40px;
    color: #FFF;
    position: absolute;
    top: 0px;
    text-align: center;
    text-decoration: none;
    font: bold 12px Arial, Helvetica, sans-serif;
    }
    .dock-item img {
    border: none;
    margin: 5px 10px 0px;
    width: 100%;
    }
    .dock-item span {
    display: none;
    padding-left: 20px;
    }

    .dock img {
    behavior: url("/Scripts/iepngfix.htc")
    }
    img {
    border: none;
    }
    #header {
    height: 12px;
    width: 700px;
    margin: 0 auto;
    background: url("/Images/Header.gif");
    }
    #content {
    width: 700px;
    margin: 0 auto;
    background: #ca0000;
    }
    #footer {
    height: 12px;
    width: 700px;
    margin: 0 auto;
    background: url("/Images/Footer.gif");
    }

  • #7
    New Coder
    Join Date
    Jun 2006
    Location
    West Virginia
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I did what you guys said and it's still doing it. Still not sure why, though.

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    No you didn't do what they said. Add this to your CSS
    Code:
    #content p { /*paragraphs have default margins and padding, if no border is set on the containing element then the margin collapses and makes the gaps you are seeing*/
    margin-top:0;
    }
    #header, #footer { /*IE won't let an elements height go smaller than its font size*/
    line-height:0;
    font-size:0;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    New Coder
    Join Date
    Jun 2006
    Location
    West Virginia
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Actually, I did do that, but not on the pages I linked to above because I was working on something else. I'll try to re-configure my CSS again, though.

  • #10
    New Coder
    Join Date
    Jun 2006
    Location
    West Virginia
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, I've added that, and I tried to do the same for the bottom margin, but it still isn't doing it for me on the bottom.

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Its
    Code:
    #content p { 
    margin-top:0; margin-bottom:0;
    }
    NOT
    Code:
    #content p { 
    margin-top:0; bottom:0;
    }
    Goes to show that copying and pasting not knowing how something works is not always the way to go. www.htmldog.com is a good place to learn CSS. I suggest you do some tutorials.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #12
    New Coder
    Join Date
    Jun 2006
    Location
    West Virginia
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I didn't copy/past the bottom on there. I typed it in the way you showed and it isn't working. However, I deleted it before I posted on here and I guess I didn't delete the entire line. In fact, when I view source, it doesn't even show me that there.

    Thanks for assuming, and yet thanks for the help.


  •  

    Posting Permissions

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