CSS Spacers

July 23, 2004 4:53 AM

Hey, CSS Cowboys - spacer help needed! Look here. This is a simple box with three different backgrounds in three fields with no content; the first two need to be exactly 100 pixels tall, and the last one needs to be 200 pixels tall. I am making this happen with transparent spacer .gifs, but I want to eliminate them, if possible. I've tried a couple of things (spacer tag, fer example) that work in Mozilla but not IE; and a couple of things that work in IE (span tags with height declaration, fer example) but not in Mozilla. Padding doesn't work well in either for exact spacing. Can you help me conquer space, the final frontier?
posted by taz to Computers & Internet (5 answers total)

Well, inside them there spacer <img> tags you've got what looks like CSS, but you're stuffing it into the height attribute instead of into the style attribute...

Make sure your HTML validates before you try to work out CSS bugs. validator.w3.org.

Make sure your background image containers' css have both padding: 0; and margin: 0; - some browsers default is different than 0.
posted by tomierna at 5:34 AM on July 23, 2004

Response by poster: oops - yeah, thanks, tomierna: that was a typo on the semi-colon (it figures I would do that in something I post to AskMe). I fixed that and added the padding: 0 and margin: 0.

So, any thoughts about getting rid of those .gifs?
posted by taz at 5:48 AM on July 23, 2004

Definitely validate your CSS. You wrote width:400px, height: 200px; instead of width:400px; height: 200px;.
posted by Khalad at 6:54 AM on July 23, 2004

holly hack. tan hack. combination of the two.

basically just hide the rules that work in IE from anything else, overriding the rules you use for mozilla/opera and other browsers that behave themselves.

more here and here and don't forget the nice methods of hiding almost anything from non-IE browsers mentioned here.
posted by caution live frogs at 10:44 AM on July 23, 2004

Response by poster: Okay, here's what I did: I gave each field a span with a height declaration in the CSS, and used empty span tags in the html - this seems to work fine. Example:


#top {
width:400px; height: 100px; background: url(background1.gif); padding: 0; margin: 0;
}

#top span {
height: 100px;
}

then,

<div id="top"><span></span></div>
posted by taz at 10:39 PM on July 23, 2004