CSS - Space between divs

**morse** · January 13th, 2005, 12:56 AM

Here's a silly question. How do you eliminate the space between sections that have different div id's?

**lostinbeta** · January 13th, 2005, 01:14 AM

Do you have the margins set to 0px?

**morse** · January 13th, 2005, 01:54 AM

Yep

**ditt0** · January 13th, 2005, 02:27 AM

could u show us the code ?

**Kristopher** · January 13th, 2005, 10:06 AM

If you are viewing it in IE, sometimes IE always needs to have padding: 0px; margin 0px;

Otherwise, it's in your XHTML code. Try to get us some links so we can better hlep you.

**morse** · January 13th, 2005, 08:35 PM

http://beta.morsedesigns.com/index2.htm

CSS is valid, but XHTML is not.

Sidenote- Those of you using IE, are the png border drop shadows transparent?

**senocular** · January 13th, 2005, 09:27 PM

its the heading tags. They aren't normal block tags; they are more like paragraph tags. You can use divs instead or set display to inline to prevent the breakup.

**morse** · January 13th, 2005, 09:40 PM

Confused. Everything is divs, as such:

HTML Code:

<div id="blabla">content</div>

**senocular** · January 13th, 2005, 09:44 PM

h1, h2 etc. These are header tags. Make those divs or spans. Either that or just keep them completely within a container div where they're line breaks wont interfere with the layout

**morse** · January 13th, 2005, 10:23 PM

I was going to ask about that, but the most pressing issue is between the "header" div and the "content" div, as well as between the "headerbody" and the "centerbody". Those gaps in the blue...

**senocular** · January 13th, 2005, 10:27 PM

yes, thats from the header tags. Ditch-em

**morse** · January 13th, 2005, 10:43 PM

But I need those tags to set the background images on those sections... The blue stuff. I can't put the text and the image in the same div because i have to put a left margin for the text...

**senocular** · January 13th, 2005, 10:49 PM

Listen, the problem is the header tags. As I said before you need to either
A) REPLACE the header tags with something like div or span tags and style them to format your text comparatively

or

B) SET your header tags to have a display type of inline, i.e.

HTML Code:

h1, h2, h3 {
    display:inline;
}

I suggest A. Just go through your HTML and replace your h1, h2 and other h tags with div or spans and style them as needed. Easy, problem solved.

This isnt changing your images (they are added through the other divs) and besides, you'd be replacing them with "better" tags so all you're losing is the awkward line jump.

p.s. the header tags and that pointless paragraph (p) tag you have in there too. As with when I was comparing header tags to p tags; both supply the extra line in their layout.