...

View Full Version : DIV seperation issue



ClintBeavers
06-02-2007, 07:14 PM
Link (http://www.cebeavers.com/Documents/widgets.html)

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 (http://www.cebeavers.com/Documents/style2.css)

cheat
06-02-2007, 09:35 PM
you could use position absolute. but without more information i cannot really tell you what to do.

bazz
06-02-2007, 09:45 PM
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

jshl_wiz
06-02-2007, 09:48 PM
Try setting the <P> margin to 0px. By the way that's a sweet looking navigation bar, how did you make it?

ClintBeavers
06-02-2007, 09:52 PM
I'll post a screenshot of what I mean:

http://i13.photobucket.com/albums/a291/TheScorpionLairToo/screen.jpg

ClintBeavers
06-02-2007, 09:56 PM
@ Bazz, I'll post the CSS below, thanks :).

@ jshl, I borrowed that and am modifying it from THIS (http://www.ndesign-studio.com/blog/mac/css-dock-menu) 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");
}

ClintBeavers
06-03-2007, 01:27 AM
I did what you guys said and it's still doing it. Still not sure why, though.

_Aerospace_Eng_
06-03-2007, 01:47 AM
No you didn't do what they said. Add this to your CSS

#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;
}

ClintBeavers
06-03-2007, 08:37 PM
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.

ClintBeavers
06-03-2007, 09:06 PM
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.

_Aerospace_Eng_
06-03-2007, 09:07 PM
Its

#content p {
margin-top:0; margin-bottom:0;
}
NOT

#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.

ClintBeavers
06-03-2007, 09:30 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum