Small gaps between DIV’s

@SuzanneBMar 13.2005

When I create DIV’s on top of each other, often I find that there will be small gaps between them, of three or four pixels. I don’t seem to be able to predict when these will appear though. I have a few div’s on top of each other, some have gaps, some don’t. Why? What is going on?

to post a comment

CSS

11 Comments(s) _↴

@FangMar 13.2005 — #Do you have an example and browser(s)/version(s) where it occurs?

@SuzanneBauthorMar 13.2005 — #Hi Fang!

Take a look at this..

http://www.spellowhouse.com/gothic_tshirts_l.htm

This is a standard HTML/CSS page in which a 4 pixel gap appeared underneath the tab menu.

The gap happens between the header_container div and the page container div.

</div><div class="page_container">

Now view the same page generated by PHP, and there is no gap.

http://www.spellowhouse.com/test_tshirts_l.htm

The gaps vary depending which browser you use. Oddly, in the html page, IE shows a gap and so does Firefox. In the second, IE does not show the gap, but Firefox does. But I have other examples were this is reversed. I think there is something I am just missing here...

@spufiMar 13.2005 — #Is there suppose to be any difference between the markup and CSS for the two versions? If no, then I see at least some difference in the markup on the PHP generated page.

@FangMar 13.2005 — #Probably the image element on a seperate line in one version and enclosed within div's in the other:

 &lt;/div&gt;&lt;div class="tabs"&gt;
 &lt;map name="FPMap1"&gt;&lt;area href="index.htm" shape="rect"
 coords="21, 4, 117, 21"&gt;&lt;area href="gothic_ashtrays.htm" shape="rect"
 coords="118, 4, 212, 21"&gt;&lt;area href="gothic_backpacks.htm" shape="rect" coords="308, 4, 402, 21"&gt;&lt;area href="help.htm" shape="rect" coords="403, 4, 500, 21"&gt;&lt;/map&gt;
 
 <i>    </i>  &lt;img src="images/img_clothing.gif" usemap="#FPMap1" width="521" height="36"&gt;
 <i>    </i>  &lt;/div&gt;&lt;/div&gt;&lt;div class="page_container"&gt;
 &lt;div class="left_column"&gt;

 &lt;/div&gt;&lt;div class="tabs"&gt;
 &lt;map name="FPMap1"&gt;&lt;area href="index.htm" shape="rect" coords="21, 4, 117, 21"&gt;&lt;area href="gothic_ashtrays.htm" shape="rect"
 coords="118, 4, 212, 21"&gt;&lt;area href="gothic_backpacks.htm" shape="rect" coords="308, 4, 402, 21"&gt;&lt;area href="help.htm"
 shape="rect" coords="403, 4, 500, 21"&gt;&lt;/map&gt;&lt;img src="images/img_clothing.gif" usemap="#FPMap1" width="521" height="36"&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="page_container"&gt;
 
 &lt;div class="left_column"&gt;

Either make the code output as required(one of above) or try giving the image [I]display:block;[/I]

@SuzanneBauthorMar 13.2005 — #Hi all!

Well, I think the answer seems to lie in the div with the img in it.

If I set display:block; then things become a little less messy. The gap vanishes in IE consistantly, although it is still present in Firefox. At least it is predictable in the two - which it wasn't before. It makes me think that the problem is in the header block and not the page block.

I have tried re-arranging the PHP to generate gaps in the HTML and it makes no difference. The problem definitely seems to lie in the CSS not the PHP.

@FangMar 13.2005 — #Adding [I]disply:block;[/I]to the image removes the gap. Tried and tested.

@CarolWMar 13.2005 — #Me again.

[i]Originally posted by Fang [/i]

[B]Adding [I]disply:block;[/I]to the image removes the gap. Tried and tested. [/B][/QUOTE]

I have a problem rather like Suzanne's, though mine is consistet. I need to play with it more, to understand it. My problem is I'm parrotting without understanding the code, and I have lots of related questions, which I'll bring up one by one (I hope).

Fang, you helped me before, haha! So, now that finally I settled (for now) on a certain layout, and put up all-new pages last night, I can start learning all over again.

If I'm going to try what you suggested to Suzanne (and I plan to), how do I apply style to an image?

is there a class or id way to do it? what would the HTML code look like?

As in:

<i>
 </i>&lt;img class="nogap" alt= ....&gt;

or something like that?

And what would the CSS look like? Something like

<i>
 </i>img {
 whatever: nogap;
 }

or maybe

<i>
 </i>#header img {
 whatever: nogap;
 }

Stuff like this happens when one parrots, as I do, without understanding (yet! - but I am learning!)

P.S. I took down my massive, massive layout page, though it's still present on my site, representing an interim layout; I just removed the links to it; it contains credits to several of you here, and can be seen at

http://www.coherentdog.org/layout.htm

Sun, 13 Mar 2005 11:17:04

@FangMar 13.2005 — #Welcome back, been on vacation?

All 3 work:

1) applied [I]class[/I] to seleted images

2) applied to all document images

3) applied to all images in the element with [i]id header[/i]

Checkout this [URL=http://wellstyled.com/tools/colorscheme2/index-en.html]color scheme generator[/URL]

@CarolWMar 13.2005 — #[i]Originally posted by Fang [/i]

[B]Welcome back, been on vacation?

All 3 work:

1) applied [I]class[/I] to seleted images

2) applied to all document images

3) applied to all images in the element with [i]id header[/i] [/B][/QUOTE]

Okay, so what does the code look like? My examples were wild inventions - or were they?

I've been studying by editing my site files, making them consistent, changing to XHTML 1.0 Strict - all done! I removed some of the sloppier files, but there's still plenty of sloppiness here and there - stuff I don't understand, and will be asking about.

Lost control of my colors, for instance. Question coming up on that one, shortly.

Thanks for the welcome back!

Sun, 13 Mar 2005 11:35:11

@FangMar 13.2005 — #Just add the required rule for the image.

#header img {
 display:block;
 border:0;
 }

All 3 methods work depending on your requirements.

btw z-index must be unique (you probably don't need it here anyway)

@CarolWMar 13.2005 — #as in confusing fall warblers, I have confusing small gaps. The page is:

http://www.coherentdog.org/dream.htm

It's a three-column layout, with a background image, using the following code, which I don't really understand - I parrotted it, I believe, from A List Apart, in the faux-column article. I changed from having a decorative strip down the left side to using a background .gif to make columns colored all the way down the page (left and right), and I'm using the middle column for content (though I cheated and put an extra .gif on top, in dream.htm).

<i>
 </i>
 body {
 background: #ccc url("images/leavesblanket-ccc.gif") repeat-y 50% 0;
 font-family: Trebuchet,Verdana,Arial,Helvetica,sans-serif;
 font-size: 90%;
 margin: 0 0 0 20px;
 padding: 0;
 color : #000;
 background-color: #ccc;
 z-index: 0;
 }
 
 body.bc1 {background:#ccc url("images/logos/blanket-09c.gif") repeat-y 50% 0;}
 body.bc2 {background: #9cf url("images/logos/blanket-09c.gif") repeat-y 50% 0;}
 body.bc3 {background: #9cf url("images/logos/blanket-c9f.gif") repeat-y 50% 0;}
 body.bc4 {background: #9cf url("images/logos/blanket-c0c0c0.gif") repeat-y 50% 0;}

GOSH! If I'd look at my own CSS, I might have seen I had something different there from what I thought (or understood, which means much the same thing).

Anyway, I need to straighten this stuff out. This CSS is over 32K, and has a lot of stuff I'm not using, and I'm about to put all my HTML code in a single file, and then use text search to find out what I can cut out of my codog.css file. There must be lots. Also, I need to learn coding better, to consolidate the file.

I thought I had cmomented out the background statement in the first body statement there - quite apparently not! I'm quoting directly from my version of the codog.css I posted to my site last night.

Qustion 1: what does the "50%" do? I have no idea! I was just trying to find the information on W3C, but am having trouble locating it.

As you can see, I have about four different background .gif files - very easy to make; they're about 8px in height, and I believe 720px wide. So it's a tiled background image, but again, I don't understand the code.

In dream.htm, the .gif laid on top of the background image appears as I want it to in the right-hand column (column 3), but in the left-hand column, in Opera, and I think in FireFox, I see little gaps in the left-hand column between the "leaves.gif"s. The code is exactly the same in the righthand column, yet no gaps appear there.

In IE, I don't see any gaps eevn in the left-hand column.

I'm lost! Hardly know how to ask my question, haha!

Guess I'd better show the HTML also. In dream.htm, it's

<i>
 </i>&lt;body class="bc1"&gt;

I'm probably missing something I should be showing?

Sun, 13 Mar 2005 12:09:19

Also in #CSS _↴

Absolute Position <span> in Firefox?bizzare firefox error image maps?

Success!

Help @SuzanneB spread the word by sharing this article on Twitter...

Tweet This

Small gaps between DIV’s

11 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Small gaps between DIV’s

11 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #CSS _↴