Crazy gap in IE between divisions

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Håvard Axelsson - 29 Jan 2005 23:55 GMT

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,

Signature

Håvard.

Reply to this Message

Spartanicus - 30 Jan 2005 09:15 GMT

>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}

Signature

Spartanicus

Reply to this Message

Håvard Axelsson - 30 Jan 2005 14:04 GMT

> 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?

Signature

Håvard.

Reply to this Message

Spartanicus - 30 Jan 2005 16:09 GMT

>> 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.

Signature

Spartanicus

Reply to this Message

ram - 30 Jan 2005 23:35 GMT

In article
<mh1qv0143rei3tak2ehn5t95modhtte6ag@news.spartanicus.utvinternet.ie>,

> >> 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

Reply to this Message

Ali Babba - 31 Jan 2005 09:06 GMT

> In article
> <mh1qv0143rei3tak2ehn5t95modhtte6ag@news.spartanicus.utvinternet.ie>,
[quoted text clipped - 15 lines]
> 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

Reply to this Message

rockoyster - 31 Jan 2005 09:30 GMT

"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

Reply to this Message

ram - 30 Jan 2005 23:03 GMT

> 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

Reply to this Message

mscir - 31 Jan 2005 02:00 GMT

> 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.
[quoted text clipped - 6 lines]
>
> 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

Reply to this Message

Unknown User - 31 Jan 2005 14:07 GMT

> 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,

Signature

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

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / January 2005

Crazy gap in IE between divisions