CSS - Space between divs

[morse]

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

[lostinbeta]

Do you have the margins set to 0px?

[morse]

Yep

[ditt0]

could u show us the code ?

[Kristopher]

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]

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]

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]

Confused. Everything is divs, as such:
<div id="blabla">content</div>

[senocular]

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]

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]

yes, thats from the header tags. Ditch-em

[morse]

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]

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.

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.

[morse]

Yay it worked! I love you sen!

[senocular]

;)

[Tesseract]

rather than setting the display of the h* tags to inline, do this:


html,body,h1,h2,h3,h4,h5,h6,div,p {margin:0;padding:0;}


changing things from block to inline will have some cross-broser issues, whereas simply turning off the default margins and padding will allow you t o set those things yourself, with no hidden surprises.

[senocular]

Ah, good point Tesseract. You're right about the inline thing (which is why I didnt recomend it) and I didnt know (though it makes total sense now that I think about it) that the extra spacing provided was a result of default margins. Thanks for pointing that out ;)

[λ]

No offense sen dude, but using hN tags is much better than using divs ;) That way, people using Lynx or such (hey, I use it occasionally when I'm restricted to a console) still get the tag formatted as a header.

(Some screen readers might use it as well, I don't know)

[senocular]

I understnad that, but they included the margins causing the problems (which would have easily been avoided with divs). I didnt realize until with what Tesseract suggested that they were simply margins and could thereby be easily avoided. I just always thought they were something inherent of the tag itself since such properties were evident before all this css craziness ever popped its head up around here and layouts were pretty all about tags. ;)

[Kristopher]

Just set the height property of the Heading Tags to a smaller value....

[Kristopher]

And I wish people would stop trying to make dropshadow PNGs. They don't work in more browsers than they do work in. Try this tactic instead:

http://www.stylegala.com/articles/drop-shadows/

[morse]

I love stylegala :love: