Crazy gap in IE between divisions

[Håvard Axelsson]

I have created the above part of a new web site, but there is a strange
gap between divs, and I don't know how to remove these.

Could you have a look please and tell me what's wrong?
http://colombie.org/nouveau/design-css.html

Margins and paddings are set to 0; the elements are displayed as block
because of their nature. I'm stuck...

Thanks,

--
Håvard.

[Spartanicus]

Håvard Axelsson <[e-mail]> wrote:

I have created the above part of a new web site, but there is a strange
gap between divs, and I don't know how to remove these.

Could you have a look please and tell me what's wrong?
http://colombie.org/nouveau/design-css.html
And how are we supposed to know where to find this gap?
Margins and paddings are set to 0; the elements are displayed as block
because of their nature. I'm stuck...

img{vertical-align:top}

--
Spartanicus

[Håvard Axelsson]

Em Sun, 30 Jan 2005 09:15:39 +0000, Spartanicus <[e-mail]> escreveu:

And how are we supposed to know where to find this gap?

Hi! The problem happens in IE, there is a white gap between the top-left
logo, the little icons on top, and the search box in the top-right corner:
http://colombie.org/nouveau/design-css.html

I haven't been able to solve this. Everything seems all right, it doesn't
happen in Opera and Mozilla. Do you see this white gap?
--
Håvard.

[Spartanicus]

Håvard Axelsson <[e-mail]> wrote:

And how are we supposed to know where to find this gap?
Hi! The problem happens in IE, there is a white gap between the top-left
logo, the little icons on top, and the search box in the top-right corner:

And you originally left out this information why?
http://colombie.org/nouveau/design-css.html

I've got better things to do than to unravel a complete design, maybe
I'll have a look if you isolate the issue in a minimised test case.

--
Spartanicus

[ram]

In article <opsld12pq2wjyi3l@pretinho>,
Håvard Axelsson <[e-mail]> wrote:

I have created the above part of a new web site, but there is a strange
gap between divs, and I don't know how to remove these.
Which <divs>?? All of them??

Please include browser/platform info - I could only replicate the gap in
IE 5.2.3 Mac - also tested in IE6 Win / Safari 1.2.4 / Firefox Mac 1.0 -
can't test on everything!

Could you have a look please and tell me what's wrong?
http://colombie.org/nouveau/design-css.html

Margins and paddings are set to 0;
No they aren't!

#contenu {
padding: 10px 0 0 0;
}
#main {
padding-left: 200px;
}
#separ {
padding: 10px;
}
the elements are displayed as block

because of their nature. I'm stuck...

Thanks,

I believe that the problem is in #contenu

I could remove the gap by removing the {clear: both;} in the <div>
#contenu

It seems to me that you can live without the {clear: both;} anyway as it
will naturally drop below the <div> above.

It also seems, strangely enough, that placing a comment in your HTML
directly after #submenu and before #main seems to remove the gap too
(why I cannot understand). IE is a strange beast - I think that goes
without saying though!. I also found several other fixes - but they
don't seem as logical as removing the {clear:both;}.

One more thing to note - it is standard to give dimensions for the <img>
element in HTML. I did not have your images displayed in testing this so
cannot be sure that my test is exactly the same layout as yours.

*L-
Ram // Always in reverse // @ME: moc.ommangised@mar

[ram]

In article
<mh********************************@news.spartanic us.utvinternet.ie>,
Spartanicus <[e-mail]> wrote:

Håvard Axelsson <[e-mail]> wrote:

And how are we supposed to know where to find this gap?
Hi! The problem happens in IE,
What version?
there is a white gap between the top-left

logo, the little icons on top, and the search box in the top-right corner:

And you originally left out this information why?

Seems my NNTP server's a little slow, missed the earlier posts.

I am afraid to say - I can't reproduce the mysterious gap at the top
either. (IE 5.2.3 Mac / IE6 Win / Firefox 1.0 Mac / Safari 1.2.4)
http://colombie.org/nouveau/design-css.html

I've got better things to do than to unravel a complete design, maybe
I'll have a look if you isolate the issue in a minimised test case.

*L-
Ram // Always in reverse // @ME: moc.ommangised@mar

[mscir]

Håvard Axelsson wrote:

I have created the above part of a new web site, but there is a strange
gap between divs, and I don't know how to remove these.

Could you have a look please and tell me what's wrong?
http://colombie.org/nouveau/design-css.html

Margins and paddings are set to 0; the elements are displayed as block
because of their nature. I'm stuck...

Thanks,

You might give this a try to fix the gap on the right of the header:

#search {
float: right;
width: 150px;
height: 50px;
background: url(fondrouge.png);
margin: 0 0 0 -3px;
padding: 0 0 0 3px;
}

If you look at your page in Netscape 7.2 and reduce the browser width,
the images move down the page and don't look too good. You might want to
fix that too.

Mike

[Ali Babba]

ram wrote:

In article
<mh********************************@news.spartanic us.utvinternet.ie>,
Spartanicus <[e-mail]> wrote:

Håvard Axelsson <[e-mail]> wrote:

And how are we supposed to know where to find this gap?

Hi! The problem happens in IE,

What version?

there is a white gap between the top-left

logo, the little icons on top, and the search box in the top-right corner:

And you originally left out this information why?

Seems my NNTP server's a little slow, missed the earlier posts.

I am afraid to say - I can't reproduce the mysterious gap at the top
either. (IE 5.2.3 Mac / IE6 Win / Firefox 1.0 Mac / Safari 1.2.4)

i do get the gaps, and they are pretty obvious
IE6sp2

[rockoyster]

"Spartanicus" wrote in message
<<snip>>

And how are we supposed to know where to find this gap?

Two white vertical lines are clearly appaerent in my Version of IE6.0SP2

It's not perchance one of those funny "whitespace" bugs is it?

Try a google on "whitespace css bug" for a few leads.

Rockoyster

[Unknown User]

On Sun, 30 Jan 2005 18:00:38 -0800, mscir <ms***@yahoo.com> wrote:

If you look at your page in Netscape 7.2 and reduce the browser width,
the images move down the page and don't look too good. You might want to
fix that too.

Thank you very much, I think now there is only one problem:
http://colombie.org/nouveau/design-css.html
The inline lists:
- The pre-colombian icons on top
- The main navigation bar on top
- The pre-colombian icons in the copyright bar at the bottom
They don't render as I want. I want them to adapt exactly to the browser
width, pretty much the same way it would if I put them in a 1-row table
with one cell per image, and all cells set to, say, 10%.

I want these list items to be distributed evenly according to the
available space. I'm not able to do so. Here's the code I use:

#illus ul {
list-style: none;
margin: 0 150px 0 0;
padding: 0;
margin: 0;
}

#illus li {
margin: 0;
padding: 0;
float: left;
display: block;
width: 12%;
height: 50px;
voice-family: "\"}\"";
voice-family: inherit;
width: 12%;
}

html>body #illus li {
width: 7.5%;
}

The list items don't use the entire space available when the window is
maximized. They wrap down when the window is resized to 780px wide.

What's the trick?

Thanks,

--
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
Discover Opera: http://members.surfeu.fi/jerkku/
http://www.auriance.com - http://www.auriance.net